How to create a clickable image in WordPress

[GoogleCodeExporter]

Article Title: How to Create a Clickable Image

Article Description/Summary: Tutorial article on how to add a clickable image 
in WordPress content and Text Widgets. 

The article must clarify the difference between embedding an image as 
"clickable" as an attachment (explain attachment verses media file in the 
WordPress Media Library) and manually (or with the Media Library/Uploader) 
adding a link around an image to an external web page not a larger size of the 
image. Describe user expectations and how to distinguish between the two for 
expectations. 

Keep the tutorial simple with clear steps for each usage in the content and in 
the Text Widget. 

Skill Level: Beginner, familiarity with graphics and links

Skills: WordPress, Research, Writing, Graphics, 

Original issue reported on code.google.com by lorelle...@gmail.com on 30 Dec 2013 at 9:50

[GoogleCodeExporter]

Original comment by lorelle...@gmail.com on 31 Dec 2013 at 6:13

• Added labels: Skill-Intermediate
• Removed labels: Skill-Beginner

[GoogleCodeExporter]

I believe I understand how to create a clickable image, and I will do some 
research to make sure I am correct.

Original comment by milatary...@yahoo.com on 23 Jan 2014 at 9:20

• Changed state: Accepted

[GoogleCodeExporter]

Just to clarify, a clickable image is any image, graphic, picture, photo, 
whatever, with a link wrapped around it. These are used in the content areas, 
like the badges on my articles, as image attachments (embedded images set as an 
attachment in WordPress), in sidebar WordPress Widgets, and even in the header 
art on almost every WordPress Theme, leading the visitor to the front page of 
the site. 

Any image with a link wrapped around it, but there is more than just that. I'm 
eager to see where you take it. Thanks!~

Original comment by lorelle...@gmail.com on 24 Jan 2014 at 8:45

[GoogleCodeExporter]

Original comment by milatary...@yahoo.com on 25 Jan 2014 at 6:39

• Changed state: Started

[GoogleCodeExporter]

I'm ready for my article to be reviewed, hopefully I got everything. If not 
just let me know which area I need to expand on or add. Also the images I have 
in there are really frustrating me because I can't seem to get the unnecessary 
break to go away in the second lines of the paragraphs with the purple flower 
images. it might be from the captions but I'm not sure. and I'm done messing 
with it cause I have been trying for like 20 min, and it looks fixed one minute 
but I refresh and it's messed up again. 

I hit save as pending but the publish button never changed in WP so I am 
assuming I didn't need to press that button then.

Original comment by milatary...@yahoo.com on 25 Jan 2014 at 9:11

• Changed state: Review

[GoogleCodeExporter]

Awesome article, LaRhea! I fixed the issue with your purple flower pics. It 
happens (I think)when you have the cursor at some midpoint in your paragraph at 
the time you upload the image. Because the image has a right alignment, it 
causes the text to do weird stuff. I just moved the image to the very beginning 
of the paragraph (but still with the right alignment) and it fixed it right up!

I did some minor GPS (Grammar/Punctuation/Spelling) edits and only have a 
couple of suggestions:

1. In your first paragraph, you talk about the Add Media button as the place to 
go to upload the image and then end the paragraph by moving on to attachment 
settings. I think it would be helpful if you walked the reader (possibly a 
newbie) through the basics of "click Add Media, select the image, then you'll 
see Attachment Details on the right, scroll down to where you see..." before 
you start talking about the attachment settings themselves. Other than that, I 
thought it was very easy to follow.

2. Check the Alternate Text for all your images. Remember it needs to be a 
sentence with capital letter and punctuation.

Original comment by kldesem...@gmail.com on 26 Jan 2014 at 4:41

• Changed state: YourTurn

[GoogleCodeExporter]

Should be all fine now, hopefully. Thanks!

Original comment by milatary...@yahoo.com on 26 Jan 2014 at 7:35

• Changed state: Fixed

[GoogleCodeExporter]

Hi there.  Looks pretty good.  Great information.  In addition to the things 
already mentioned I wanted to add one other little thing I saw.  Where you have 
a paragraph talking about choosing "none" you then mention that the reader will 
see an example below but the example screen shot shows "URL" not "none".  I do 
see that in the image is actually set to none and not clickable but it might be 
a little more consistent with the message if the pic matches the message.  

Thanks,
jO

Original comment by jojogrlw...@gmail.com on 26 Jan 2014 at 3:30

• Changed state: Edit

[GoogleCodeExporter]

Hey, looks good. Make sure to add a little more tags and I went ahead a changed 
a sentence in your first paragraph.  
-Savanna

Original comment by pudding...@gmail.com on 26 Jan 2014 at 8:44

[GoogleCodeExporter]

Also, your title should be mire than just clickable images.How to Create a 
Clickable Image sounds better. 

Original comment by pudding...@gmail.com on 26 Jan 2014 at 8:47

[GoogleCodeExporter]

Ok, fixed the image, title, and tags.

Original comment by milatary...@yahoo.com on 27 Jan 2014 at 1:39

• Changed state: Fixed

[GoogleCodeExporter]

Super! Closing the issue and publishing your article!

Original comment by kldesem...@gmail.com on 27 Jan 2014 at 3:37

• Changed state: Completed

[GoogleCodeExporter]

Fantastic job. 

Just wanted you to know that I edited a few small things. 

1. Broke long paragraphs into smaller ones. Makes it easier to read.

2. Removed the greeting at the beginning of the article. These are supposed to 
be professionally written, so "hello there" isn't a good way to start an 
article. :D 

Tiny things, but wanted you to know. 

Great job! Thanks. 

Original comment by lorelle...@gmail.com on 27 Jan 2014 at 11:56

[GoogleCodeExporter]

Original comment by lorelle...@gmail.com on 7 Mar 2014 at 11:49

• Added labels: Milestone-WQ2014