WU SVG Icons[Solution]

  • Resolved ivanphidalgo

    (@ivanphidalgo)


    9 years, 5 months ago

    I tried to use SVG icons with the widget and I found a way to do it. With SVG files the weather widget looks crisp in high resolution displays and modern smartphones. If you want to do it follow the following steps:

    1-From the WU webpage inspect the forecast image to discover the icons directory, the result is:
    “//icons.wxug.com/i/c/v4/”. Save that path for later. (Note the missing “http:”)

    2-Edit the function.php file from your theme and add this at the end of the file (use the path without the “htpp:”):

    //Add Retina icons(SVG) to Weather Underground Widget

add_filter('wp_wunderground_forecast_icon', 'use_custom_wunderground_icons', 10, 2 );

/**
 * @return string URL to the root folder of the icon set.
 */
function use_custom_wunderground_icons( $url_base = '', $icon_name = '' ) {
    return '//icons.wxug.com/i/c/v4/';
}

    You can vary the “v4” part for your choose from v1 to v4. All these includes SVG icons.

    3-In the file “icon.html” in the path “plugin/wunderground/templates/snippets/”, change the extension in {{icon}}.gif for {{icon}}.svg as follow:

    <{{tag}} class="wu-icon"><img src="{{user_icon_url}}/{{icon}}.svg" alt="{{ forecast.condition ? forecast.condition|e : day.condition|e }}" width="{{iconsize}}" height="{{iconsize}}" /></{{tag}}>

    https://www.ads-software.com/plugins/wunderground/

Viewing 2 replies - 1 through 2 (of 2 total)

  • Thanks for sharing this. Where’d you find these urls? Does wunderground publish them somewhere? They aren’t listed amongst their icon sets.

    Plugin Author Zack Katz

    (@katzwebdesign)

    Thanks, ivanphidalgo – I wanted to include that in the core plugin, but not all browsers support SVG.

    @kfunk – if you view source on wunderground.com, you can find the URLs.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘WU SVG Icons[Solution]’ is closed to new replies.