Image captions not automatically confined to image width

[twhite]

I have a J 3.10 site that I would like to upgrade to J 4.0.
I made a copy of the site on my localhost to experiment with. Main issue is that all my 1700 + articles use the "intro image" field and the "full article" image fields listed under "Images and Links" tab in article editor.

When displaying the article on J3.10, the "full image" caption to the article has a width set by joomla so the caption is same width as the image. This width insertion is automatic by joomla, independent of template used.

Code: Select all

<div class="pull-left item-image">
	<div class="img_caption none" style="float: none; width: 400px;">
		<img class="caption" title=" some title" src="/j3next/images/stories/lectures/annakutaam1.jpg" alt="Some text" itemprop="image">
		<p class="img_caption"> Some very long description of the image that goes on for a couple of lines.</p>
	</div>
</div>

In Joomla 4.0 there is no width set for the image captions and captions are not centered with the images. So it looks like this:

Code: Select all

<figure class="left item-image">
	<img src="/j4next/images/stories/lectures/annakutaam1.jpg" alt="Some text"  itemprop="image">
	<figcaption class="caption">  Some very long description of the image that goes on for a couple of lines.</figcaption>
</figure> 

Is there a easy solution to get J4 to layout captions in proper way as in J3?

[ceford]

If you compare the two with your browser developer tools you will see that J3 uses different css: figure {display:table;} and figcaption {display: table-caption;} You could add those styles to your J4 template user.css or perhaps add specific styles to suit your J4 requirements.

[twhite]

Thanks that did the trick. I am able to flow text around the pictures. I also had to do overrides to put the image below the title as in J3.

Here is what I ended up with:

Code: Select all

figure {
    display: table;
    figcaption{
        display: table-caption;
        caption-side: bottom;
        text-align: center;
    }
}
.item-pagelectures figure { float: left };
figure.none { margin-left: auto; margin-right:auto;}

[Pavel-ww]

Thanks that did the trick. I am able to flow text around the pictures. I also had to do overrides to put the image below the title as in J3.

Here is what I ended up with:

Code: Select all

figure {
    display: table;
    figcaption{
        display: table-caption;
        caption-side: bottom;
        text-align: center;
    }
}
.item-pagelectures figure { float: left };
figure.none { margin-left: auto; margin-right:auto;}

As far as I understand, you made edits in SCSS? It will be lost after the Joomla update. Use user.css file (if your template is Cassiopea) and main CSS sintax

[twhite]

I actually added the above CSS code to:

Code: Select all

templates/rt_elixir/custom/scss/custom.scss

I am using a rocket theme template. My overrides are in
templates/rt_elixir/html/com_content/article and featured.

thanks for the warning.