Thursday, June 4, 2009

Sky

Some sky shots at the park as the sun was setting.




Posted by Joel MacKenzie at 8:00 AM
Labels: , , , ,

7 comments:

  1. HOLLYHOWEphotographyJune 5, 2009 at 10:48 PM

    hey joelmac! aka 'daddy' now!!! congrats to you too, my friend!!! :)))

    great photos as usual...love the cattail one at the end. fab work. question --how do i make my photos as big as yours?! i'd love to be able to do that. thanks!

    ReplyDelete
  2. Framing Images and MemoriesJune 6, 2009 at 10:03 AM

    Wonderful colors and composition. I love the road and the cattail image as well. And congrats on the new addition to your home!

    ReplyDelete
  3. Joel MacKenzieJune 11, 2009 at 7:39 PM

    I've been trying to reply to Holly's (jarojo) question, but have been having some trouble, kept getting errors. So I'll try to split it into smaller parts. Here goes...

    Making the images larger is kind of complicated, Blogspot doesn't make it real easy. Here's what I did:

    First you need to make the content area of the page wider so that larger pictures will fit. I chose 1000 pixels wide. I went into the settings, then the "Layout" tab, then clicked "Edit HTML" right under that. It may be a good idea to download the original template in the "Backup / Restore Template" section first, in case you mess something up. The "Edit Template" section has a text box that contains all the code used for the formating of the page. There's three places in the code where the width needs to change, they are the sections called:

    #header-wrapper
    #header .description
    #header-wrapper"

    You can use the find function in your browser (usually Ctrl+f) to more easily find those sections. Under each section find the "width" or "max-width" parameters and change them to "1000px". Then I changed the width in the "#main-wrapper" section to "750px". That's the main area of the page. The sidebar, "#sidebar-wrapper" section, was set to 220px. I think that's all I did in there, although it's been a while and I may have forgotten something. These instructions may only work if you're using the same layout template as me, which I think you are, Holly. Now hit the “Save Template” button at the bottom.

    The above only needs to be done once. The stuff below will need to be done for every impage you upload. You can get pretty quick at it after some practice.

    Before I upload photos I always scale them to the size I want them displayed at, normally 740 pixels wide for horizontally oriented images and 500 for vertically. This will make it a little easier later on, because I don't need to set the display size on Blogspot. Uploading smaller files will also save on space. Blogspot has a limited amount of space you can use, it's quite large, but it's shared with some other Google service I use, so I try to keep these files small. When I upload photos I always select "Center" and "Large" on the upload screen. After the upload is complete I go into the "Edit HTML" tab on the new post screen where you'll see something like this for each photo:

    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_qIGfTUZ1KRk/SiqoUEbJxyI/AAAAAAAAJag/DN8IAP9Rrp0/s1600-h/Reuben1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 266px;" src="http://2.bp.blogspot.com/_qIGfTUZ1KRk/SiqoUEbJxyI/AAAAAAAAJag/DN8IAP9Rrp0/s400/Reuben1.jpg" alt="" id="BLOGGER_PHOTO_ID_5344268970566993698" border="0" /></a>

    which is the code for the photo and a link to the full size photo.

    ReplyDelete
  4. Joel MacKenzieJune 11, 2009 at 7:47 PM

    (Part 2, see above)

    Since, for me, this is the full size, because I scaled it, there's no reason for the link, so I delete the link portion:

    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_qIGfTUZ1KRk/SiqoUEbJxyI/AAAAAAAAJag/DN8IAP9Rrp0/s1600-h/Reuben1.jpg">

    and the "</a>" at the end.

    So I'm left with just the code needed for the image, but it's still more then I need. It also contains code for the hand mouse icon (since it's no longer a link there's no need for that) and code for a smaller display size, since I scaled the photo this can also be deleted:

    cursor: pointer; width: 400px; height: 266px;

    The last step is to change the "s400" to "s1600". Blogspot resizes images and refers to the different sizes with this "s" code thing. This took a bit of tinkering to figure out, but it seems that s1600 is the full size. If you leave it at s400, you still only get an image 400 pixels wide.

    So you should be left with something like this:

    <img style="margin: 0px auto 10px; display: block; text-align: center;" src="http://2.bp.blogspot.com/_qIGfTUZ1KRk/SiqoUEbJxyI/AAAAAAAAJag/DN8IAP9Rrp0/s1600/Reuben1.jpg" alt="" id="BLOGGER_PHOTO_ID_5344268970566993698" border="0" />

    That's it!

    The jumbled up alphanumeric codes on every photo will be different, this is just to give you an idea. There's probably more that could be removed, like, I don't know what Blogspot does with the id, but this is what I do. I hope this make some sense and I didn't forget anything, let me know if you have questions, or it doesn't work.

    ReplyDelete
  5. HOLLYHOWEphotographyJune 12, 2009 at 10:46 PM

    hey!!!! thanks joelmac!!!! you rock! a lot here makes NO sense to me WHATSOEVER, so i'll get joe to follow your instructions. :) thank you again.

    have a good night with reuben & jules. how'd my casserole turn out?! be nice. ;D

    ReplyDelete
  6. rainstormJune 13, 2009 at 11:10 AM

    Lovely pictures you got here & congratulations to the new bundle of joy !

    ReplyDelete
  7. Joel MacKenzieJune 13, 2009 at 3:34 PM

    Holly:

    The casserole was wonderful! Thanks a lot!

    ReplyDelete

Subscribe to: Post Comments (Atom)