A Mystery in Blog Listing template - featured image sizes

SOLVE
Occasional Contributor

In creating our blog using recently created-for-us through migration templates, I have an unexpected effect on images in the blog listing, EXCEPT for the featured post.

 

The featured image for the featured post is appearing within the width of the text below, while the featured images on the rest of the post listings take up the whole page width. It even seems to "push" the sidebar to appear below even on a wide screen.

 

http://thefiremountainschool-4605825.hs-sites.com/blog

 

Looking at the listing code, the two sections look very similar:

 

------ The one that looks "good"

{% if pop_post.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{pop_post.absolute_url}}" title="{{ pop_post.name }}" class="hs-featured-image-link">
<span class="sticky-label">Featured</span>
<img src="{{ resize_image_url( pop_post.post_list_summary_featured_image,760 ) }}" class="hs-featured-image" alt="{{ pop_post.name }}">
</a>
</div>
{% endif %}

 

------ The one that shows uncontrolled width:

{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{content.absolute_url}}" title="{{ content.name }}" class="hs-featured-image-link">
<img src="{{ resize_image_url( content.post_list_summary_featured_image,370 ) }}" class="hs-featured-image" alt="{{ content.name }}">
</a>
</div>
{% endif %}

_____________________

What am I missing?

 

I'm not experienced (yet!) in the language. 

Thanks ahead for your help!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Top Advisor

Hi @Avi25,

 

I'm glad you fixed your images. Here is my input on that.

 

Your images have the class "hs-featured-image" and the there is a wrapper around the image with the class "hs-featured-image-wrapper".  You can play with the image width like this:

..hs-featured-image-wrapper {
    text-align: center;
}

.hs-featured-image {
    max-width: 100%; /* or 450px, etc */
}

your images are inline elements so text-align center on the parent centers them, and the max-width on the image keeps it from growing beyond the set width. 100% would be 100% width of the container.

 

As for your side bar, the wrapper to your list of blog posts, '.hs-blog-listing .blog-content-wrapper' is set to 'float: none !important' in your October2018 stylesheet. changing that to 'float: left' makes your sidebar sit where you are wanting. 

https://share.vidyard.com/watch/5pfcdUjsLaKTVdVbomNhyD?

3 Replies
Occasional Contributor

I fixed the image issue: I found a difference in CSS between the popular-post-wrapper and the hs-featured-image-wrapper.

After adding "display: block;" the images are now showing well.

 

The second part of the mystery is not yet solved...The sidebar (supposed to show 8-4 division in the 12 grid) is still showing below the posts, no matter the window width.

 

Any ideas where to look?

Reply
0 Upvotes
Highlighted
Top Advisor

Hi @Avi25,

 

I'm glad you fixed your images. Here is my input on that.

 

Your images have the class "hs-featured-image" and the there is a wrapper around the image with the class "hs-featured-image-wrapper".  You can play with the image width like this:

..hs-featured-image-wrapper {
    text-align: center;
}

.hs-featured-image {
    max-width: 100%; /* or 450px, etc */
}

your images are inline elements so text-align center on the parent centers them, and the max-width on the image keeps it from growing beyond the set width. 100% would be 100% width of the container.

 

As for your side bar, the wrapper to your list of blog posts, '.hs-blog-listing .blog-content-wrapper' is set to 'float: none !important' in your October2018 stylesheet. changing that to 'float: left' makes your sidebar sit where you are wanting. 

https://share.vidyard.com/watch/5pfcdUjsLaKTVdVbomNhyD?

Occasional Contributor

Thank you @Jsum, the sidebar works! (or rather it's not being pushed away anymore.)

 

I appreciate you showing me also how to manipulate the image / image-wrapper to work together. This helps me in a few other places.