(Venture) Change the size of the blogs post's pictures

Jordan6
New Member
41 0 0

Hey, i want to reduce the size of the pictures of each blog's post, is it possible ?

Replies 7 (7)
Jordan6
New Member
41 0 0

Is it not possible ?

Charles_Fraune
Tourist
3 0 1

Any help on this?  I have the same problem.

Thanks

HarrySully
Tourist
7 1 1

After some research I solved this problem like this:

  1. Go to your theme editor -> Edit Code
  2. Find article-content.liquid in Sections folder
  3. Near line 26 you will find: 
    {% if article.image %}
    <div class="content-block__full-image content-block__full-image--large">
    <noscript>
    {{ article | img_url: '1024x1024' | img_tag: article.title | escape }}
    </noscript>
    <div class="article__photo-container">
    <div class="article__photo-wrapper" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
    {% assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
    <img class="lazyload"
    src="{{ article.image | img_url: '300x300' }}"
    data-src="{{ img_url }}"
    data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
    data-aspectratio="{{ article.image.aspect_ratio }}"
    data-sizes="auto"
    alt="{{ article.title | escape }}">
    </div>
    </div>
    </div>
    {% endif %}
  4. Comment this line of code and you remove the image from the blog posts
  5. Hit save

Now you don't have image post and you can manage it manually while you write your blog (just add your image from post body).

 

It's spartan as a solution but it works.

 

Also if you want to manage manually the title as well comment this line too

<h1 class="h2">{{ article.title }}</h1>

Hope it helps :)

JonsieEver
New Member
2 0 1

 

you can keep the picture at the top by adjusting the 2 lines of code under if article.image as below:

 

{% if article.image %}
{%- assign width = 'small--one-whole medium-up--one-third' -%}
<div class="content-block__full-image content-block__full-image--large {{width}}" style="padding-left: 40px;">

you can also do a similar thing in blog.liquid to reduce the size of the Featured Image

 

{% if article.image %}
{%- assign width = 'small--one-whole medium-up--one-third' -%}
<div class="content-block__full-image content-block__full-image--large {{width}}" style="padding-left: 40px;">

 

Flash_king24
New Member
2 0 0

Okay, I’m currently reading this now, I have article-content.liquid open and trying to match the information that I’m receiving from you guys. 

It’s not adding, if possible, could one of you guy’s break it down a bit more? 

FlorianHeesen
Tourist
10 0 1

Thanks ! this worked for me. 

SimbaLyon
New Member
1 0 0

Very helpful guys, but how do i do it on the level before, let me elaborate. 

this removed the image from the actual blog post. 

I want to remove/resize the image from the list of blog posts. 

 

So when I set navigation/menus to show all blog posts, I want the images to be smaller, to create a list.

 

If it helps:

https://didcotboxingacademy.uk/blogs/committee