Morning guys,

 

as I'm slowly making progress migrating my content to WordPress I've noticed a curious (read: annoying) "feature" whereby images are resized when captions are used. For example, I have an image that's 501x369 that I've inserted into an article. Without a caption it displays at full size. When I add a caption, however, WP makes the caption 501 wide and therefore resizes the image. In the code I see:

 

[caption id=attachment_4298" align="alignleft" width="501]<img class="size-full wp-image-4298" src="http://www.wildlifeonline.me.uk/wlol_wordpress/wp-content/uploads/2017/10/sarcoptes_mite_scraping.jpg" alt="Sarcoptes scabei mite." width="501" height="369" /> <span style="color: #0000ff;">Scabies mite (<i>Sarcoptes scabiei</i>) in skin scraping.</span>[/caption]

 

If I try manually increasing the caption width, WP simply puts it back to 501. I can't find any obvious way of changing this in the "Add Media" settings, so I presume this is managed somewhere else.

Any thoughts?

 

Cheers,
Marc.

Wordpress doesn't change the size of anyrthing. If things change then it's your theme you need to investigate. And it's probably not helped by all the markup in the caption itself, you should really use the .wp-caption class in your CSS rather than add the span and colour.

Thanks Graham. I did wonder if it was the theme again. I've been through all the settings in the wp-admin console and there's no option to edit the CSS that I can see, so presumably that's not an option in this particular theme. I can see Appearance > Custom CSS, but this will presumably cause a conflict if I add the code here and it's already mentioned somewhere behind the scenes too? The size issue happens with or without the span, but it would be handy if I could set this centrally so I didn't have to change it each time.

 

For the time being, I'll just leave the caption formatting empty and carry on with the content. I'll then look at updating the theme and CSS.

​Cheers,
Marc.

You should have Appearance > Editor. This will give you access to the theme files (but I wouldn't advise editing from your dashboard)

 

Try switching to another theme and see what happens.

Thanks. As you point out, the editor is there and the caption section shows:

 

.wp-caption {

-webkit-border-radius: 3px;

border-radius: 3px;

border-width: 1px;

border-style: solid;

padding: 20px 20px 0;

margin-bottom: 20px;

 

Is there anything in there that might explain the theme's behaviour?

 

Presumably I should find a back-up widget and back the existing content up before I switch themes?

Edited October 17, 20178 yr by mbaldw

No need to back anythng up. Switching themes doesn't erase any data or settings. All you usually have to do is set the menus and widgets.

 

Or just install the theme and use the preview option. This will let you test the settings and view the site in desktop, tablet and phone modes.

Thanks Graham. I went for the quicker option of installing and previewing a couple of themes, but it didn't really work. When I preview all I get is the home page with a "fatal error" code (presumably because of the menus/widgets). The main link at the top works, but despite implying that it's previewing in the chosen theme seems to re-load the site in the existing theme - the page looks identical to the current theme (including the menus), so I suspect it isn't previewing properly. I will try installing a theme when I get home, but need to spend some time working out how the menus are configured (the web designer did that when she set the current theme up) to ensure I can reconfigure them after the install.

Out of interest, forgive my perpetual ignorance, but if the [caption] tag in the code sets the caption width at 501 and the image width at 501 (as in the example above), isn't it going to display the same in any theme? Or does changing the theme re-write the code on all the pages to account for the padding when displaying the caption? The full caption section of the CSS shows:

/***************** Caption ******************/

.cmsms_img {

display: inline-block;

max-width: 100%;

}

.cmsms_img.cmsms_image_l {

float: left;

margin-right: 20px;

}

.cmsms_img.cmsms_image_r {

float: right;

margin-left: 20px;

}

.cmsms_img.with_caption {

padding: 20px 20px 0 20px;

border-width: 1px;

border-style: solid;

-webkit-border-radius: 3px;

border-radius: 3px;

}

.cmsms_img .cmsms_img_caption {

text-align: center;

padding: 15px 0;

font-size: 14px;

line-height: 20px;

}

.aligncenter {

text-align: center;

}

.wp-caption {

-webkit-border-radius: 3px;

border-radius: 3px;

border-width: 1px;

border-style: solid;

padding: 20px 20px 0;

margin-bottom: 20px;

}

.wp-caption.aligncenter {

margin-left: auto;

margin-right: auto;

}

.wp-caption.alignleft {

margin-right: 20px;

}

.wp-caption.alignright {

margin-left: 20px;

}

.wp-caption a {

display: block;

}

.wp-caption .wp-caption-text {

padding: 15px 0;

text-align: center;

}

If we assume 20px padding is being added to the image, I would've thought the caption width should be set at 550 to accommodate 20 either side of an image that's 510 wide. Or doesn't it work like that?

Cheers,
Marc.

I recently fixed the same issue on our website at the company I work at. It was one of the functions in the function file that I amended, drop me a pm next week if you still need help and I'll dig out my solution.