Blog post feature images automatic re-size (venture theme)

Highlighted
New Member
4 0 0

Hi, couldn't find it anywhere else: I have Venture theme and my featured images in blog are too big. I need them to be automatically smaller - something like 600px perhaps and the text in excerpt NEXT to the image.

So far I managed just to to things halfway manually, so I can change every image (delete featured one and add resized image in the excerpt), but it still shows only first line next to the image, not the whole paragraph.

Any ideas, please? Coding's ok - I just need to know the code line and where to place it.

0 Likes
Highlighted
Tourist
7 1 1

After a lot of research I found a possible solution: (before do this always backup your code!)

  1. Go to your theme editor -> Edit Code
  2. Find theme.scss.liquid in Assets folder
  3. Go around line 6314 and change this piece of code
    /*================ Blog ================*/
    .article__photo-container {
      position: relative;
    }
    with this
    /*================ Blog ================*/
    .article__photo-container {
      position: relative;
      width: 50%;
    }
    This will resize your image to half of its size (you can change the percentage that fits best for you)
  4. After this you have to center the image, otherwise it will stick on the left:
    change the line (below of what you just edit) from this
    .article__photo-wrapper {
      img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
      }
    to this
    .article__photo-wrapper {
      img {
        position: absolute;
        top: 0;
        left: 50%;
        right: 0;
        width: 100%;
      }
  5. Hit save.

Now you have your image centered and resized

 

NOTE: This will also resize the images of your posts, to solve this problem, please follow what I post here:

https://community.shopify.com/c/Shopify-Design/Venture-Change-the-size-of-the-blogs-post-s-pictures/...

 

Hope this help :)

1 Like
Highlighted
Tourist
12 0 0

Great work, Harry.

 

This is as close as I could get my code to yours without the images disappearing or taking up the whole screen. 

 

Would you have any idea how to remove this large gap?

 

Untitled.jpg

0 Likes
Highlighted
Tourist
12 0 0

I get the same result simplifying down to just:

 

.article__featured-image {
position: relative;
width: 33%;
}

.article__featured-image-wrapper {
position: relative;
width: 100%;
}

0 Likes
Highlighted
Tourist
12 0 0

All fixed.

 

For those playing at home:

 

I changed -

<div class="article__featured-image-wrapper" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">

 

to this in blod.liquid and featured blog.liquid:

 

<div class="article__featured-image-wrapper" style="padding-top:2em">

0 Likes