1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Lightbox thumbnail sizes

Lightbox thumbnail sizes

7 posts, 0 answered
  1. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    24 Jun 2008
    Link to this post
    Is there a way to change the photo gallery to show thumbnail's without scaling from the original source image?

    Essentially a client wishes to use the lightbox gallery feature in a project but they don't want thumbnails to be shown with different x and y sizes.
    They want all thumbnails to be of a fixed size regardless of the source image size and dimensions and they don't want any stretching of the image in the thumbnail.

    So my suggestion to avoid stretching is to show a window into the original image rather than a thumbnail so for instance instead of a thumbnail we'd show an 80 x 80 pixel area of the image.
    That area may just be blue sky or something but at least it won't be stretched and at least it will be the 80 x 80 or whatever thumbnail size.

    I can see how to set a limit on thumbnail height but since the intention is to show a fixed width and height image for each thumbnail this won't really be sufficient.

    Thanks for any info you can provide.

  2. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    24 Jun 2008
    Link to this post
    Is there anywhere I can set the thumbnail size? I'm thinking if I set the thumbnail size limit to a large value and then just cropped the image in the lightbox user control it would be sufficient.

  3. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    24 Jun 2008
    Link to this post
    It's OK, I have a solution to this now.
    I just set the thumbnail size in code when it's generated and then set a suitably large max height in the control which seems to work fine.
  4. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    24 Jun 2008
    Link to this post
    Well this is working to a point since I'm restricting the area size with div tags and adding a black background to mark the area, giving the impression of fixed thumbnail sizes.

    If theres a more complete solution which will allow a window into an image without stretching then this would be preferred.

  5. UI Crew
    UI Crew avatar
    99 posts
    Registered:
    24 Sep 2012
    25 Jun 2008
    Link to this post
    Hi Darren,

    There is a way you can do this using CSS. I will work with creating an image that is cropped to 80 x 80 pixels.

    Firstly you really need to get you img tag right and the dimensions you call in the img tag will depend on the majority of the images' aspect ratio. You can play with this yourself but for the purposes of this demo I will assume all images are 4:3 ratio and they will be in landscape or portrait which makes it a bit fiddly.

    If you set you image height and width to 110 and then your smallest side should end up 82px like this:


    <img src="http://www.funkyfriendsfactory.com/Libraries/Trial/Sunset-43.tmb?width=110&height=110&proportional=true&decreaseOnly=false" alt="Test" /> 



    Then by enclosing this in a div you should be able to crop the image using the overflow: hidden; property like this:

    <div class="imageCrop"
    <img src="http://www.funkyfriendsfactory.com/Libraries/Trial/Sunset-43.tmb?width=110&height=110&proportional=true&decreaseOnly=false" alt="Test" /> 
    </div> 

    Now in your stylesheet you need to add something like this:

    div.imageCrop {
    height: 80px;
    width: 80px;
    overflow: hidden;
    display: block;
    }

    Plus whatever other styling you want to include. This will make the image look as if it is cropped the only downfall being that it will crop from the top left corner rather than the middle of the image.

    If you know that all your images will be the same ratio and oriententation you can apply some extra style to centre the image:

    div.imageCrop img {
        position: relative;
        left: -15px;
        top: -1px;
    }

    The above will work only for a 4:3 in landscape though.

    Hope this helps,

    Seth
  6. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    26 Jun 2008
    Link to this post
    Hello

    Daren,
    You can either use the approach suggested by Seth or tweak the Lightbox core files, located in \[YourProject]\Sitefinity\ExternalLibraries\lightbox. These files contain all CSS declarations, javascript animations and images.

    Seth,
    Thank you for your helpful answer. We appreciate it and have updated your Telerik account.

    All the best,
    Georgi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    27 Jun 2008
    Link to this post
    Thanks for all this information, it worked a charm.
Register for webinar
7 posts, 0 answered