Captions not working in Joomla 3
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
As a start you can add this to your cutsom css.
figure {
display: table;
}
figure.pull-center,
img.pull-center {
margin-left: auto;
margin-right: auto;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
I suggest to update Gantry to 4.1.26 wich has several fixed for blog items.
So please try updating things first. If that doesnt help I will set up a ticket in our bug tracker. -
The following users have thanked you: Laurie McArthur
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
OK! Thanks Henning!
That's fixed it. What a pleasure it was to roll out of bed this morning to find the solution to my life's current biggest problem had arrived overnight.
The float left and float right are also not working. Also the Caption Class: text-left, text-center and text-right are not working. Would you please give me the css for these too.
With these six fixed I'll be on track for success with my journalist.
Maybe these could be added in the next Gantry update.
Thanks,
Laurie.
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
G'day again Henning!
I figured out the rest of the css code from what you gave me and all is working as expected. Here it is for the benefit of others:
/* Fix captions */
figure {
display: table;
}
figure.pull-center, img.pull-center {
margin-left: auto;
margin-right: auto;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
figure.pull-left,
img.pull-left {
float: left;
}
figure.pull-right,
img.pull-right {
float: right;
}
img.pull-left {
margin-right: 10px;
}
img.pull-right {
margin-left: 10px;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
/* End fix captions */
Thanks again so much!
Regards,
Laurie. - Last Edit: 10 years 2 days ago by Laurie McArthur.
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
G'day Henning!
I spoke just a little too soon. One more problem:
The images with no caption are responsive as they should be but the caption images are not responsive.
Would this be another css issue?
Thanks,
Laurie.
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
Bump
Hi there People!
I'm getting desparate for the solution to the non-responsive nature of the caption images. Is there a solution please?
Would the code given earlier in this post have any bearing on this? <?php JHtml::_('behavior.caption'); ?>
Thanks,
Laurie.
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
OK. Thanks Henning.
Who gets to see the Secure stuff?
I'd be skun alive if the public saw the site at this stage.
Thanks,
Laurie.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
see
www.rockettheme.com/docs/technical_tips/...using-the-secure-tab
only you and the mods can see what is in that "secure"-tab (hence the name
)
- Last Edit: 9 years 11 months ago by Henning.
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
Thanks Henning!
I'm getting in a real tizz here. I have so many versions od this site plus bit's and pices on test sites that I'm getting confused.
I was just now setting it up in a test site that can be public. I found there's more wrong than just the responsiveness. The centering of the non-caption image doesn't work. May need to use text-align: center;
I'll get it set up in the test site. It's 8.30pm in Eastern Australia. I don't know how it sits with you but I'd be real greatful if I could get to the bottom of this before I fall asleep tonight. I don't care how late that is.
I'll be back!
Thanks,
Laurie.
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
OK Henning! Hope you're still out there. Thanks for the quick responses.
Here's my test URL: joomatetest.net/photostory-3/blog/62-apples
I see from Firebug that some of my css overrides the same in bootstrap and master css files so that likely wasn't needed.
So what works and what doesn't?
Firefox
The non-caption image, center, doesn't center. I suspect it needs text-align: center rather than margin-left: auto; margin-right: auto;
The three caption images are not responsive. At least that's how it looks when I squish the FF browser down narrow.
Chrome
The non-caption image, center, doesn't center.
The three caption images are all responsive. But the float left and float right images are squished down smaller than they should be. I haven't looked in the Chrome Developer tools to see why as yet.
Internet Explorer
The non-caption image, center, doesn't center.
The three non-caption images are all responsive. EDIT this line. Sorry.
The three caption images are not responsive.
I hope that all makes sense.
Thanks,
Laurie. - Last Edit: 9 years 11 months ago by Laurie McArthur.
-
Time to create page: 0.060 seconds