Changing Image Size on Homepage

Highlighted
Tourist
11 0 1

Hello everyone,
Just a quick question:

I am using Brooklyn theme for my Shopify store and I would like to resize an image I've added to my homepage through the Shopify online store editor. There is no resizing option there and I can't seem to locate it anywhere on the code.

Can anyone help me with locating? Which liquid should I look for?

0 Likes
Highlighted
Shopify Partner
1838 174 630

Hello!

 

That would depend on where you added that image i.e. what section?

I turn coffee in to code - since 1998
1 Like
Highlighted
Tourist
11 0 1

Well since I guess 'Homepage' isn't the answer, I'll need you to guide me so that I can tell you :D

I don't know much about html build, I just know some basic editing and have super advanced google skills

0 Likes
Highlighted
Shopify Partner
1838 174 630

Okay, no problem.

 

So on the homepage of Brooklyn theme you usually have a big slider with images - the hero image slider so to say.In your theme editor you'd customise it by

 

wjQFHuB

 

And adding a new slide image

v40zgQU

 

Which would then appear here instead of the grey placeholder image from my screenshot

dCrWM8A

 

Is that the one?

I turn coffee in to code - since 1998
0 Likes
Highlighted
Tourist
11 0 1

Oh, no no.
It is an image unrelated to the slider which I added to the homepage.
I now think I understand your question and it was added through: add section - Image with text

0 Likes
Highlighted
Shopify Partner
1838 174 630

Okay, I know which one you mean now. So what is the issue with the size?

 

While you cannot directly manipulate the size of the image once selected for the section, the section does resize it automatically for you - by using a flex box layout and by using lazysizes script.

 

Of course, neither of those can compensate for major adjustments such as an images aspect ratio e.g. is it a portrait or landscape and if you upload a portrait, you won't be able to crop it into a landscape without doing so in an image editing application and uploading that cropped image for use in that section.

 

The same goes for focal points. What you upload and select is what you'll see there. The resizing depending on available size in the layout and view of screen will be handled for you - aspect ratio, cropping, focal points etc. are up to you before you upload the image.

 

Let me know if you had something different in mind and just had to endure me going off on an epic rant about nothing ;-)

I turn coffee in to code - since 1998
0 Likes
Highlighted
Tourist
11 0 1

Haha as long as you enjoyed it :P

Well, I simply want to make the image smaller for aesthetic reasons. It displays fine and is now at 405x405px.
I don't go asking for coders help doing it because I want to learn how to do it myself and because I am not sure on what exact size I would like it to be and want to check it with my own eyes.

0 Likes
Highlighted
Shopify Partner
1838 174 630

Sure, I can totally understand that and appreciate anyone's curiosity to learn and understand.

 

So to explain how you control the size of the image in that particular section without being able to explicitly set the image size, let's first have a look at how it is being displayed with HTML and CSS.

 

IUD0SIe

 

So we have a flex container (the highlighted element in the code window) and 2 flex items (the 2 <div /> elements within). The container <div /> is set to have a CSS display property of flex which instructs the container to layout its items using the flexbox model. The items, or flex items, have CSS flex shorthand properties like

 

.feature-row__item {
  flex: 0 1 50%;
}

That is shorthand for 

 

.feature-row__item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 50%;
}

Now what does all that shrink, grow and basis mean with those values? Well the basis defines the initial size of a flexbox item - in our case 50% which is why the image and text boxes are 50/50 as you can see by from the purple layout guides above. This could also be a fixed value such as 250px. Grow and shrink define how much an item should grow or shrink respectively if there is any additional space available in the container. In our case we are telling both items that they can take up 50% available space at most but they can shrink to be less than 50% wide. As both are set equal, it's the same as saying you guys are always going to be 50/50.

 

So what would happen if we wanted that "ratio" to change? We could allow one of the flex items to have a larger base size. Since we cannot identify the image container uniquely (it shares the same class name with the text container) we will do it on the text items container that has some extra classes like

 

.feature-row__text {
  flex-basis: 70%;
}

And we end up with 

 

J67XMkf

 

That's because now we are overriding the base from one class in another that's more specific. We are also telling the text item to start with a flex base of 70%. Because the other item in the flex container (the one with the image) is only allowed to shrink) it yields and does in deed shrink to its remaining 30% of space.

 

And that's how you can control the size of your image ;-)

 

Of course, you can apply these style overrides in the Assets / theme.scss.liquid file, or inline on the <div /> element in question within the section template for that section which is in Sections / featured-row.liquid or you could even extend it to make it configurable via the theme editor.

 

Hope this helps!

I turn coffee in to code - since 1998
3 Likes
Highlighted
New Member
5 0 0

This is helpful. I am trying to do something similar for the section titled "image with text overly". I thought I followed your edit okay, but I received an error when I tried to save it down. Do I have to do anything different to reduce the size of my image for this section? 

0 Likes