CMS Development

Avi25
Contributor

A Mystery in Blog Listing template - featured image sizes

SOLVE

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!

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

A Mystery in Blog Listing template - featured image sizes

SOLVE

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?

 

Need help? Hire Us Here

View solution in original post

4 Replies 4
Jsum
Solution
Key Advisor

A Mystery in Blog Listing template - featured image sizes

SOLVE

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?

 

Need help? Hire Us Here

vulongtran
Member

A Mystery in Blog Listing template - featured image sizes

SOLVE

Awesome, thank you. This did the job for me as well. I'm using one of the HubSpot stock css (vast-style.css).

 

This is where I updated it and it centered my featured image on my blog listing. Sharing the details below in case you need it.

 

/* Post Featured Image on Listings Page */
.hs-featured-image-wrapper { text-align: center;}
.hs-featured-image-wrapper .hs-featured-image-link { display: block; }
.hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image{
border-width: 0;
max-height: 300px;
max-width: 100%;
display: inline-block !important;
float: none!important;
margin: 10px 0px 10px 0px;
}

0 Upvotes
Avi25
Contributor

A Mystery in Blog Listing template - featured image sizes

SOLVE

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.

 

 

Avi25
Contributor

A Mystery in Blog Listing template - featured image sizes

SOLVE

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?

0 Upvotes