A kind of alchemy exists when building and governing a digital workplace. Sometimes learning one small tip and a neat way to apply it can unlock new possibilities for what you create.
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.
0 Comments