Expert Tier: Publishing blogs with hidden images & templates
Fact — the first image in a blog article is the image used in a blog widget configured to show posts from that channel. It makes adding rich media to your content and pages easy but can come with its own challenges for those of us that like things pixel-perfect.
- Brand consistency: Home pages can lack cohesion when colorful memes and gifs from posts display on the front page. The engaging media that enriches digital workplace content doesn't always promote the kind of cohesion we're after on the pages it displays on.
- Cropping conundrums: Finding the perfect image is one thing, but cropping to the correct aspect ratio can compromise content or how it displays through widgets.
- Barriers to creation: Guidelines on how to use images so they crop correctly in blog widgets can make it harder for members to create content. Make it easier for members to focus on what they're posting and less on how.
So, let's use that fact we started with to our advantage: hide images at the top of blog posts to control what is displayed in blog widgets. Here's that tip and how to use it with other Igloo features for expert-tier content creation practices in your digital workplace.
Hide images in blog articles
The first image in a blog post is the image that displays in a blog widget, but that doesn't mean it needs to be visible in the blog article itself — we hide it. We're using the same technique in this post. You'll notice that the image for this blog on the home page of Customer Care isn't the first visible image in the post itself.
- Upload the desired image to the top of the blog post.
- Click the image to bring up its edit options. Select the ruler. Change Size.
- Change the width to 0px, allow the height to auto-scale.
- Take care not to backspace away the image now hidden at the top of the post.
- Comfortable in code view? An alternative is to add the word
hide
to the class tag.
Create an asset bank
Work with your own graphics team or Igloo Designers to create an asset bank of images by blog channel or topic. Consider how a consistent display image creates content recognition for the different blog channels of your digital workplace. We have an asset bank for Customer Care with images for Call to Action widgets and blogs of different types.
The best aspect ratio for your image will depend on the configuration of the blog widget. Reference image sizes in the Knowledge Base: Blog Article Widget. Store the asset bank in a Mission Control Space for your site's Content Creators or in a folder of your Theme Folder Channel.
Set channel templates
Use the channel templates feature to create a default hidden image for a blog channel. When a blog widget displays multiple blog channels, these default images help differentiate communication topics and take the guesswork out of content creation for authors.
- Reference the Knowledge Base instructions on creating Channel Templates.
- Upload the desired channel image to display in blog widgets and hide it.
- Add placeholder text to remind authors where to start their writing and not accidentally delete the hidden channel template image.
Configure a backup blog widget default image
If not every blog channel has a default image, a post with no image can affect the consistency and layout of the blog widget. Don't overlook this easy configuration opportunity in blog article widgets to set a default image when the article doesn't contain one. It's an available field in the Full configuration of the widget, either with the image Beside or Above.
Put it all together
Consider how a little bit of effort to implement these tips in your digital workplace brings an ease and polish worth the time. It's enough to start with one channel and see it in practice before expanding to others.
Have questions about this or other ideas on creative ways to use Igloo features? Leave a comment below, or start a conversation in the Community area.
8 Comments
Hi John Pentland and Edita Svoboda,
I read through this article, but I may have missed where it says the exact dimensions the thumbnail pulls through as. I will need to know those dimensions so I can recreate all our article images in Canva. From there, I will insert them as invisible photos and then they will automatically pull through to the correct thumbnail dimension. Could someone assist?
Hi Andrea Acierno! This article about the Blog Widget has a table towards the bottom that lists image size by configuration type: https://customercare.igloosoftware.com/support/knowledgebase/all_articles/articles/blog_articles_widget
Hi Brigid Towler,
I see the chart but am not understanding the language. Could I get the dimensions of the thumbnails for articles please? I attached a photo if that helps. Thanks!
Hi Andrea Acierno,
The article indicates that you are using Full View with images Above Blog Article content. Blog Articles are displayed as Cards across 3 columns.
The standard size for your configuration is 347x128. However, from your screenshot, your digital workplace may have a custom width that changes those dimensions. John Pentland will pick up on this conversation in your Customer Room to confirm your specifics!
Ah I see! Thank you! I went ahead and tried the 347X128 earlier because that one looked the most accurate and it seems to be working okay!
Thanks so much for your help! Brigid Towler
Hi Brigid Towler and John Pentland - We found another issue. It seems on the larger monitor the dimensions are different than on a laptop screen so I had to bring in the blue box border smaller than the dimensions to make it fit. However, when I moved the same page over to my laptop screen it zoomed back out to original dimensions. The laptop screen holds the 347X128; but the other monitors do not. I attached two photos so you can see how they appear differently. (see the blue border in the thumbnail photos is zoomed out on the laptop and zoomed in on the monitors)
laptop top photo
monitors bottom photo
Faryar Borhani
Hi Andrea Acierno,
As Brigid Towler mentioned above this is likely a function of the custom width of your Digital Workplace theme. Let's move the conversation to the Project Room and we can investigate the behavior you are seeing with your theme.
Faryar Borhani
John Pentland Okay, I will await a notification for the conversation in the project room, thanks
Faryar Borhani