Image captions not automatically confined to image width

For Joomla! 4.x Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general

Moderator: ooffick

Forum rules
Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.
Post Reply
twhite
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Fri Dec 15, 2006 6:25 pm

Image captions not automatically confined to image width

Post by twhite » Thu Dec 02, 2021 10:44 am

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?

User avatar
ceford
Joomla! Explorer
Joomla! Explorer
Posts: 414
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Image captions not automatically confined to image width

Post by ceford » Thu Dec 02, 2021 5:52 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Fri Dec 15, 2006 6:25 pm

Re: Image captions not automatically confined to image width

Post by twhite » Fri Dec 03, 2021 10:12 am

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;}

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 612
Joined: Tue Jun 30, 2020 12:17 pm

Re: Image captions not automatically confined to image width

Post by Pavel-ww » Fri Dec 03, 2021 11:05 am

twhite wrote:
Fri Dec 03, 2021 10:12 am
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
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Fri Dec 15, 2006 6:25 pm

Re: Image captions not automatically confined to image width

Post by twhite » Fri Dec 03, 2021 11:50 am

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.


Post Reply

Return to “Joomla! 4.x Coding”