Sunday, September 10, 2006

Uploading and manipulating photos on Blogger (and Blogger Beta)

There is no difference in the way in which photos can be uploaded to posts and manipulated in Blogger classic and Blogger Beta, so one post will do for all.

uploading photos

First the basic. To upload a photo, sign into Dashboard, select the blog, click the POSTING tab and select either NEW POST or EDIT POST. Then in the post editor, look for the "uploading photo" icon in the toolbar (See screenshot below)
icon for uploading photo in Blogger
Then click "Browse" (Choose in Blogger Beta) and look for the photo file in your computer. Open that one then select whether you want the photo to be to the none, left, right or center of your post. If you select left or right, you will have less control over how the text and the photo in the post will be displayed. You may see it displayed in one way in the preview, but when you publish it, it may appear different. Choosing center will give a better control over the connection between text and image. Selecting NONE will enable you to paste your photo in whichever part of the post, even in the middle of a sentence in a text. Look at the image of Highlight icon in this post What is FireFox and why you should be using it. The small image (of the tip of a highlight pen) is displayed in the middle of a sentence near the bottom of the post.

If you want the image to be displayed to the left or to the right of the post, it is best to select "small", then after uploading the image, cut and paste the image HTML immediately before a paragraph, like the photos you see in this post: Penang: Places of interest. You will have better control of how your text and image appear together. Pasting the image HTML in the middle of a paragraph.

Then select whether you want the photo to appear small, medium or large, and finally click "upload image".

What you will then see will depend on whether you are in the EDIT HTML mode or COMPOSE mode of the post editor:
EDIT HTML and COMPOSE mode in BLOGGER
Whichever mode you are in, you will see the "photo" at the very top of the post. If you are in the COMPOSE mode, you will see the actual photo, but if you are in the EDIT HTML MODE, you will see the HTML for the photo, which will appear something like this:






<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/5611/753/1600/
upload%20photo.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/5611/753/400/
upload%20photo.jpg" border="0" alt="" /></a>



Note: At the bottom of the code, you will see this alt="". It is good to fill in the space between the quotation mark with a description of the photo. This is both for the purpose of those who for some reasons are unable to see the photo, who will then see the alternate text, and for the search engines which do not see the photo, but read the alt"" text. Important. You need to ensure that you are in the INSERT mode when you do this, otherwise, you will overwrite part of the HTML. It may be a good idea to open Notepad and test this first.

Manipulating the photos

To move the photos, there are 2 ways. If you are in the COMPOSE mode, you just grab the photo with your mouse and drag it to where you want it to be. If the position is way down the post, you may have to do this a couple of time. In the EDIT HTML mode, it is easier. All you have to do is to highlight the HTML code for the photo, right-click, select cut, and paste it where you want the photo to appear in your post.

In the COMPOSE mode, you can also manipulate the size of the photo. Just grab the corner of the photo and drag it till you get the size you want. You may also grab and drag the side of the photo, but the aspect ratio will not be preserved.

Problems uploading photos

Bloggers often complain of being unable to upload photos. Either they are made to wait for eternity, or the message DONE appears, but when clicked, no photos are in sight. For problems like this, you can try changing browser. Look at post What to do when you can't publish or upload photos, etc.. (Please note that while FireFox is best for uploading images, the recommendation is to change browser when facing problem, which means that if you are already using FireFox, then change to IE or Opera)

Other ways of uploading photos to Blogger

There are also other ways to upload photos. You can use external photo hosts like Photobucket. You will have to start an account with them, and once you have done that, you can upload your photos, and then use the uploaded photos to post to you Blogger blog. You will have to use the <img src="URL of the photo" alt="XYZ" width="W"> tag where XYZ is a brief description of the photo and W is the width of the photo you want to display. This width W must be less than the width of the main column. You can leave out the height="H" attribute and the height will automatically be adjusted to make the aspect ratio constant and the image undistorted.

You can get the width of the main column by clicking TEMPLATE > EDIT HTML to get the template editor window, then look for this block of codes:

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

This is for the template of this blog. Yours might be slightly different. Anyway, this tell me that the width of the main column is 400 pixels and the HTML tag for the photo should then be

<img src="URL of the photo" alt="XYZ" width="395"> or less.

To get the URL of the photo, when you are logged into Photobucket, you just highlight the URL as shown in the screenshot below:

Alternatively, if you are too lazy to type in the tag, that has already been done for you by Photobucket, and that appear in the second box (tag) below the one highlighted above. Just copy that and paste it in the post editor where you want the photo to be in.

The only thing to remember when hosting photos with external photo hosts, the photos will remain only as long as that photo host remain in business. Further, in Photobucket case, there is a requirement that you log in at least once in 3 months, otherwise your account may be deleted, along with your photos. For me, I prefer to host my photos with Blogger. Update: from correspondence with Photobucket, there is no longer a requirement for you to sign in every 3 months, but they said they reserve the right to delete inactive accounts

If you use HTML and you want to be able to manipulate the photos a little more, you can learn how to by going to W3schools. HTML Images.

UPDATE: 11 October, 2006
I made a mistake. I titled this post as "Uploading and manipulating photos on Blogger (and Blogger Beta)". I assumed that since the post editor window is the same in Blogger classic and Blogger Beta, everything will also be the same. But anyway, today I decided to do a test. The report is in this post: Testing manipulating images in Blogger Beta. Resizing and repositioning images in the COMPOSE mode does not work in Blogger Beta. If you want to reposition, you will have to use the method in the EDIT HTML mode as described above. If you want to resize, you will have to add the attributes height="" width="" in the <img> tag. The title of this blog should be "Uploading and manipulating photos on Blogger". However, changing the title means changing the URL to this post (permalink) and this post have already been indexed by the search engines. I don't want the links in their SRP (search result page) to become dead links. Anyway, this has been reported to Blogger support, and I hope they fix that. If I hear from them, or if I find the bug fixed, I will post a further update.

Related post: Uploading and manipulating images Part 2 (click "BACK" button to get back to this page).

NEWER POST    OLDER POST

104 comments:

  1. Keep up the great blog. For problems of uploading photos under Internet Explorer browser, I switched to Mozilla FireFox and it always work. Saves time!

    Ques: For putting a link in a post, I have to manually add target="_blank" into each html link text so that readers open the link in a new page. Is there a way to make it automatic for all links I post to save time?

    ReplyDelete
  2. Hi Daniel,

    Thanks for the compliment. Regarding making links open in new window automatically, I don't know how, but I suspect there may be way to do it in the CSS.

    ReplyDelete
  3. Good info. Thanks for the tip about photobucket. I have animated gifs there for 2 of my blogs. Better go sign in now to keep that account up to date.

    ReplyDelete
  4. Hi Leigh,

    BTW I have set up a Yahoo group to send an email reminder every month to log in. Join the group if you want. You will get nothing other than the monthly reminder. The group is at Photobucket Reminder

    ReplyDelete
  5. I did not know I could change the size of a photo by dragging the corner!? Very useful to know.
    I find that a lot depends on WHEN I post, whether my pictures load quickly or not. If I do it EST before 7-8 am (the earlier the better) no problem.
    Plus I number my pictures (1-6) in their file so it's easier to put in the last picture first and so on.
    I found that if I wanted to delete 1 picture they would all delete. But now I realize if I have text under the other pictures, they will stay. I'm really getting alot out of these posts. I will add a link to make it easier to vist :)
    Thanks

    ReplyDelete
  6. A couple of suggestions (original blogger; I haven't switched to beta so can't guarantee these for the "improved" version):

    First, dragging to resize a photo can produce a very poor quality image. I don't know what blogger does when it resizes like this, but I suspect (from the poor results) that it doesn't resample, or uses a poor resampling algorithm.

    Second, in COMPOSE mode, you can cut the image, move the cursor where you want it, then paste it back in. You may need to drag it to fine tune the position. It's much easier than a series of drags if you need to shift the image a reasonable distance.

    ReplyDelete
  7. Thanks for the update. I may try out your suggestion and if it works, I will update my post and credit it to you.

    ReplyDelete
  8. Hi Phohanginapete,

    I tried as you suggested. I had some texts and a photo. In FireFox, I right-click on the image, but there was no "cut" option. I changed to Intenet Explorer, and did the same thing. This time, right-clicking and selecting "cut" didn't do anything. And pasting in another position didn't produce an image there.

    Maybe there is something I am missing.

    ReplyDelete
  9. Peter, you're right about right-clicking not working. I never use that method, instead, cut the image using "CTRL X"; then paste it where you want it with "CTRL V". I've just tried the procedure and it works fine (in original blogger).

    ReplyDelete
  10. Oops, sorry, meant to say it works in Firefox. Haven't tried it in IE.

    ReplyDelete
  11. A couple things I have found. First, Blogger does seem to sample differently based on what you want as your final size. I tried to change a "small" to a "large" photo, and it didn't work well - so I just uploaded the photo again.

    Secondly, every once in awhile, when I am switching back and forth between preview mode and editing, Blogger will add some garbage to the front of the URL to indicate that it is a bad URL. So, if all of a sudden, a photo quits appearing (esp. if you are using Blogger for the photo), look at the URL and remove the junk added to it.

    I tend to use the "large" "unjustified" options. It doesn't look big enough at first, but when the blog is active, it looks just fine.

    Sometimes though, if I have just a little text, it starts wrapping around. So, I insert an HTML break just after or before the photo if this is happening.

    Finally, I often remove a lot of the garbage HTML from the IMG element. I really don't care about the cursor or fading in or out.

    Also, it drives me crazy that photos, at least in HTML editing mode, are inserted at the beginning. That means that if I am inserting more than one, I need to do it in reverse order, or move them (as suggested above).

    Still, a nice feature that I abuse on a regular basis.

    ReplyDelete
  12. I just posted my first post with images !! And let me tell you, it took me more than 3 hours !! I should have come here before doing that.
    Sometimes blogger giving problem but that's no excuse.
    First, I didn't know the seq like first I should upload the images or paste the text. I tried both methods.
    Then problem was to drag images to their correct place, font size becoming very large. It was a pain. Phew !!

    Never knew this cut/paste option. Needed something like that. Will try in my next post.

    Thanks. :))

    P.S. One query- What happens when we choose the option as nothing instead of (right, left, centre) for placement of images? Can we move images to wherever we want or any restrictions?
    Any idea?

    ReplyDelete
  13. I'd like to add an embedded title to my photos, but when do I do this and where? Must I be in HTML and not compose..maybe I better reread the post..I couldn't just add it in the upload phase..?
    or when I open the picture in PReview phase..Hmmm
    *Also I tried 5x to add this site to my links list and it refused to show up in the preview or post stage? I've no idea why ?

    ReplyDelete
  14. Cool - thanks for the info!

    ReplyDelete
  15. Hi thanks for the tips on your blog. I am having a really hard time up loading photos--I am going to try to change to Firefox and see how that goes.

    I uploaded a video from youtube last week smoothly---today I tried and it never showed up on my blog. Have you heard of this? Don't know if it's a blogger issue or youtube. Can it be related to same problem as photo uploading. Any tips is appreciated.

    ReplyDelete
  16. Haven't had any reason to pload a video and have not tried youtube yet, so I don't have any experience with it.

    Maybe just to be able to make a post on it, one day I may try.

    ReplyDelete
  17. Question: When uploading photos with file names that have spaces in them, the upload works fine but the generated HTML cuts off the file name when it encounters the first space. Even if I add the file name back in, during edit, it still gets truncated. Has anyone else encountered this problem? Other than renaming the files, do you have any workarounds? Thanks - btw, new to blogger and can't wait to check out some of your other entries!

    ReplyDelete
  18. Why do you need spaces in your file name. If you need to separate the words, it will be better to use the hyphen or underscore.

    ReplyDelete
  19. Unfortunately (or fortunately), it's not me. I'm helping someone else set up her blog and all of her photos have spaces and periods in the file names. I renamed a bunch of them on the server and fixed the html to get them to display but on a go forward basis, other than telling her to change her filenames before uploading them I wasn't sure if there was something else I could do. Thanks! :)

    ReplyDelete
  20. All my blogging experience is with blogspot, not with hosting with external server, so I am afraid I am unable to comment. Why don't you try posting this to Blogger Help Forum

    ReplyDelete
  21. Peter - I'm not sure if you can help me or not. Since upgrading to Picasa2 last weekend I've been having trouble posting photos through Picasa/Hello to my blog. Most of the photos have the bottom half missing.

    I uninstalled both Picasa2 and Hello and then reinstalled them. I tried posting photos through Hello using a different photo program with the same result.

    At first I thought the problem was with Picasa2 but now it seems that it's with Hello.

    Do you have any suggestions, please?

    ReplyDelete
  22. I suppose you are using Blogger classic since Picassa is not yet support for Blogger Beta.

    Anyway, I have never used Picassa and have used Hellow for a very short time a long time ago. I am afraid I am not able to help you. Why don't you post your problem to Blogger Help?

    ReplyDelete
  23. Anonymous11/16/2006

    hi,peter.just wanna ask:how do i creat a photo gallary section on blogspot like wat they have on myspace with msn?i've spent 2 hrs tryingto figure out,but couldn't~~~
    really appreciate if u can give some suggestion!

    ReplyDelete
  24. I have to tell the truth, and that is I don't know what a photogallery is, probably a series of thumbnail images. Tried a guick google search, but turned up most result giving programs to do photo gallery. I can only attempt an answer, but keep in mind what I said above. I think Irfanview have a section for creating thumbnails, then you can display them on your post by putting them in a table, or by choosing none and small when you upload via Blogger and arrange them according to how you want them displayed. But really, I may not be the best person to answer, and hope readers who are more familiar with photogalleries will respong. Or try posting your question to the Google Blogger Help group.

    ReplyDelete
  25. Another weak attempt to answer your question: Try to make thumbnail images with Irfanview Using Irfanview photo editor for your blog, then put them in a table How to display images side by side. This post was written for 2 images, but if you are familiar with HTML for tables, you should be able to extend it to 3,4,5..... images side by side and/or row by row. If not, ask again. But may I mention that someone may have a better solution, as I only have a hazy notion of what a photogallery is.

    ReplyDelete
  26. One more attempt. Try the Picasa (Google photo software) program by downloading it from this site My Photo Store and see if it can help you do what you want.

    ReplyDelete
  27. I just downloaded the Google photo software (Picasa) to test it out. I am not allowed to download it from the referral button on my own blogs, so I downloaded it from a friend's site. Here is the updated release notes:
    ---------------------------------
    Build 32.94, September 15, 2006 Release Notes
    Share photos online
    Upload photos to Picasa Web Albums for easy sharing on the web. Select the photos you want in Picasa and upload them to the web by clicking the "Web Album" button. When viewing your friends' albums online, you can even download them right back into Picasa on your own computer.
    Nested Folder View
    Now you can choose how to display folders in Picasa, whether they're nested or sorted by date.
    Save Changes to Disk
    Picasa has always kept your original files safe. But we know that sometimes, users also like to be able to save their Picasa edits. Now you can save your edits and have access to them in other programs, but we also provide an automatic backup that lets you revert back to the original anytime. We even match the jpeg quality of your original!
    Improved import
    We know you've wanted to import files into an existing folder. We've also made importing faster, and made it easier to copy just a few files at a time.
    Screensaver
    Show starred photos in a collage, or pan and zoom your Web Album photos. Choose between four presentation options to display your best shots.
    Geotagging
    Picasa now works with Google Earth. Tell Picasa where you shot each photo, and view them on a 3-D globe in Google Earth. You can also export KMZ files for sharing online.
    Larger thumbnails
    Our thumbnails are slightly larger, so images are clearer, and we've improved speed as well. You will notice Picasa updating all of your thumbnails after the upgrade.
    New RAW features
    We support more cameras and RAW formats (including the Canon 30D, Nikon D200, and DNG). Color accuracy is better, and conversion speed is improved.
    Other goodies

    * Improved caption editing
    * Starred photos organize automatically into a special album
    * "Just raw frames" option lets you export time-lapse sequences in the movie maker
    * The bottom row of buttons can now be configured to suit your needs

    Don't forget to to check out our Tools -> Experimental menu for some other things we're trying out.
    -----------------------------

    ReplyDelete
  28. I just downloaded the Google photo software (Picasa) to test it out. I am not allowed to download it from the referral button on my own blogs, so I downloaded it from a friend's site. Here is the updated release notes:
    ---------------------------------
    Build 32.94, September 15, 2006 Release Notes
    Share photos online
    Upload photos to Picasa Web Albums for easy sharing on the web. Select the photos you want in Picasa and upload them to the web by clicking the "Web Album" button. When viewing your friends' albums online, you can even download them right back into Picasa on your own computer.
    Nested Folder View
    Now you can choose how to display folders in Picasa, whether they're nested or sorted by date.
    Save Changes to Disk
    Picasa has always kept your original files safe. But we know that sometimes, users also like to be able to save their Picasa edits. Now you can save your edits and have access to them in other programs, but we also provide an automatic backup that lets you revert back to the original anytime. We even match the jpeg quality of your original!
    Improved import
    We know you've wanted to import files into an existing folder. We've also made importing faster, and made it easier to copy just a few files at a time.
    Screensaver
    Show starred photos in a collage, or pan and zoom your Web Album photos. Choose between four presentation options to display your best shots.
    Geotagging
    Picasa now works with Google Earth. Tell Picasa where you shot each photo, and view them on a 3-D globe in Google Earth. You can also export KMZ files for sharing online.
    Larger thumbnails
    Our thumbnails are slightly larger, so images are clearer, and we've improved speed as well. You will notice Picasa updating all of your thumbnails after the upgrade.
    New RAW features
    We support more cameras and RAW formats (including the Canon 30D, Nikon D200, and DNG). Color accuracy is better, and conversion speed is improved.
    Other goodies

    * Improved caption editing
    * Starred photos organize automatically into a special album
    * "Just raw frames" option lets you export time-lapse sequences in the movie maker
    * The bottom row of buttons can now be configured to suit your needs

    Don't forget to to check out our Tools -> Experimental menu for some other things we're trying out.
    -----------------------------

    Note that thumbnail is mentioned.

    ReplyDelete
  29. Hi Peter, how do I get rid of the grey border that is on the pictures uploaded using blogger's uploading feature?

    And, I recently downloaded a new template from Gecko & Fly, and all of the pictures I have uploaded using Flickr are not showing up. Is there something in the code that would prevent the pictures from displaying, and if so, what would it be? Thanks.

    ReplyDelete
  30. Hi Wes,

    I tried to answer in the comment but it would allow the HTML tags, so I will have to answer you in a post. Watch out for it in this blog.

    ReplyDelete
  31. Peter!! Thanks sooo much! I'm new in this things but I'm learning a lot with your help, lol
    http://laluna737.blogspot.com/

    ReplyDelete
  32. Peter,

    Can I rotate a photo in blogger? Or is there a way to post a photo that is vertically oriented? So far, if I try to post a vertical photo blogger posts it horizonally. I have been cropping my photos to work that way, but finally have one that won't work horizontally. Anything that I can do?

    ReplyDelete
  33. Sorry, I find some difficulites in understanding your comment completely, but it seem to be a complaint that Blogger reorientate a vertical picture horizontally, which was a complaint I often read in the Google Blogger Help group. As a retired scientist, I believe in doing test and relying on the result of the test, so I have taken a picture (the skyline of the capital city of Malaysia - Kuala Lumpur, and used the free Irfanview to crop the picture to a tall, vertical picture. I uploaded it to this post: Testing uploading of a tall vertical picture in New Blogger. The result shows that Blogger post the picture as it is oriented, and doesn't change it.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  34. Hmm! Yes, you understood my comment correctly. Unfortunately, blogger does reorient all of my vertical pictures horizontally. I wonder why it would do that for me and not for you.

    btw I am in Thailand. Might get to visit Malaysia in 2007!

    ReplyDelete
  35. If what you said is true (Blogger turning your vertical pictures into horizontal ones) then Blogger Support must know of the problem. I am sure they would like to know about problems except they may find difficulties to reply to everyone, but I am sure they do try to attend to problems. To contact them see post How to contact Blogger Support.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  36. Hi Peter,

    First of all, thanks for your great tips. I've used them more than once!

    A few months ago, I had trouble finding information on how to insert a picture with a caption and have the text wrap around it in new blogger. Finally, I managed to write a piece of code that's easy to customize.

    Because there's still very little information on how to do this, I thought this code might help a few people.

    I see that you have quite a lot of traffic on your page, so I thought I would submit it to you.
    Everybody can copy-paste the code here, and this page contains examples of what the result looks like.

    Thank you!

    Julie

    ReplyDelete
  37. PS: I didn't know you were the Enviroman! The blog I referred to in my previous comment might be of some interest to you then.

    ReplyDelete
  38. Hi Julie,

    Thanks for posting your tips.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  39. Thanks for the help, but, what about the size of the picture, I posted a photo but it appears really big. I've tried resizing it, in photobucket, but the photo is the same when I post it. Can you give me examples abot where to put the crazy stuff in the tag?

    ReplyDelete
  40. Hi Persophone,

    Regarding using the <img> tag, to get the width of the photo right, you have to use a width="W" attribute so that the tag becomes <img src="photo URL width="W">. If this is still not clear to you, or you don't know what width (W) to use, I have updated the post. Read it again.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  41. Thanks to you, and about the images, I did'nt have to write the tag because the photos fixed themselves, I don't know what happened, it just past from an enormous one to the size I chose in photobucket, I suppose it`s because you have to wait until it works, thanks anyway, bye.

    ReplyDelete
  42. I'm using a classic blogger template, and haven't had too much trouble loading photos. My problems come with the animated gifs. Some of them will work, some will not. I get a static image with a black background instead of the action with a clear background. The odd thing is that some of the gifs that used to work just stopped working one day. They were already on my sidebar, but stopped being animations. I tried to reload them, but I get the black background, so I have left them as is. And I have other animations that do still work. Have you addressed this before, or do you know how to fix this problem?

    ReplyDelete
  43. Hi Jen,

    I am afraid I don't have much interest in gif and haven't worked with them. Perhaps the best thing for you to do is to post your problem to the Google Blogger Help group where there would be many with experience with gif

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  44. Thanks for the tip!
    Blessings,
    Jen

    ReplyDelete
  45. Hello, This site has helped me no end in the creation of my blog...
    Quick Question: How can i arrange a set of 12 images in a grid? (I've used a the "thumbnail album" method which is basically a table inserted in the post, but the tale ends up being aligned to the left of the post body, and i really want it to be aligned in the center of the post.)

    Question 2: Can we get images in a row without creating a table?

    Question 3: Can i have a different image appear in the post each time the page is loaded or refreshed?

    Thanks Sabina

    ReplyDelete
  46. Hi Sabina,

    "How can i arrange a set of 12 images in a grid? (I've used a the "thumbnail album" method which is basically a table inserted in the post, but the tale ends up being aligned to the left of the post body, and i really want it to be aligned in the center of the post.)"

    The way I would probably do it is also to use table, but ensure the total width of the photos do not exceed the width of the main column (post). The way to ensure that is to use Irfanview or other photo editors to resize the photo first before uploading it or to upload first, say to Photobucket, get the photo URL, then use the <img src="photo URL" width="W"> to put in the table.

    The other way I would like to test if I have the time is to resize the photo, then use the photo upload icon to upload them and hope that by their small size, they will be aligned in the manner you wish. You can test that if you have the time and hopefully let us know the result.

    "Question 3: Can i have a different image appear in the post each time the page is loaded or refreshed? "

    I don't deal with images very much, but there may be Javascripts that can do what you want to do (not sure). However, even if that can be done, you can't do that in a post as post editor don't accept Javascript. It can only be added via the HTML/Javascript Page Element.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  47. Hi again, Peter, I can't get through a week of posting without having to look something up on your blog. Today I learned how to move the photos around in the post editor. Thanks
    http://nancystandlee.blogspot.com

    ReplyDelete
  48. Thanks for posting a comment on my blog http://nancystandlee.blogspot.com.
    No, Peter, I'm not the functionalartist but I'll check out that group. I belong to some Yahoo groups and at this stage I need a lot of help.
    http://nancystandlee.blogspot.com

    ReplyDelete
  49. Thanks for this, I hadn't realized you could actually drag and resize photos in Compose mode.

    ReplyDelete
  50. Hi,

    Thanks for the tips however I encountered problem such as , every time i uploaded photos and wanted to put some text next to it, it only allowed 1 line and the rest of it would appear under the picture. What should I do to keep a few lines of texts / information about the picture exactly next to the picture ?

    Thanks
    erlin

    ReplyDelete
  51. Hi Erlin,

    First you must let me know which method you used to upload your photo.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  52. Thanks Peter for all your help. I have always solved my problems by visiting your site. Until now. All fine with my old 15" monitor but since changing to Samsung synmaster 913N, a nicely composed post of text and photos show up scattered about when I "View" the saved work, as in http://hokysushi-hokysushi.blogspot.com/2007/08/lunch-in-forest.html for example where the 3rd pic keeps "going up"! It's supposed to be aligned left with text on its right.
    Thanks very much.

    ReplyDelete
  53. Hi tannerylane,

    You are using the Minima Stretch which uses fluid width. This means your blog will adjust to visitor's resolution. Different visitors with different screen resolutions will see your blog differently. I uses 1024x768 and can resize to 800x600

    Yours may be bigger like
    1280x1024
    1152x864
    1600x1200

    I can't view your blog at these bigger resolution.

    This is one disadvantage of fluid width templates, you never know how your visitors will see the blog as it all depend on their screen resolution.

    Peter (Blog*Star)
    Dummies Guide

    to Google Blogger

    "online book" in progress

    ReplyDelete
  54. Hi Peter

    I went to a lot of trouble editing the template code for our blogs to make the main (body) column 600 pixels wide, to accommodate larger photos.

    However, no matter what options I choose, Blogger (old and Beta) nearly always resizes my images down to 400 px wide regardless (see eg here).

    Strangely though once or twice a 600 pixel wide photo has been posted correctly (eg
    here).

    I saw your suggestion about resizing photos by dragging a corner, but surely this is just going to "stretch" out the (resized to 400 px) image into a grainy larger version?

    Please help!!!

    ReplyDelete
  55. Hi Knysna,

    If you have problem with photos uploaded via Blogger, read further down the post where Photobucket is mentioned, find the width of your main column (assuming you are using a fixed width main column template, and not a fluid one), then use <img src="photo URL" width="W" /> where W is equal or less than the width of the main column.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  56. Hi Peter,
    I had a similar problem like Knysna's. I tried to adjust the picture image by dragging it in the compose mode. It just turned into a grainy image. I then tried to change the W/H in the edit mode and still got the same poor result. I know the width of the image has not exceeded the body width because there are still quite some borders around it when uploaded into the blog. Please help. Thanks.

    ReplyDelete
  57. Hi 22 butterfly,

    Hope I am not suggesting something too much, but I would suggest learning a bit of HTML. It is not difficult. I learned it on my own and now I can do pretty much anything I want for my blog posts.

    I practically never use the COMPOSE mode because it can mess up the special codes I used to display HTML tags and I am now very comfortable with HTML.

    I have not faced the problems both of you mentioned as I have not used the COMPOSE much, but use the EDIT HTML mode to control the size and appearance of the photo.

    I can't remember all that is published in this post, but I either use a special blog just for uploading the photo, or the free Photobucket image host, then use the photo URL for the <img> to display the photo.

    If you have any problem with the suggestions I made, feel free to comment again and I will see what I can do.

    Peter Blog*Star
    Dummies Guide to Google Blogger
    "online book" in progress. Use the content at the top of the main column

    ReplyDelete
  58. help! I just published my first post with images. looks ok. but why has it added a thin grey line border around each of the 4 images. the border does not exist in any of the original images

    I would prefer the images to float without the gray border box. any ideas?

    thanks!!!!!

    ReplyDelete
  59. Hi Christine,

    Refer to How to get rid of border in images uploaded via the photo upload icon in Blogger post editor.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  60. THANK YOU

    borders are off the pictures. once again you save the day!!!!

    ReplyDelete
  61. Hi,

    I have been able to upload photos to my blog without many problems, however I just noticed today that I cannot click on the photo and have it link to a larger version of the photo. I don't know what I am doing wrong.

    ReplyDelete
  62. Hi Vix,

    Refer to Why clicking on images does not cause it to enlarge and see if that is the source of your problem. Feedback highly welcomed.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  63. Hi Thanks for this, very useful :-)

    ReplyDelete
  64. Great information....very straight forward...now I wonder if someone can help me...I have no problem uploading images to my blog. However, I can't seem to make them wider than 400 pixels.
    I upload images 735 pixels wide and they are displayed in my blog at 400 pixels and linked to the 735 image. I've tried to drag the corners in 'compose' to make them bigger but then when uploaded, the image is cut off on the right hand side. How do I have my images displayed like this site does: http://impulsephotography.blogspot.com/
    ...When I drag the images larger, and only half is showing on my blog - I also notice that the quality of the image has decreased...any help would be greatly appreciated!
    Julie :)

    ReplyDelete
  65. Wow, that was a fast response....I do like the 'Blogger' that I am using...the link you have there isn't working....

    ReplyDelete
  66. Hi
    really helpful blog
    i was wondering why my images come out so small compared to others. and when i try to click on the side to enlarge it they just get pixelated ?
    is it cause my original photo size is not big ?

    ReplyDelete
  67. What methods you used to upload and display the photos?

    ReplyDelete
  68. hey thanks for the tips, really helpful. however i really needed help. i have uploaded tons of photos on my blog, & i had used the 'large image' selection while uploading, and had done it to the center.

    now i realized its a lot better to have the entire thing in thumbnail format for better viewing, and it loads a lot faster.

    my question is, do i have to re upload all the photos again to 'small size' to give it a thumbnail appearance?

    thanks

    ReplyDelete
  69. You can use <table> to display photos in rows and columns but they would have to be first published to the web. There are some services which makes the process of making thumbnails.

    Can't remember what is in this post - Irfanview for thumbnails

    ReplyDelete
  70. I am having problems with the alignment of my image map on my blogs
    posted page; please see: http://prisonersnetwork.blogspot.com/
    I am pretty sure the problem is in the edit HTML code, but I am not
    sure how to change the code to resolve this problem...could someone
    help me take a look at my at this post and suggest the changes that need to be made.

    I would appreciate your help.

    Thank you,
    Gary Dimitris

    ReplyDelete
  71. I suspect you displayed the map using <img> tag. If true, then use <img width="some numbers >
    where some numbers will have to be equal or less than your main column width. For more details, refer to how to find the width of blog Header, main column, sidebar

    ReplyDelete
  72. What about centering a smaller picture not on the blog posting section BUT on the title section. Smaller photos default to the left side of the column and not centering themselves. Any recommendations?

    Matt

    ReplyDelete
  73. What method are you using to display image in the Header (title)?

    ReplyDelete
  74. When a reader clicks on a photo I posted in a blog entry, it brings up the full size photo - as desired. How can I put a wrapper around that thumbnail photo so that when it expands to full size the background is black (as the main background color of the blog is) instead of blinding white ?

    ReplyDelete
  75. I don't think that is under our control as it is hosted in a different website.

    ReplyDelete
  76. Hi Peter -

    I have a question about photos in the sidebar.

    I would like to put side by side photos in the sidebar (like I see on so many blogs)what are linked. The only way I have seen to do this is with the photo gadget but that puts the photos vertically and I would like to have two side by side photos to not take up so much space. Can you tell me how to do this? And yes these are ad pics so they are hyperlinked.

    Thanks for your help with this. I am brand new to this so please explain as if to a child.

    Also another question while I'm at it: I would like to have a subscribe block with name and email that links to a downloadable static page. How is that done?

    Then one more. I want to use a horizontal navigation menu under the header with 3 tabs that are actually gadgets: one for translating the page, one for google search and then the 3rd one for the subscribe/download I asked about above.

    I know - I don't ask the easy ones.

    Thank you so much for your help.

    ReplyDelete
  77. Hi Deborah,

    All those questions that you asked are things I had been meaning to write about. So if you have the patience, wait a while till I find the time to do so.

    ReplyDelete
  78. Dear Peter,
    I see that there is a limit of 5 pictures for upload. I found that if you upload 5 then change your mind about one or two of the images, you cannot then upload again to replace those you have deleted. Is there any way around this?. Tonight I was unable to post a pic that was much better suited to the text...
    Amanda

    ReplyDelete
  79. Amanda: Limit of 5 photos, yes, but it is only for each upload. You can always click the photo upload icon to upload more up to 5 at a time.

    ReplyDelete
  80. Sorry Deborah, hope these answers are not too late for you:

    "I would like to put side by side photos in the sidebar"

    See How to display images side by side (to put in the sidebar, just use a HTML/Javascript gadget.

    "yes these are ad pics so they are hyperlinked"

    Then in addition to the <img> tag, surround them with the <a> tag as show in Make a clickable picture.

    "a horizontal navigation menu under the header with 3 tabs that are actually gadget"

    You can first add extra "add a gadget" under the header, then use a HTML/Javascript gadget and use <table> to layout 3 cells into which you will put the HTML for Make a clickable picture

    "subscribe block with name and email that links to a downloadable static page"

    Sorry don't understand. You will have to elaborate

    ReplyDelete
  81. Thanks for responding Peter. What I meant by that is a subscribe box that instead of going to an email or whatever is default in Blogger it goes to a static page (set up in a separate blog) to download. (Like a free report).

    Thanks

    ReplyDelete
  82. I did click the 'upload photo' icon but it refused to open the upload window again.

    ReplyDelete
  83. Try editing the post and clicking on the photo upload icon again.

    ReplyDelete
  84. Thanks very much for your advice, I have changed from the old post editor. I expect that will do it.

    ReplyDelete
  85. Oh!? Where is the 'upload video' button in the new post editor bar?

    ReplyDelete
  86. I, too, have a problem with Blogger refusing to post vertical pictures.

    I have solved the problem by using software to flip the image 90 degrees to the left before saving. Then when I upload, Blogger flips it again and it's correct.

    Make sense?

    ReplyDelete
  87. iam maintaining the blog...my blog is "Navabharat21.blogspot.com" how can i upload photos to my blog.Not in posts.i would like to upload photos on my hoe page of blog.

    ReplyDelete
  88. What is "hoe page of blog"?

    ReplyDelete
  89. Hi there. I've got a Christmas tree, and it is rotating it. I'm going to try Explorer.

    ReplyDelete
  90. Photobucket is great, i have used it for years, for several web pages.
    A problem with pictures in Blogger is that they are being rescaled, when uploaded trough the email feature. Something that caused a lot of problems for me initially. It is easy to edit them manually, for resizing, but when you post trough almost email, every day it is a lot of work.

    www.thequantportfolio.com

    ReplyDelete
  91. is there any way to upload images and blogger posts automatically. I want to upload post intraday graphs automatically to my blog http://bseintraday.blogspot.com is there any way to do that

    ReplyDelete
  92. My pics do not flow and although there is room I can't get them next to each other, this means there are big spaces between pictures especially if I want the text to flow around them. :( How do I fix that?

    ReplyDelete
  93. Do not choose CENTER or LEFT or RIGHT

    forgot what is that, perhaps NEIGHTER

    ReplyDelete
  94. can we upload a photos which i already uploaded in facebook to my blog....? pls help

    ReplyDelete
  95. It is not uploading that you need to do as you have already done that. What you need to do is to get the URL of that photo then use <img src="photo URL" width="some numbers" /> to display the photo.

    ReplyDelete
  96. Does anyone still check this question and answer page? I hope so. I used to be able to just drag and drop my images in the compose section, now I cannot. (I am just coming back to my blog after a 3 year break) When I use the html section and move the code it moves the image but if I add a caption to the photo it moves the image back to it's original place. It will not keep the image where I had repositioned it. I'm so frustrated. I can't get the pictures where I want them in my blog. Help!

    ReplyDelete
  97. I vaguely remembered something similar, but can't recall. Why don't you post to Blogger Help Forum where I am also Top Contributor. Someone may have come across a similar problem.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics