|Discussion
Recommended Image Sizes per Widget or Content Type
Is there any documentation around image size guidelines for each type of widget or content type? I have found mutliple articles on a single widget or content type, but not one document that pulls it all into one.
Specifically I am having an issue with an image in a microblog post, and the image appearing stretched when it posts in the widget. Per some of the knowledgebase articles, we have used a PNG image, and aside from going into the code and changing the ratio (something most users will not know how to do) is there any other guidance I can provide around image sizes to use for the best rendering in a microblog widget?
Viewed 1,152 times
6 Replies
Igloo definitely needs to create and maintain one style guide in the knowledgebase to reference in their playbook.
Adam Cichorzewski
Lindsay Pasichnyk Nicole Dreher - can you please provide some context here?
Great question Jackie. The answer is .. no. Since the question is, is there a single source.
We certainly have image sizes baked into articles about specific widgets, but there is no one single source for all the image sizes possible in the platform. This is something that has come up lately, so I think I'll take it back to see what kind of documentation can consolidate this knowledge in so that we can all refer to one landing page, even if it links to other pages.
I will link to specific ones here below to see how convenient I can make this, although you know about these ones. One of the key things to note is that every Igloo instance has a Theme and that theme's CSS impacts component sizes. For example, a banner height on one theme might be 160 pixels tall versus another theme at 220 pixels tall. Because the platform is responsive and images within Igloo (generally) pull from the center of the image, these size differences within a theme itself will impact having a "standard size". Even some widgets are impacted if the margins and padding are being targeted by CSS. For example, card view of blogs is a popular layout with images, but will vary in size if your content width is 1100px versus 1400px or something else. So just know that image sizes can vary because of theming.
To make it specific to each instance, I use this chrome plugin to make it easier to grab/measure image sizes in workplaces to optimize image ratios and crop photos accordingly:
Here are a list of links to articles that have image size information within the article itself:
Articles on Images in general:
Deep Dive into Images
Inserting Images into Editor
Blurry Images
Hope this helps in the interim of me taking this idea back as a helpful resource to create.
Whoops - One more note to add to try Jackie Bartolotta . Sometimes there is an issue if the image you are uploading is larger in size than the content/widget width. So I try to stick below 800px wide which seems to do the trick. If it's full width column, then I suppose 1100px or lower might be the number.
Lindsay Pasichnyk Thank you so much! This will be super helpful!