Need help? Check out our Support site, then


WordPress.com Forums » Support

Photos won't stay the same size

  1. bakearama
    Member

    http://bakearama.wordpress.com/photo-gallery/

    I have set up this page, which a photo from each of my posts, and clicking on the photo links back to the post.

    In the editor I have made all the photos the same size (height 112 pixels) but when you view the page they are not!

    What is making them appear as different sizes please?

    NB - am i right in thinking I can't do gallery on this page? Because they are photos already uploaded, i.e. from the media gallery, I don't specifically 'add files' for the post, so I can't gallery them - is that right? (the option certainly doesn't seem to appear anywhere)

    The blog I need help with is bakearama.wordpress.com.

  2. justjennifer
    Member

    Is this resolved? What I'm seeing is all images on that page are 112 pixels in height.

    Yes, you can use the Gallery feature, but you will not be able to link the photos to the posts, only image captions. And be forewarned that if you add captions to the thumbnails on this page, the caption will also show up wherever else the image shows.

    To display images already uploaded in the Media Library, you need to use "includes". This is OK for a limited number of images, but if you have a lot, as you do, you might consider uploading again a smaller version of the same image. This will also get around the image captions appearing the same in all places problem I mentioned above.

  3. bakearama
    Member

    So they all show up as the same size when you look at it? As they are all different and all over the place on all my browser versions.

    I'd like to try the Gallery with just the photos, but can't quite find the right html to start it off - presumably the "includes" need to come after I've already instructed it to set up the Gallery?

  4. justpi
    Member

    "they are all different and all over the place on all my browser versions."
    Smells like Explorer...
    You can try a more foolproof way of specifying the dimensions. Switch the editor to "Text" (=code) and change the image codes from this:
    <img class="ETC ETC ETC" width="WWW" height="HHH" />
    to this:
    <img style="width:WWWpx;height:HHHpx;" class="ETC ETC ETC" />

  5. bakearama
    Member

    Perfect, thank you!

    PS it was firefox AND explorer... maybe some of our office settings?

    NB - if anyone's reading this to try and do the same thing, I selected all the text in the "Text" editor, copied it over to MS Word, did a find and replace for "img class" to "img style" and copied it all back to WP :-)

  6. justpi
    Member

    You're welcome, but... ? You've done nothing of the sort here:
    http://bakearama.wordpress.com/photo-gallery/
    The only difference is you centered the rows.

  7. bakearama
    Member

    Oh, really? I did the find & replace as above and it fixed it on my machines - do you see them all as the same size?

    There was a lot of coding after the "img class" that I didn't want to mess with - i only know a little bit of html!

    But now i've been back - it doesn't have that in at all! Help...? :-)

    "<img title="chocolate and fudge chunk muffins caramel buttercream" src="http://bakearama.files.wordpress.com/2012/08/chocolate-and-fudge-chunk-muffins-caramel-buttercream.jpg?w=150" alt="" width="150" height="112" />"

    (this is what it now contains for each photo)

  8. justpi
    Member

    I see them all the same height - but that's the way I saw them from the start (Safari and Firefox, on a Mac).

    What I suggested couldn't be done by find and replace all, because each image has a different width. And you didn't pay close attention to the model I pasted: you weren't supposed to replace class, you were supposed to insert style etc between img and class, and remove the width and height indications at the end of each image code. To use the example you pasted now, you should have changed this:
    <img ETC ETC width="150" height="112" />
    to this:
    <img style="width:150px;height:112px;" ETC ETC />

    What happened is that the result you produced was invalid, so the editor stripped out the invalid parts. But it seems that removing the class strangely made your browsers understand better; so if things look ok in your machines better leave things as they are!

  9. bakearama
    Member

    Oh I see, sorry for not following instructions! I couldn't figure out where the ETC ETC would go, so I thought I'd try it a bit at a time and what I did seemed to work.

    I'll keep an eye on it, and if it starts looking wrong again will behave and go through and code it properly :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags