Results 1 to 6 of 6

Thread: crop images to display thumbnails the same size

  1. #1
    Join Date
    Nov 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default crop images to display thumbnails the same size

    I have thumbnails that are using the Tom Muck horizontal looper.
    however the uploader that i have used only scales the images from their orginal size so when the thumbs are displayed they are all different sizes, Is there a way that i can have them all the same size, i have used lightroom to display larger images as the gallery

    here is what i have

    PHP Code:
    <table>
                <tr>
                  <?php
    $rsCakesSelect_endRow 
    0;
    $rsCakesSelect_columns 4// number of columns
    $rsCakesSelect_hloopRow1 0// first row flag
    do {
        if(
    $rsCakesSelect_endRow == 0  && $rsCakesSelect_hloopRow1++ != 0) echo "<tr>";
       
    ?>
                  <td valign="top">
                  <p><a href="images/uploads/cakes/<?php echo $row_rsCakesSelect['cakeImage']; ?>" rel="lightbox[<?php echo $row_rsCakesSelect['cakeCatID']; ?>]" title="<?php echo $row_rsCakesSelect['cakeTitle']; ?>"><img src="images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>"/></a></p></td>
                  <?php  $rsCakesSelect_endRow++;
    if(
    $rsCakesSelect_endRow >= $rsCakesSelect_columns) {
      
    ?>
                </tr>
                <?php
     $rsCakesSelect_endRow 
    0;
      }
    } while (
    $row_rsCakesSelect mysql_fetch_assoc($rsCakesSelect));
    if(
    $rsCakesSelect_endRow != 0) {
    while (
    $rsCakesSelect_endRow $rsCakesSelect_columns) {
        echo(
    "<td>&nbsp;</td>");
        
    $rsCakesSelect_endRow++;
    }
    echo(
    "</tr>");
    }
    ?>
              </table>
    thanks in advance

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    I'm not really sure what you're saying. Can you not just set an explicit size in the img tag?
    Code:
    <img src="images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>" height="100" width="150" />
    If your asking how to resize the images during upload, here are some resources that might help: http://www.google.com/m?q=resize%20i...ing%20in%20php
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Nov 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    I'm not really sure what you're saying. Can you not just set an explicit size in the img tag?
    Code:
    <img src="images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>" height="100" width="150" />
    If your asking how to resize the images during upload, here are some resources that might help: http://www.google.com/m?q=resize%20i...ing%20in%20php
    no i cant do that because it will distort the images.

    i need to just show part of the image as a thumbnail so if the image uploaded isnt the correct size it wont matter and it will just show what it can as the thumbnail. I was going to set a div with a size of say 200 X 200 and then maybe set the thumbnail image as the background to that div then make that div a link to the large image..but thats tricky

    make sense?

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    That sounds like it would work - something like;
    Code:
    <div style="background:url(images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>) 50% 50% no-repeat; width:200px; height:200px;"></div>
    of course I don't know how big the thumbnail pics are so centering them into the background like that might cause some strange looking results. Give it a try though.

    You might also like to play around with some CSS3 background sizing to try and create a "best-fit" scenario - "background-size:contain;" looks like it could be of use to you. http://www.sitepoint.com/css3-background-size-property/ Just bear in mind that IE8 and lower wont recognise this CSS3 property.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Nov 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    i have sorted by problem to a certain extent

    <style type="text/css">
    .crop{
    height: 200px;
    width: 200px;
    overflow:hidden;
    margin: 5px;
    }

    </style>

    <a href="images/uploads/cakes/<?php echo $row_rsCakesSelect['cakeImage']; ?>" rel="lightbox[<?php echo $row_rsCakesSelect['cakeCatID']; ?>]" title="<?php echo $row_rsCakesSelect['cakeTitle']; ?>"><div class="crop"><img width="200" src="images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>"/></div>


    however the picture is showing from the top left and i need them to display the centre of the picture. can this be done?

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    If you remove reference to the img tag and set the pic as a background image on the .crop div instead, as described in my post above, the 50% 50% background positioning shorthand will take care of horizontal and vertical centering of your thumbnail image.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    jonnyfreak (03-05-2013)

Similar Threads

  1. FrogJS script not working, only thumbnails display.
    By WebDizzy777 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-19-2012, 06:44 PM
  2. Replies: 2
    Last Post: 12-14-2011, 03:00 AM
  3. Create thumbnails for images
    By Sliight in forum Graphics
    Replies: 8
    Last Post: 04-20-2010, 12:11 PM
  4. Content Slider does not display thumbnails in Firefox 3.0
    By lc.tran@advantest.com in forum JavaScript
    Replies: 0
    Last Post: 06-02-2009, 10:04 PM
  5. Recommended size for photos/thumbnails?
    By N L Kerr in forum Graphics
    Replies: 3
    Last Post: 03-17-2008, 10:25 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •