Problems with icon scaling after 3.0 update

[inetinitiatives]

Additionally, wherever we have created additional icons, the framework is now scaling these down in size, instead of displaying them at actual size. . Are we going to have to replace all our shortcode icon calls with full image paths in order to display the icon images that we’ve created at their full size?

Topic

[Jason Bobich]

Hello,

Apologies, I’m not 100% sure what you’re referring to. Can you link me to an example?

[inetinitiatives]

We’re in the process of building the site out, having done a production version with the previous version of Alyeska.

Please look at: http://037d6b3.netsolhost.com/scouthome/scout-mercantile/

1. The icon in the ‘Special Orders’ sidebar widget that looks like a clock, and the other in the footer which features a photo of a man are being scaled to what appears to be 50% of the actual image size. This wasn’t happening in the previous version.

2. if you view each image you can see that the image dimensions are larger; they are now being automatically scaled to 1/2 size. I’m using the same shortcode as we were using in the previous version [icon image=”icon_clock” align=”left”] , however now there is a size automatically inserted when looking at the actual code with Firebug.

3. When I inspect the code with Firebug, it looks like the syntax for the icon class has changed even though I’m calling the shortcode in the exact same way. Can you tell me how to override or somehow change this so that we can use icon images of varying sizes as we did before.

Thanks,

—Anji

[Jason Bobich]

Hello Anji,

Aw, okay I see now. So before there was no “width” parameter in the [icon] shortcode. All icons included in the theme previously were 45px. We wanted to add a width parameter so people could incorporate more cool things later on like retina-support. The default value is 45.

So, specifically in your case, you’re seeing this because obviously you have no width parameter, and so now you’re getting a 45px width slapped on the image. What you want to do is go to the usages of [icon] shortcode and add on a width like:

[icon image="icon_clock" align="left" width="80"]

If this is too terribly inconvenient and you’ve used this in a lot of places, you could also use Custom CSS to of course override this, as well, globally:

.tb-image-icon { width: auto !important; }

[inetinitiatives]

Thanks very much for the quick reply. The CSS is a good option. Best regards.

[Author]

Replies