Image size question in widgets

LiveWhale
1

Hello Livewhale!

I have a question regarding images that get pulled into widgets.

Currently, it looks like the images are “auto-cropped” to 160px x 160px when used in widgets. This is causing the images to become pixelated since the size of the container we’re putting them in is larger than this.

Is there a way to reference the image’s original file so they aren’t becoming pixelated?

Here’s a current working example you can see: Sitecore 1 Column Widget | Heather Test Site

2

In the widget editor, there are (usually) fields for thumbnail width and thumbnail height, which can be adjusted.

To set them at 500x500, for instance, the output in the widget args would be

<arg id="thumb_width">500</arg>
<arg id="thumb_height">500</arg>
1 Like
3

Thanks Morgan! This was exactly what I needed. I didn’t realize in the editor for the widgets that there were settings in place that were causing this behavior and that they could be overwritten through there. Appreciate it!

2 Likes
4

Hi guys! Heather, you can also set default image width/height in the calendar configuration file. But for a widget where you want an extra large image, that’s exactly the right approach.

One more little detail: You can use the min_image_size widget setting to skip events with images that aren’t big enough. That can be very useful when your widget uses a very large image; usually you won’t want to upscale images that aren’t big enough, so this argument skips those events entirely.

5

Thanks Jason, that’s good to know.

For our purpose, we don’t want to skip events that have an extra large image - we want to scale down the image so it fits better within our widget’s image space.

The [image] call in the widget was pulling in the thumbnails that were auto-cropped at 75px (or something like that) and I couldn’t figure out how to reference the original image file so I can scale it down to the dimensions I needed. With Morgan’s suggestion, I found that in the widget editor it was auto-cropping the images to be really small and if I adjusted those settings to ignore the cropping, I could then format the image how I wanted in my widget stylesheet.

6

Thanks Heather – to clarify, actually min_image_size only skips images that are too small; extra large images LiveWhale will automatically scale down to match the width/height set in your widget. Sounds like you’ve got it sorted out though, which is great!