Two different styles for [caption]
-
I’d like to have two different styles for caption.
One being the default wp-caption, for example to be used for own screenshots. Images should have a border, caption text centered for some description of the picture.
Second a custom style, say credits-caption, used for displaying the credits to images (source but no description needed). Text to be aligned on the right bottom of the image, no border, smaller font.
I have been looking for hours in the Internet to find a solution, but in vain. Thank you for your help!
-
It’s a request that comes up, a lack of being able to style
wp-caption-text
more specifically for image A vs image B.Try this manual solution: Add images to your posts via the visual editor. Then switch to the HTML view and locate the inserted image that you want to have the different styled caption and add a CSS class to that image.
On my Crash Test Dummy installation I added the class
credits-caption
.[caption id="attachment_4440" align="aligncenter" width="199" caption="More text."]<a href="http://wordpress-url/wp-content/uploads/2012/03/29850001.jpg"><img class="size-medium wp-image-4440" title="29850001" src="http://wordpress-url/wp-content/uploads/2012/03/29850001-199x300.jpg" alt="" width="199" height="300" /></a>[/caption]
becomes
[caption id="attachment_4440" align="aligncenter" width="199" caption="More text."]<a href="http://wordpress-url/wp-content/uploads/2012/03/29850001.jpg"><img class="size-medium wp-image-4440 credits-caption" title="29850001" src="http://wordpress-url/wp-content/uploads/2012/03/29850001-199x300.jpg" alt="" width="199" height="300" /></a>[/caption]
With a little CSS in your child theme, that additional
credits-caption
class should let you style that anyway you’d like.Thank you for your reply and I probably better place my codes here. Unfortunately I’m not an experienced programmer, but I’m trying.
Here the CSS in which I have already included a credits-caption coding as I think it may be right.
.wp-caption { background:#F7F7F7; text-align:center; padding:4px 0px 5px 0px; border:1px solid #e6e6e6; } .wp-caption img { margin:0px 0px 5px 0px; padding:0px; border:0px; } .wp-caption p.wp-caption-text { margin:0px; padding:0px; font-size:11px; font-weight:normal; line-height:12px; } .credits-caption { background:#F7F7F7; text-align:right; padding:2px 0px 5px 0px; border:none; } .credits-caption img { margin:0px 0px 5px 0px; padding:0px; border:0px; } .credits-caption p.wp-caption-text { margin:0px; padding:0px; font-size:8px; font-weight:italic; line-height:10px; }
This is the image file produced by WordPress when inserting an image:
[caption id="attachment_1079" align="alignright" width="200" caption="by Jason Stitt (<a href='http://www.shutterstock.com/pic.mhtml?id=17170573' target='_blank' rel='nofollow'>Shutterstock</a>)"]<img src="http://www.soccerwidow.com/wp-content/uploads/2012/04/shutterstock_17170573-200x300.jpg" alt="" title="Sexy soccer referee" width="200" height="300" class="size-medium wp-image-1079 " />[/caption]
I added the class=”credits-caption” in img as advised. Here the code:
[caption id="attachment_1079" align="alignright" width="200" caption="by Jason Stitt (<a href='http://www.shutterstock.com/pic.mhtml?id=17170573' target='_blank' rel='nofollow'>Shutterstock</a>)"]<img class="credits-caption" src="http://www.soccerwidow.com/wp-content/uploads/2012/04/shutterstock_17170573-200x300.jpg" alt="" title="Sexy soccer referee" width="200" height="300" class="size-medium wp-image-1079 credits-caption" />[/caption]
However, no changes happen on the screen. Thanks for further advice 🙂
Ah, I see what I did wrong. The class is applied to the
img
tag but to get it working correctly, should be applied to the div withid="attachment_1079"
.That is, I think that’s it. My CSS is very poor. 😉
Shortcode work, that sounds interesting… there’s probably an easier way to do it but later on when it’s raining I’ll play with
add_filter()
and/oradd_shortcode()
and see if I can come up with a solution.Did as advised:
[caption id="attachment_1079 credits-caption" align="alignright" width="200" caption="by Jason Stitt (<a href='http://www.shutterstock.com/pic.mhtml?id=17170573' target='_blank' rel='nofollow'>Shutterstock</a>)"]<img class="credits-caption" src="http://www.soccerwidow.com/wp-content/uploads/2012/04/shutterstock_17170573-200x300.jpg" alt="" title="Sexy soccer referee" width="200" height="300" class="size-medium wp-image-1079" />[/caption]
Still not working 🙁
Yes, I know. That’s not what I was advising.
The class needs to be put into the output of the
caption
shortcode. That needs a filter or a new shortcode handler.Adding it that way won’t work (as you’ve found out) and just as an exercise I want to play with the code as a plugin. Which also means I may not find a solution at all. 😉
But I haven’t tried yet and there may already be a plugin available that does what you want.
Okay, this works but it’s an inelegant hack.
I tried to add another attribute to the
[caption]
shortcode but when I switched to the Visual Editor my new attribute was munged into the caption.So after reading Justin Tadlock’s post I made this plugin instead.
Download that to your PC as
caption-class.php
(change the name fromcaption-class.php.txt
and remove the.txt
) and upload that via FTP or whatever tools yourwp-content/plugins
directory.Activate the new plugin
Add credit-class to image captions
.Now in the visual editor select an image with a caption and add this text to the caption.
:credits-caption:
It doesn’t matter if you add that to the start or end. With the plugin active that text will not be displayed.
What will happen is that this plugin will output the additional CSS class
credits-caption
right afterclass="wp-caption
and that will let you style that image caption differently.Perfect solution, Jan! I wanted to do the exact same thing and now with your coding skills, I can! Thanks again!
- The topic ‘Two different styles for [caption]’ is closed to new replies.