Change the size of an image with a caption

[mbbouvie]

Hello,

I need to reduce the size of an image with a caption.
Usually, I can change the size of an image by adding weight=“75%” high=“75%” in the source code. However, when I add a caption to the image, it takes automatically 100%, even if I change the source code.

Can anyone help?

E.g. here is the source code i would like to change: img alt=“Figure of CERN’s annual water consumption” data-caption="<em>CERN’s annual water consumption (the first LHC long shutdown began after 2012 and ended beginning of 2015) (Image: CERN)</em>" data-entity-type=“file” data-entity-uuid=“dda13032-0138-411a-9971-3c1f36b6aafb” src="/sites/test-voisins2.web.cern.ch/files/inline-images/Water%20consumption.png" /

Many thanks,

Marie

[ogomezal]

Hi @mbbouvie,

the HTML attributes width and height will most likely be overwritten by the CSS rules applied from the theme for images with caption.

You can try to add these properties as CSS properties instead, by using the style HTML attribute, like this:

<img 
    alt=“Figure of CERN’s annual water consumption” 
    data-caption="<em>CERN’s annual water consumption (the first LHC long shutdown began after 2012 and ended beginning of 2015) (Image: CERN)</em>" 
    data-entity-type=“file” 
    data-entity-uuid=“dda13032-0138-411a-9971-3c1f36b6aafb” 
    src="/sites/test-voisins2.web.cern.ch/files/inline-images/Water%20consumption.png" 
    style="width: 75%; height: 75%"
/>

By the way, please note that setting the height of an image explicitly along with the width might result in distorted images, since the aspect ratio might not be preserved.

You might want to assign just width: 75% and let the height adjust automatically

Regards,
Óscar

[mbbouvie]

Hello Oscar,

Thanks for your quick answer
I am absolutely not familiar with CSS so I don’t think it would be a good idea for me to overwrite the theme.

Is there an easy way for beginners?
Otherwise, I could still remove the caption and write it manually in small character below my image.

Cheers,

Marie

[ogomezal]

Hi @mbbouvie,

I see what you mean… if I understood correctly you don’t have any control over the HTML markup of this image, am I right?

In this case I am afraid you will need to add your caption separately, you are right.

But I was just checking your site and the images are not occupying all the width, at least inside the accordions. Do you have an example URL so I can check? Thanks!

Regards,
Óscar

[mbbouvie]

Hi Oscar,

Actually, I could make the images not occupy all the width by aligning them on the “left”.
It doesn’t always work. E.g. I am unable to reduce the site of the the figure in “How much ionising…” on https://test-voisins2.web.cern.ch/radiation.

Kind regards,

Marie

[ogomezal]

Hi @mbbouvie,

In the example of the page you linked, the image has that real, physical size in pixels, so it won’t go smaller than that. This is true at least for screens larger than the image. Let me explain:

The theme defines a maximum width, and a default width for images (both set to a 100%), but not a minimum one, so in this case the minimum width is the actual image size. In your case it’s 521 pixels wide.

In smaller screens the image will occupy the whole width since it cannot grow bigger than 100% of the available width, but in my opinion this is exactly what you want.

Am I missing something?

[mbbouvie]

Dear Oscar,
I have indeed tried to reduce the size of my picture for it to appear smaller in the page. Now it is 300 pixels wide but it still appears larger (and blurry of course).
Do you see what I mean?
Cheers,
Marie

[ogomezal]

Hi @mbbouvie,

I have the full explanation for this!

Let me try to explain… Here’s a screen capture of your page, when I disable the rule that forces the image to be 100% wide:

As you can see on the onset square on top-right, I am disabling the width: 100% !important rule for images inside figures (figure img selector).

What we can see is that immediately the image takes its original size (300×244) and everyone’s happy

On the other hand, when we don’t disable this rule and we tell it to be 100% wide, it extends just to the size I marked as 100% in green. So, not all the available space actually, right?

Why is this 100% not forcing the image to actually take all the width of the FAQ item it belongs to? Well, the answer is, the image takes 100% of the width of its immediate parent.

Let’s take a look at the markup for this figure, the image, and the caption:

<figure role="group" class="align-left">
  <img alt="figure" data-entity-type="file" data-entity-uuid="ded787cf-3d7d-4de7-b1d7-8d705d09af30" src="/sites/test-voisins2.web.cern.ch/files/inline-images/radiation_levels_0_0_0.jpg">
  <figcaption>
    <em>The typical annual dose from natural sources measured at several places near to and far from CERN sites.</em>
  </figcaption>
</figure>

Is it clearer now? Exactly! The figure tag is the immediate parent of the img tag, and it grows wide enough to accommodate for the figcaption element. See how suspiciously the 100% mark on the image coincides exactly with the end of the caption text?

Conclusion:

I wouldn’t say this is completely buggy behaviour since the intention is that images always take the maximum space possible without going outside of their container. But I would just remove the width: 100% !important rule from the CERN theme since it causes more harm than good. I might send a patch if I have time.

Also, using !important is pretty nasty because it makes it super difficult to patch these things in a CERN Override theme.

Workaround

For your use case I think your best bet is to make images wider than the caption to make sure you get the image’s width (figure will grow because of the image, not because of figcaption). If your actual image needs to be smaller, you can always edit the image to add a white or transparent padding.

Hope this explanation helps understanding a little bit better CSS and its quircks!

Regards,
Óscar

[mbbouvie]

Thank you for taking the time to give a full explanation!
I have added the padding to my image, it works great, thanks.
Have a nice day,
Marie