Colorblock theme > collage > set image focal point?

Store Design
1

Apparently, the theme doesn’t have an option for setting an image’s focal point. The primary image I need to use has a wider width than height, and the focus is on the right side of the image, but the theme appears to enlarge (to fill the box) from the center of the image.

Any tips on how to how to make the focal point something different than the center of the image?

Thank you.

2

Hi @fencetalk ,

Please share your store URL and password of front view. Can you tell us the position of image you want to change?

So that I will check and let you know the exact solution here.

Best regards.

3

Hello and thank you for helping. The store URL is https://yourhealthhelpers.myshopify.com/ The issue is the large collage image (i.e., left image). @Halothemes the store password is messaged to you.

4

Hi @fencetalk ,

You can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Asset → /base.css paste code below into end of the file.
.collage__item.collage__item--image.collage__item--left {
    height: inherit !important;
}
.collage-card.color-accent-2 {
    height: inherit !important;
}
.collage-card.color-accent-2 img {
    object-fit: contain !important;
}

Or you can use images with the exactly recommended size 750x750px.

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.

5

Hi @fencetalk ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
.collage__item.collage__item--image.collage__item--left {
    height: inherit !important;
}
.collage-card.color-accent-2 {
    height: inherit !important;
}
.collage-card.color-accent-2 img {
    object-fit: contain !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

6

I see what the code does, but it solves one problem and creates another. Your solution forces the block to show the entire image, but now the other collage blocks don’t form a complete square collage; the primary image in question now has a shorter height.

The goal is to keep the block’s dimensions but zoom the image at a different focal point than the center of the image.