[creatorofstuffParticipant]

Hi –
I’m working on converting my old site to one using X. I’m editing the old posts with Cornerstone (which means re-doing the content). I’ve run into 2 snags.

1. Sorry to add to the multiple posts on this topic, but I’m not having any success adding captions to my images in my blog posts, even after reading some of the posts on the forum. Here is a link to a post on my old site. https://sassypantsdesign.com/12689-2/ If you look at the images in the body of the post, do you see those captions? I’d like to have something like that in order to give Creative Commons credit, as I notice many others do as well.

Any advice? I tried the WordPress [caption] <img ….. without success. And a few other things. 🙁

2. Regarding inline code – referring to the same post above, some of the lines throughout the post are a custom class. However, I cannot make it work in the customizer (text mode) when I add an inline class to a section of text. It only works if I add inline style. But for obvious reasons, I would prefer it to be a class, since I have not settled upon a final look, and editing would be easier with a class. The class in my child css file is:

.blog-highlight {color: #e36a5c; font-size: 1.5em;}

This works in the post:
<span style=”color: #e36a5c; font-size: 1.5em;”>Dogs will do almost anything for you if you make it worth their while.</span>

This does not:
<span class=”blog-highlight”>Dogs will do almost anything for you if you make it worth their while.</span>

Any suggestions? Am I missing something?

Thanks!

[John EzraMember]

Hi there,

Thanks for writing in! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[creatorofstuffParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Thank you for the credentials,

1. You can use this code instead of inline CSS:

.blog-highlight {
   color: #e36a5c !important;
   font-size: 1.5em !important;
}

2. For the image caption, please see this article: https://codex.wordpress.org/Caption_Shortcode or follow this tutorial http://www.wpbeginner.com/beginners-guide/how-to-add-caption-to-images-in-wordpress/

Hope this helps!

[creatorofstuffParticipant]

Hi!

1. Excellent. Thank you very much! That did the trick. I should have thought to try that.

2. Thanks, but unfortunately I had already done both of the suggestions in the links you provided without success. I wasn’t sure if I did the shortcode correctly or not, but I copied the code from the post and changed the relevant info for my site. My image shows up but no caption. (I’m including a screenshot of which image I am referring to.) I also had already filled in the “caption” field in the media library for that image, which is what the wpbeginner tutorial says to do. But still there is no caption. I’m baffled. (My old themes had options for this so I realize I never had to do it by hand before. I’m thinking this might be a nice option to add to X.)

Any further advice? Thanks!

[John EzraMember]

Hi there,

Thanks for updating the thread! It seems you forgot to include your screenshot. Would you mind pointing us to the page you are working on and the image so we can take a look. The regular WordPress caption function should work as is with X. We’ll need to check specifically why it may not be working on your site. Please let us know the relevant links so we can check – thanks!

[creatorofstuffParticipant]

Oh geez, I’m sorry. 🙁

It’s this post: http://test1.sassypantsdesign.com/12689-2/

I’m attaching a screenshot of the image in the media library so you can see the caption. Perhaps you aren’t allowed to put code in there? (But the purpose is for attribution.)

Thanks again!

[John EzraMember]

Hi there,

Thanks for updating the thread! Upon checking your code in the caption, the code is broken. I corrected it and tested on my local setup and it works. Please replace your caption with the following:

Even that bully stick wasn’t enough for this. What was I thinking? (Photo by mccun934) <a href="http://wpinject.com/" title="Image inserted by the ImageInject WordPress plugin">Photo</a> by <a href="http://www.flickr.com/photos/51035597937@N01/2989867199" target="_blank">mccun934</a> <a rel="nofollow" href="http://creativecommons.org/licenses/by/2.0/" target="_blank" title="Attribution License"><img src="https://sassypantsdesign.com/wp-content/plugins/wp-inject/images/cc.png" /></a>

Hope this helps – thanks!

[creatorofstuffParticipant]

Hi thank you for the help.

I’m not sure what I’m doing wrong, but can I clarify something? Are you telling me to insert the above code in the caption field of the media library? If so, I have done that but it seems to have no effect. ?? (I copy and pasted it from your message above.)

I also tried putting it between the [caption] …. [/caption] inline code in case that’s what you meant, and that added a little copyright symbol in place of the image. Sigh.

Getting close but still feeling clueless. Sorry! 🙁

[RadModerator]

Hi there,

You will have to re-insert the image, it’s not working because it only contains [ caption][ /caption].

It’s supposed to be [ caption id="attachment_ID-HERE" align="alignnone" width="300"][ /caption].

Please re-insert your media image with caption in it.

I went ahead and inserted it as test.

Thanks.

[creatorofstuffParticipant]

Ugh, I messed things up.

I was so excited to see what you did – it’s exactly what I’m looking for. BUT, the image was suddenly pretty tiny (200×300) instead of 330×500. So I tried to edit all of the sizes within the image insertion. In doing so, I had no idea where the class declaration came from but since it seemed to refer to a small version of the image, I deleted it. Well, that got rid of the image. 🙁 Now I can’t figure out where to find that for the larger image. For any image, actually. I’m really confused.

Sorry, but can you tell me step by step how you do this? Do you type in everything by hand starting with [caption…]? It all seems super cumbersome. There must be an easier way?

I really appreciate the help. Sorry to be so thick.

[RadModerator]

Hi there,

Sure, here is a video 🙂

Please use firefox when playing this video (if you’re on windows).

Cheers!

[creatorofstuffParticipant]

That was super helpful! I can’t thank you enough. 🙂 🙂 🙂

[Nabeel AModerator]

Glad we could help 🙂

Cheers!

[Author]

Posts