Thursday, May 03, 2007

Image Source Links Won't Work

Does anybody have photo links in their blogger sidebar using photos you've uploaded through blogger?

This is my problem:

I have several photos/images in the sidebar on my blog, Farmgirl Fare, that link to various other sites. The top three jpeg images in the current sidebar were all uploaded last year by me through Picasa's Hello (which no longer works).

I would upload the image, save it as a blog post on a separate non-public blogger blog that I have, open the post, click on the image to enlarge it, and use that url in the "img src" part of the link.

I now upload my photos directly through blogger. I want to use fresh images for some of my sidebar links, but the img src links won't work. The image urls themselves do work, however.

I have no idea why this would be.

I don't know if this will help, but here is an example of an image link (taken from my Farmgirl Fare template) currently in my sidebar that does work: (I had to remove some of the <>, plus the end part with /a> because otherwise it put the actual image link in this post; I also split up the code here)

a href="http://inmykitchengarden.com" target="_blank">

img src="http://photos1.blogger.com/hello/275/6184/
1024/thumbnail%20chard%20sprouts%20cropped.jpg"/>


Today I replaced this part of the code:
http://photos1.blogger.com/hello/275/
6184/1024/thumbnail%20chard%20sprouts%20cropped.jpg


with this:
http://3.bp.blogspot.com/_h2EzbV4lTjA/
RjopKPxmZ_I/AAAAAAAAALk/
XFaTELh6v80/s1600-h/lettuce+imkg+with+border.JPG


All I got in the template preview and on the actual blog was a red x-ed out square where the image should be.

Okay, duh. I forgot about View Source. If you open it up on my Farmgirl Fare and go about 3/4 of the way down, you can see two other attempts I made a few months ago to add new photo links at the top of the sidebar. The same thing happened as today, but I just left them there with that ! code thing so they wouldn't show up.

Any idea what is going on? If you have image links in your blogger sidebar but didn't upload/save the images on blogger, where did you put them?

I use Windows XP, IE 6, and the new blogger. I'm also an html beginner and get confused by technical talk pretty easily. Any help greatly appreciated. Thanks!

Posted by farmgirl from Farmgirl Fare

5 comments:

Nate @ House of Annie said...

the forward slash "/" between ".jpg"" and the closing ">" could be the culprit. Try removing it and see what happens.

Joanna said...

Couple things. The slash should be OK, just make sure there's a space between the closing quote (") and the slash. Also, make sure there are no "hard returns" in the name of the new photo. the text you posted DOES have hard returns in it- copy the three lines that make up and delete the line breaks, so you get "http://bp2.blogger.com/_h2EzbV4lTjA/RjopKPxmZ_I/AAAAAAAAALk/XFaTELh6v80/s1600-h/lettuce+imkg+with+border.JPG" It's OK if the name wraps.

Farmgirl Susan said...

Hi Nate,
Thanks for the tip, but I don't think that's the problem, as the "/" is in the version that does work. : )

Hi Joanna,
Oops. I should have mentioned that I put in those hard returns just for this post because they were were too wide for the text column and made the FBS sidebar move to the bottom of the page. Thanks for the tips. : )

Trig said...

I'm not sure that I fully understand your problem, but let me try.

Firstly your example photo url works fine - just click on my link above and it should display.

I can tell you a bit about photos in Blogger and maybe it will help.

Firstly, once they are uploaded and you have the url, they can be used from the Blogger server - they don't have to be "owned" by you in a real blog or one set up for this purpose. Just create a new post, upload a photo, take the url to use elsewhere and delete the new post.

The only thing to note is that when you delete a post you may be asked whether you want to keep photos in it or not. This is controlled by the photo id, e.g: id="BLOGGER_PHOTO_ID_nnnnnnnnnnnn". To keep a photo, unclick the delete box so it reads "Keep" instead of "Delete".

When you upload, the basic format is shaped like this:
<a href="http://servername/id segments/s1600-h/filename"><img style="style items" src="http://servername/id segments/s[size]/filename" otherbits id="BLOGGER_PHOTO_ID_number" /></a>

The inner <img...> bit is your photo address. The outer <a href="........"> ... </a> is the hyperlink, i.e. where you go when you click on the photo. In my example it is an enlarged version of your photo (1600 is the largest size and the "-h" means it will open without asking you for permission).

To go to a webpage when you click on a photo, put the webpage url in the outer part, e.g.:

<a href="http://foodiefarmgirl.blogspot.com/">
<img src="photo url"></a> will link to Farmgirl Fare when you click on the photo.

To adjust the size of the photo to a sidebar of, say, 240 pixels width, put width="240" in the "otherbits" as I described them above, i.e. before the end of the photo description. This will scale the width and height simultaneously.

If you click here you will see your picture set to 200 pixels wide and hyperlinked to your blog, with the code beneath the picture. It's on a temporary post in my archives that I will delete in a few days.

Hope this helps - if not just ask.

Trig

Unknown said...

Louis vuitton bags
accept got their own accent in our lives, for arcade or anywhere abroad after accustomed a louis vuitton handbags
with us. While traveling anywhere and the lv
is the one which makes you beautiful wherever you go. This is not alone due to the architecture of the atypical louis vuitton
.