Software

Installation

1. Unzip the folder to a temporary location on your local hard drive.
2. FTP the files from their local folders to the same locations in your EE install’s /system/user/addons/ folder on the server.
3. Navigate to Add-ons in your EE control panel and install the add-on. That’s it!

Tag: Current Weather - Simple

For the easiest usage, use the “simple” tag as a single tag, and fetch the weather using an airport code. Here’s how that works.

First, find the 4-letter airport code for the location you want weather conditions for.

• World Airport Codes
• Wikipedia - List of ICAO Codes

Then, add the tag {exp:hop_weather:simple airport_code="CYVR"} to your template.

A short weather update from the National Weather Service will be output as HTML.

Tag: Current Weather - Advanced

If, on the other hand, you’d like control of the add-on’s output, use {exp:hop_weather:advanced} as a pair (sadly, it doesn’t control the weather itself in this version).

The advanced tag pair will let you use and format each part of the forecast, as in this example:

{exp:hop_weather:advanced airport_code="CYVR"}
    {if no_results}No weather report for this location.{/if}
    <span>{weather_string}</span>
    <span>{temp_f}</span>
    <span>{temp_f_round}</span>
    <span><img src="{icon_url}" alt="{generic_icon_name}" /></span>
    <span>{generic_icon_name}</span>
{/exp:hop_weather:advanced}

Parameters

• airport_code="ABCD" - must be 4 letters long
• lat="47.6062" long="-122.3321" - must use as a set. Airport code takes priority.
• forecast="yes" - the default is “no”. Without this, it outputs current weather
• periods="4" - how many days and nights (essentially) of forward-looking forecast data it outputs – though in the morning, it includes the evening, and in the evening, it starts with tomorrow’s weather, which is why this is not a “days” parameter.

Variables

• {weather_string}
• {temp_f}
• {temp_f_round}
• {temp_c}
• {temp_c_round}
• {icon_url}
• {generic_icon_name}

Usage: Advanced Options - Forecast, Lat/Long, Periods

Add forecast="y" to hop_weather:simple or hop_weather:advanced tags to display the 1-week weather forecast for a region. By default, it will return 14 periods (day and night forecasts).

You can then specify periods="#" parameter to control how many results are returned by the forecast.

And you can specify lat and long to get weather closest to a particular location.

Again, for simple, default output, use {exp:hop_weather:simple forecast="y" lat="47.6062" long="-122.3321" periods="4"}.

Or, to fully control the output, you can use {exp:hop_weather:advanced}:

<style>
.weather-widget { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem; }
.weather-day { flex: 1 1 120px; text-align: center; padding: 1rem; border: 1px solid #ddd; border-radius: 6px; }
.weather-icon img { width: 60px; height: 60px; }
.weather-day-name { font-weight: bold; }
.weather-summary { color: #555; }
.weather-temp { font-size: 1.2rem; color: #222; }
</style>
<div class="weather-widget">
    {exp:hop_weather:advanced forecast="y" lat="47.6062" long="-122.3321" periods="6"}
        {if no_results}No weather forecast for this location.{/if}
        <div class="weather-day">
            <div class="weather-icon">
                <img src="{icon_link}" alt="{weather}">
            </div>
            <div class="weather-info">
                <div class="weather-day-name">{day}</div>
                <div class="weather-summary">{weather}</div>
                <div class="weather-temp">{temperature}&ordm;{temperature_unit}</div>
            </div>
        </div>
    {/exp:hop_weather:advanced}
</div>

Variables

• {count}
• {day}
• {temperature}
• {temperature_unit}
• {weather}
• {weather_full}
• {icon_link}
• {wind_direction}
• {wind_speed}
• {start_time}
• {end_time}

Icons & Weather Types

The weather.gov service tells the weather using a long list of various, subtly different weather types. Hop Weather converts these into a smaller list of weather types so that you don’t need to generate too many icons.

The full list can be seen at https://api.weather.gov/icons, and the conversions are listed here:

'skc'       => 'fair', # Fair, Clear
'few'       => 'fair', # A Few Clouds, A Few Clouds with Haze
'nfew'      => 'fair', # Seems that the rss feed uses another icon name for this one
'sct'       => 'cloudy', # Partly Cloudy, Partly Cloudy with Haze
'bkn'       => 'cloudy', # Mostly Cloudy, Mostly Cloudy with Haze
'nbkn'      => 'cloudy', # Seems that the rss feed uses another icon name for this one
'ovc'       => 'overcast-fog', # Overcast, Overcast with Haze
'novc'      => 'overcast-fog', # Seems that the rss feed uses another icon name for this one
'sn'        => 'snow', # Snow, Light Snow
'ra_sn'     => 'snow', # Rain Snow, Light Rain Snow
'raip'      => 'ice-freezing_rain', # Rain Ice Pellets, Light Rain Ice Pellets
'fzra'      => 'ice-freezing_rain', # Freezing Rain, Freezing Drizzle
'ra_fzra'   => 'ice-freezing_rain', # Freezing Rain Rain, Light Freezing Rain Rain
'fzra_sn'   => 'ice-freezing_rain', # Freezing Rain Snow, Light Freezing Rain Snow
'ip'        => 'ice-freezing_rain', # Ice Pellets, Light Ice Pellets
'snip'      => 'snow', # Snow Ice Pellets
'minus_ra'  => 'rain', # Light Rain, Drizzle
'ra'        => 'rain', # Rain, Heavy Rain
'shra'      => 'rain', # (w/cloud cover > 60%), Rain Showers
'hi_shwrs'  => 'rain', # Showers in Vicinity, Showers in Vicinity Fog/Mist
'tsra'      => 'rain', # (w/cloud cover > 75%), Thunderstorm
'scttsra'   => 'rain', # Thunderstorm in Vicinity
'hi_tsra'   => 'rain', # (Cloud cover < 60%), Thunderstorm in Vicinity
'fc'        => 'overcast-fog', # Funnel Cloud, Funnel Cloud in Vicinity
'tor'       => 'hurricane-tropical_storm', # Tornado
'hur_warn'  => 'hurricane-tropical_storm', # Hurricane Warning
'hur_watch' => 'hurricane-tropical_storm', # Hurricane Watch
'ts_warn'   => 'hurricane-tropical_storm', # Tropical Storm Warning
'ts_watch'  => 'hurricane-tropical_storm', # Tropical Storm Watch
'ts_nowarn' => 'hurricane-tropical_storm', # Tropical Storm Conditions presently exist w/Hurricane Warning in effect
'wind_skc'  => 'windy', # Windy, Breezy
'wind_few'  => 'windy', # A Few Clouds and Windy
'wind_sct'  => 'windy', # Partly Cloudy and Windy
'wind_bkn'  => 'cloudy', # Mostly Cloudy and Windy
'wind_ovc'  => 'cloudy', # Overcast and Windy
'du'        => 'overcast-fog', # Dust, Low Drifting Dust
'fu'        => 'overcast-fog', # Smoke
'hz'        => 'overcast-fog', # Haze
'hot'       => 'fair', # Hot
'cold'      => 'ice-freezing_rain', # Cold
'blizzard'  => 'ice-freezing_rain', # Blizzard
'fg'        => 'overcast-fog', # Fog/Mist, Freezing Fog

If a new icon type is used by the weather service, it will be reported in your site’s Developer Log.

Caching

You are responsible for your site’s usage of the weather service. By default, this add-on will cache for 300 seconds (5 minutes) any results it fetches. This is to help ensure that the Weather.gov service won’t block you.

Other caching at the template or tag level (i.e. cache="yes" refresh="30") can make this caching period longer, but not shorter, and is recommended, but not required.

Even with caching, it is still possible to overload the weather server and get your requests blocked, if, for example, your site tries to look up the weather in 100 cities at once.

If you are having trouble with the display of weather using this add-on – for instance, if the weather output is not current, or is missing / blank – turn on Template Debugging and check the results logged there. Logging for most issues with Hop Weather occurs in the Template Debugging log.

Updating

Updating is easy:

1. Download a new version from this website, and extract on your hard drive.
2. Upload the new files to their appropriate locations.

Uninstalling

1. Navigate to the Add-Ons > Modules tab in your EE control panel and uninstall the module.
2. Remove the add-on directory from your EE system folder on the server.