Pictures in WordPress with spaces and captions

My team member at my new job, Kimmie Chann, was having a problem getting pictures from Flickr to embed in her WordPress blog. Since I have fought the same battles with some of my images here on VitaminCH, I thought I would share with everyone a quick solution to the problem.

The first step is to get the link for your image and decide where in your post you want the image to show. While editing the blog post, switch from the “Visual” tab to the “HTML” tab. Find the place in the post where you want your picture to appear.

Your next step is to put together the code for the picture, the link, and the caption. Start with this code:

[ caption id="Name_Of_Photo" align="aligncenter" width="500" caption="Caption_Text </a>" ]<a title=”Hover_Text” href=”LINK_URL”><img src=”Picture_URL” border=”10″ alt=”ALT_Text” width=”500″ height=”350″ />[/caption]

Where:

• Name_Of_Photo is the name of the photo in your graphics library
• Caption_Text is the text you want to show below the photo
• Hover_Text is the text to show on mouse over
• LINK_URL is the link to the page to go to when the picture is clicked
• Picture_URL is the Flickr (or other photo storage) URL for the picture itself
• ALT_Text is the text to show if the picture is not shown or if a screen reader is being used

Please note: In the sample code, I have added an extra space after the “[" and before the "]“. This is so that you can actually see the comment code that makes this trick work.

Let’s see a real example. This HTML:

[ caption id="attachment_31" align="aligncenter" width="500" caption="DigiBordMenu" ]<a title=”Picture 1 by kimmie_chann, on Flickr” href=”http://www.symbaloo.com/public/2273/digibordmenu/”><img src=”http://farm5.static.flickr.com/4033/4347211019_2404bed17a.jpg” border=”10″ alt=”Picture 1″ width=”500″ height=”350″ /></a>[/caption]

Picture 2

[ caption id="attachment_31" align="aligncenter" width="500" caption=" lyne fichet" ]<a title=”Picture 3 by kimmie_chann, on Flickr” href=”http://www.symbaloo.com/public/5886/lyne-fichet–mes-bureaux-publics-”><img src=”http://farm3.static.flickr.com/2730/4347958686_6c161c9203.jpg” border=”10″ alt=”Picture 3″ width=”500″ height=”350″ /></a>[/caption]

Gives this result:

DigiBordMenu

Picture 2

lyne fichet

Once you have the HTML added, switch back to the “Visual” tab. You should see the pictures in your post just as they will show in the actual entry.

I hope that makes sense and that you find it useful!