Topic: Problem to set height/border-radius for picture tag

ben2944
March 15, 2024 at 12:07 am

Hello,

I have a problem when I want to set a height for the image on a content template : in frontend, only the first image is OK, the others one does not take the height I’ve set

I’ve already use this and it worked well, so I think I have a bad setting somewhere but I don’t find it.

(In the link I provide, you will see a custom CSS for the image’s height : this is to have the height I want. But my problem is when I don’t insert this CSS code)

May you help me, please ?

Have a nice day !
Alvind
March 15, 2024 at 12:54 am

Hi there,

I checked your site, and the images appear to have consistent heights. Could you provide more details on how you expect the design to appear?
ben2944
March 15, 2024 at 1:44 am
Hi, thanks for your reply.

Indeed, images have a consistent heights and that is that I wish but they have this height because I add this custom CSS :
```
@media (min-width:789px){
.site-main .gb-block-image img{
	height:250px;
}
}
```
Usually I just have to set an height in the block editor and it’s ok. But on this particular site, when I do like this, in frontend, the height is set to “auto”.

And I don’t find where I made a mistake…
David
March 15, 2024 at 3:28 am
Hi there,

you have an image optimizer which is converting the img to a picture
And that conversion breaks the HTML/CSS classes that GB generates.

Some style issues can be resolved by setting the picture to display block with this CSS:
```
picture {
    display: block;
}
```
ben2944
March 15, 2024 at 4:52 am

Hi

Ah ok, this is Imagify, thanks for this information. Do you advise to not use this conversion of the plugin ?
David
March 15, 2024 at 5:47 am

You can use it, it just many require the above CSS or other custom CSS to fix things it may break.
Any plugin that does the same type of conversion ie. using picture, will have the same result.
ben2944
March 15, 2024 at 8:13 am

Ok, thanks a lot for your explanations. Have a nice week-end !
David
March 16, 2024 at 5:02 am

You’re welcome – you too!
ben2944
April 26, 2024 at 9:06 am

Hi David,

I re-open this ticket because I have again the same problem. And this time, if I add the css code you provided last time, it does not work and break some design.

It’s again the “picture” balises from Imagify which do that.

This time this is for example the border radius that does not work anymore or hover effect.

Is there a way to make it work ?
Ying
April 26, 2024 at 12:23 pm

Usually, the border-radius needs to be added to the img tag nested in the picture tag, rather than to the picture tag itself.

For this kind of issue, you will need to create a global style (the new global style) to target the img tag in the picture.

1. create a new global style, start with blank, entre a class for it, eg. picture-image.

2. click the more button beside more/hover, click +NEW button, add img to the field.
https://app.screencast.com/FRfLMdG9U4tFt

3. set the border-radius style for this global style, then apply this global style to the image blocks.

Let me know if anything is unclear 🙂
ben2944
April 28, 2024 at 5:07 am

Hi Ying, thanks for the information, it’s clear 🙂

But my problme seems more “global” : when I’m using the <picture>’s option tag from Imagify, there are several design’s and effects’ issues after that.

For example, there is also the “effect” option. Normally on this site, when I hover the article’s image (at te bottom, after the content) the image upscale a little.

All those effects are not working anymore.

And when I add the previously provided CSS code
‘picture {
display: block;
}’

it breaks some design (for example, on the same block after the main content, title of articles are on the image)

Do you think I can’t use <picture> tag ?
Ying
April 28, 2024 at 4:31 pm

it breaks some design (for example, on the same block after the main content, title of articles are on the image)

sorry, where can I see the issue?
ben2944
April 30, 2024 at 4:44 am

Hi Ying,

Thanks for your reply. I send you a screenshot and an example page for showing you 🙂

Ying

April 30, 2024 at 10:31 am

Can you try this CSS instead?

picture {
    display: flex;
}

picture img {
    object-fit: cover;
}

ben2944
May 1, 2024 at 10:54 pm

Hi Ying,

Thanks a lot it works perfectly 🙂
Ying
May 2, 2024 at 8:18 am

Glad to hear that 🙂

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Problem to set height/border-radius for picture tag