Your photo gets cut off when you publish a post in blogger? Well Mel at from-little-things has been having this problem and was looking for some help so I decided I'd do a 'how to' post on how to fix it.
When I post a photo on my blog I usually load it from my flickr stream using the html code. Like this:
1. Click the 'all sizes' (red arrow) option on your photo
2. Choose the medium size option (red arrow) and copy the html code at the bottom (green arrow)
3. Paste the code into your post in the Edit HTML tab of a new post...
4. You should end up with something like this...
Remember in step 2 when I asked you to click on the 'medium' option in Flickr? If you look closely you'll notice that under the word medium it tells you how wide and high your photo is...
5. If you look closely at the html you will find that the height and width of the photo is included...(click on photo for larger view)
6. The width of the photo in this example is 500 pixels. This means it is 100 pixels wider than the width of the 'main wrapper' (the post part) of the blog. This means I need to change the width to 400 and the height to 275 (what you do to one you need to do to the other or else it will warp your photo).
7. Next click on the 'compose' tab and you'll see your photo.
8. Compose your post as you would normally and publish. Hopefully your photos now all fit!!
IMPORTANT:
These instructions also follow my method of posting photos. Not everyone does it this way. I do it this way because I've had trouble loading my photos from time to time and this is a sure fire way of guaranteeing success.
If you load a photo through a web link or from your own computer you can still adjust the width of the photo in the html. If you click on the edit html and find the photo code it will have the width and height included.
These instructions are for a 400 pixel wide post area. Depending on the template you use, this may be smaller or larger. You will need to know the width of your post area and adapt these instructions accordingly.
Photos need to be larger than the width of your blog post area for this method to work. Resizing smaller pictures into larger ones makes them pixelated.
When selecting a photo to use make sure you select the photo size closest to the width size of your 'main wrapper' (the post part) of your blog. The larger the photo, the harder it is to control the warping when you adjust the height. I have taken 100 pixels off both the width and height in this example but sometimes you need to take less off the height (e.g 75 not 100).
As I mentioned earlier you can overcome doing all of this nearly everytime you post by editing the html in the template you use. There are a number of tutorials online that walk you through this process. I recently added a third column to my blog, widened the main body, wrapper and margins and used this site to do it...
Good luck - hope I've helped.
***I've added a new 'how-to' box to the left hand side column so if you are in need of using these instructions in the future they will be easy to find***
8 comments:
OH - MY -GOD! You genius! Yet another bind you have removed me from Melanie! Champion!
this is a great guide, will have to save it for a time when i have had less Sat night wine so that i can try it out. BTW i love your wuppies, and i don't mean to be too personal but does gramps have a hernia or is he just happy to see me :*
I just watched your Wuppet Show, the dolls are so detailed! I kept getting embarrased for them being nude on the internet.
They are a little rude aren't they? Sometimes I feel embarrassed about them too. I should bring them out at the next Northside Makers do. I always carry them with me just incase. I am going to draw up a pattern for them over the next few weeks, gotta get the fishing game out first though. It'll be fun seeing what everyone else makes!
Thank you dear Mel. Glad to be of help
"(what you do to one you need to do to the other or else it will warp your photo)"
Actually what you want to do is change the ratio. You can't just minus 100 from both or your image will be warped. If you want to change the width to 400 the height should therefore be 300 not 275. That maintains the 4:3 ratio.
500x375 is a 4:3 ratio... 240x180 is also a 4:3 ratio. You'll find most photos work to this, so unless you have cropped your photos to a different ratio before uploading to flickr this is a good rule to stick to.
What I do is just use the "small" image that flickr creates using this exact same method because it is a pre-saved flickr photo. Therefore you are loading only what you need and not artificially shrinking a larger photo with the width settings.
(my job is in web design, hope this tip helps)
Oh... how to work out your ratio with any width...
height = width divided by 4, times by 3
Thank you so much for this! I am not much of a maths person nor do I really know anything about web design. I am self taught and have learnt through experimentation with fiddling with the html code. But it's fantastic to have a formula to go by. Thank you very much. I will change my instructions so I don't lead anyone astray!!
Post a Comment