Losing image links seems to be a common blogger problem. Since images uploaded to Blogger are linked to a large copy something happened to loose that clickability. It's possible that when images are moved in a post the link is not picked up with the rest of the code. Reliability can be increased by switching to Edit Html and moving the complete code.
This post is my May 3, 2008 reply in the enlarging photos in window thread.
"It's possible that you lost the link while moving images. That's a standard response, the problem is that if it's the first image in a post, how did the link get lost?
The clickability can be restored by editing the post Html, locating the image code and then inserting a link. The procedure may seem complicated, but it's not.
First, you need to know what typical Blogger image code looks like in Html: this is just the image, not the link. It's:
<img id="B_P_I_987654" style="cursor: pointer;" alt="" src= "http://bp9.blogger.com/_abcdefg/
Hijklmno/AAAAAAAA/U1239876/s400/prettypicture.jpg" border="0" />.
That needs to be wrapped in <a href=> </a> to be linked. To add a link, the portion of the code that is needed is the address: bp9.blogger.com/_abcdefg/Hijklmno/AAAAAAAA/U1239876 /s400/prettypicture.jpg
Blogger will add the http:// and everything else that is needed.
The other thing to understand is the folder name. In the address above the "s400" is the size of the image in the post (large in this example.) The full sized is normally addressed as "s1600-h" and that's what I will use here. Note that addresses are case sensitive and the small number may be s200 or s320.
This procedure will involve using a plain text editor to modify the address. Once you do it one time and see what's going on, you can eliminate those steps and work right in the link dialog box.
To add a link to a Blogger-uploaded image that has the link info missing, do the following:
– Open a text editor (not Word.)
– Edit the post and switch to Edit Html.
– Locate the image that is not wrapped in <a href > </a>.
– Copy the image address. It starts with "bp" and ends with "jpg", as indicated above.
– Paste the address into the text editor.
– In the text editor, change the size folder from s400 to s1600-h. (Case sensitive)
– Copy the modified address.
– Go back to the post edit window.
– Select the full image code from <img to />.
– Click on the link button on the tool bar.
– In the Enter URL box, paste the modified image address from the text editor. The result will be: http://bp.../s1600-h/...jpg.
– Click OK.
– Preview the post.
– Hover the image, the status bar should show the s1600-h address and clicking should take you to the full size image.
– Publish."
13 comments:
This worked great! Thank you!!!
this is an awesome walk-through! thanks tons!
Thank you. Exactly what I was looking for and needed. Great step by step.
Thanks again!
Thank you very much for the step-by-step! It is very simple and easy do follow even for someone like me who doesn't understand HTML.
Thank you! I was going crazy trying to figure this out. I am so clueless when it comes to HTML but your directions were so easy to follow.
I used this step by step guide and although it worked, every time I clicked back into the 'compose' section, or I previewed one photo [AFTER saving], all of my s1600-h links disappeared. Is this supposed to be happening? It is an easy way to make the photos "click-able", but I am not going to go through the hassle of the links disappear every time I click between HTML and Compose.
Help?
New England Girl,
I don't understand why that would happen. I've tested the procedure again, on my Image Positioning post, by adding links to images that never had a link. Once I add the link wrapper in Edit Html, I can Preview and switch to and from Compose, and the link is retained.
I am going to play with it for a few more days abnd see if I can figure out what's going on.
Blogger does seem to be having some problems lately. On BHF question was about Blogger inserting spelling check code into image links, and on that blog it was happening, so the links don't work. Also, I published your comment when you sent it, but it disapeared, only to re-appear yestersay to be published again, but with the origianl date. I don't know what's going on, maybe Blogger is adding new "features."
thanks a lot!!! i've been searching for this answer for hours u know.. X)
Thank you very much, I appreciate this greatly. Thanks!!!
Ok, I'm having the same issue.
This may be a dumb question but how do you "open a text editor"?
Around the World to Harper,
A text editor would be Notepad in Windows, or, I use KWrite in Linux. You don't want a word processor because there's always the possibility it will add formatting code which will break the Html code even further. The text editor is just a place to hold and fix the code.
I chose to show that method because the Blogger image code is complicated, and, Blogger provides a tiny editing window. You can do the edit in the post editor if you work carefully.
You are taking image code:
<img src="http://THE_IMAGE_ADDRESS /> and putting it in a link wrapper. The wrapper is <a href="http://THE_IMAGE_ADDRESS /> before and </a> after, so you have:
<a href="http://THE_IMAGE_ADDRESS /><img src="http://THE_IMAGE_ADDRESS /></a>
That will click to the same image, so find the size folder in the link wrapper, /400 (or /s200, /s320, /s640) and change it to the full-size image folder: /s1600-h.
If you were working in the post editor, click the Compose tab and Publish.
I'm soooo frustrated, I can't get this figured out.
I'm able to wrap the image, but when I view the blog to expand the photo, it's saying Not Found Error 404.
What am I doing wrong?????
Around the World to Harper,
I put a comment on your second post.
Post a Comment