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
    2,011
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    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
    2,011
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    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
    2,011
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    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
  •