WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Why is there a long dash (looking character) appearing before the caption to a picture I just uploaded? It is not in the caption text box of the picture editor. Can't figure out why it is there and how to make it disappear. Any advice out there?
The blog I need help with is runnerontheright.wordpress.com.
The dash is part of the design of the theme you're using (to me, an unfortunate part). To make it disappear once for all you need the paid Custom Design upgrade. You can also make it disappear on an image-by-image basis by using complicated coding in the HTML editor; if you wish, I can show you. Or of course you can simply switch to a different theme.
If it isn't too complicated, I would love the explanation for the HTML coding solution. It is an unfortunate part of the design and I really do like the theme, so for now, I plan on keeping it. Thank you!
Remove this:
width="WWW" height="HHH"
and change this:
<img src=ETC ETC
to this:
<img style="width:WWWpx;height:HHHpx;" src=ETC ETC
Change this:
[/caption]
to this:
<p style="color:#666;font-family:Georgia;font-size:12px;margin:10px 7px 5px;">CAPTION HERE</p></div>
Change this:
[caption id="ETC ETC" align="alignleft" width="WWW" caption="CAPTION HERE"]
to this:
<div class="wp-caption alignleft" style="width:ZZZpx;">
ZZZ should be WWW+10. Alignleft is just for the sake of the example: might be alignleft, alignright, alignnone, aligncenter.
There's a less complicated way, but I can't tell you unless I know two things:
Q1) The image in your post "Runner: On the Right!" links to the original file when clicked. Is that intentional or not?
Q2) Can you downsize your images in an image editing application before uploading and inserting them? Doing so is good for other reasons as well - I'll explain once I know your reply to question 1.
Ok, that did seem a little over my head, you were right. I looked at the HTML code and it was a bit different than I expected (i.e. not finding the things you referenced for me to change), so I left it alone for the time being. I do think I'll be able to work on that method eventually.
As for the two questions:
1) It is not intentional. That was right from the upload file into post function. Did not know or think to do it any other way.
2) I re-sized the image considerably, I think, and re-uploaded it. How does it look now?
PS- Thanks so much for all this help- much appreciated!
"That did seem a little over my head". Even if it's not over your head, it's definitely not worth the trouble.
• In the HTML editor, the code of a captioned image is like this:
[caption id="attachment_ETC ETC ETC ETC />[/caption]
If you weren't seeing this, then you were looking at the code of a non-captioned image.
• When you're about to insert an image, you get three options as to what happens when a visitor clicks on it - see here:
http://wpbtips.wordpress.com/2009/04/26/images-the-three-link-options/
If you don't want the images to be clickable (as I hoped), you select None.
• In that case the best practice is to downsize copies of your images in an image editing application to a resolution of 72 (which is what all browsers display) and the pixel width you really want on the post,*** and upload and insert these copies in Full Size. This way you don't waste your storage space, your pages load faster, and you get better quality as well - see here:
http://wpbtips.wordpress.com/2010/01/16/image-quality/
*** For the theme you're using, maximum width is 585px for non captioned images, around 550 for captioned images.
• So, if you want non-clickable images, and if the files you upload are no wider than 550px, the no dash business can be made easier:
a) Upload and insert the image without typing a caption in the Caption field. Switch to HTML. The image code will look like this:
<img src="URL HERE" alt="" title="FILENAME HERE" width="WWW" height="HHH" class="alignleft size-full wp-image-1234" />
(1234 is an arbitrary example, of course: each image will have a different number.)
b) Replace that code with this:
<div class="wp-caption alignleft" style="width: MMMpx;"><img src="URL HERE" title="FILENAME HERE" class="size-full wp-image-1234" /><p style="color:#666;font-family:Georgia;font-size:12px;margin:10px 7px 5px;">TYPE YOUR CAPTION HERE</p></div>
MMM should be WWW+14.
The commands I've added simulate the default captions of the theme minus the dash. If you wish you can make further changes as well (make the caption centered instead of left aligned, or change the size and/or the color and/or the font of the text). Let me know.
Yes, that was excellent, thanks! So I put the image in with the no click option and sized it down a bunch. The link below is to the post. And I would love to center the caption, how do I do that?
http://runnerontheright.wordpress.com/2011/11/21/i-love-running-uphill-why-you-should-too/
You need to turn this:
<p style="color:#666;ETC ETC
to this:
<p style="text-align:center;color:#666;ETC ETC
But the file you have uploaded is 488px wide while the displayed version is 189px. If you want it displayed at 189, you must downsize it to 189 in an image editing application before uploading it, not via the image tool of the post editor. Otherwise you would need more commands in the code, which I tried to avoid, and the version I gave you won't work as expected - notice that the right side of the frame isn't ok?
Ok, the centering worked like a charm. However, I tried resizing the image down to 189px, but it is still getting that funny right side of the frame. What'd I screw up here?
Thanks!
Which post are you talking about?
Same one as before... http://wp.me/p1N57Y-3a
Same one as before is same as before. The file you have inserted is this:
http://runnerontheright.files.wordpress.com/2011/11/imag13304.jpg
It's 488px wide (so I don't see what you mean when you say you "tried resizing the image down to 189px"). It should be like this:
http://wpbtips.files.wordpress.com/2011/11/13304downsized.jpg
I have scaled it down to 190px. If you copy it and use it, MMM in the code model should be 204.
Genius, thanks! I thought I had made it smaller, but guess not. That one worked and I will stop bothering now. Again, very much appreciated!
http://runnerontheright.wordpress.com/2011/11/21/i-love-running-uphill-why-you-should-too/
You're welcome!
By the way, I'm going to publish a post with an expanded and polished version of the instructions for this workaround.
Hope dealing with a beginner like myself helped to hone the strategy. I definitely endorse whatever version you post!
Please don't underestimate yourself! Nothing to do with "dealing with a beginner": it's just that your question helped me invent a new trick, and I think it's worth publishing it because you're not the only one who doesn't like that quirky dash.
This topic has been closed to new replies.
steverunner21
