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

Forums / Designing with Sitefinity / Image Gallery Thumbnail Column Count

Image Gallery Thumbnail Column Count

11 posts, 0 answered
  1. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    31 Oct 2010
    Link to this post
    I have an image gallery on a page that is set to display all images of a library (about 22 items) and I want to have it display 3 columns of pictures in the gallery. Currently, with the thumbnail setting to 125px it displays 5 columns, which is what I would expect with the width of the gallery. If I change it to 250px I would expect it to show 3 columns; however, it still shows 5 but clips the image.

    Is this expected behavior?

    John
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    01 Nov 2010
    Link to this post
    Hello John Stewart,

    Thank you for using our services.

    We render the images' thumbnails as <li> elements of an <ol>. By default the count of the rendered items on one row depends on the width of the <ol> element - this elements inherits the width of its parent container. You can try manually defining width for the bellow classes to make it list fewer items:

    ol.sf_photoListLightbox, ol.sf_listAndPage, ol.sf_photoListBigImg {
    width:100%;
    }


    Greetings,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    01 Nov 2010
    Link to this post
    Radoslav,

    Thanks for the reply. I changed that; however, the problem remains. The width of the gallery changes and the column quantity changes but if I change the thumbnail size it still clips the thumbnails. It appears thumnail container width is about 150px. Anything higer than that clips the image. Is the somewhere that the thumbnail container width is defined.

    Thanks,
    John
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    01 Nov 2010
    Link to this post
    Hi John Stewart,

    Can you also try adding the bellow rule, or edit the width for the thumbnail image:
    ol.sf_photoListLightbox li dd.sf_image, ol.sf_listAndPage li dd.sf_image, ol.sf_photoListBigImg li dd.sf_image {
    height:250px;
    width:250px;
    }


    Kind regards,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    01 Nov 2010
    Link to this post
    Radoslav,

    That didn't work. The width had no effect. The height changed but it clipped the image height wise.

    Any other thoughts.

    Is there a place that I can set the column count?


    Thanks,
    John
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    01 Nov 2010
    Link to this post
    Hello John Stewart,

    As mentioned previously the column count is determined dynamically based on the container width. Most probably you have some other conflicting CSS rules coming from your theme.

    Kind regards,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    01 Nov 2010
    Link to this post
    Hello Radoslav,

    I created a new gallery page with an unchanged theme and removed any reference to my modified ascx file. (it is only slightly modified to add a description field)

    The thumbnails don't get clipped; however, they don't seem to size greater than 150px width. Is this a thumbnail size limit? If so, is there a way to change it? If not, I need to know.

    Thanks for all your help thus far.

    John
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    01 Nov 2010
    Link to this post
    Hi John,

    The ImageGallery control sets resize attributes inside SetListMetadata method. If you wan to change the size of the thumbs, you should override the SetListMetadata method as the sample below shows

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Libraries.WebControls;
    using System.Web.UI.WebControls;
     
    /// <summary>
    /// Summary description for ImageGalleryCustom
    /// </summary>
    public class ImageGalleryCustom : ImageGallery
    {
        public ImageGalleryCustom()
        {
        }
     
        public override string ItemListTemplatePath
        {
            get
            {
                return "~/Sitefinity/Admin/ControlTemplates/Libraries/Modes/GallerySimpleList.ascx";
            }
     
        }
     
     
        protected override void CreateChildControls()
        {
     
            galleryViewMode = GalleryViewMode.Simple;
            base.CreateChildControls();
             
        }
     
        // YOU NEED TO OVERRY TEMPLATE PROPERTIES TO SET YOUR TEMPLATE
     
        protected override void SetListMetadata(System.Web.UI.Control itemContainer, Telerik.Cms.Engine.IContent contentItem)
        {
            base.SetListMetadata(itemContainer, contentItem);
     
            switch(galleryViewMode)
            {
                case GalleryViewMode.Lightbox:
                case GalleryViewMode.BigImageAndList:
                case GalleryViewMode.ListDetails:
                    HyperLink downloadLink = itemContainer.FindControl("DownloadLink") as HyperLink;
     
                    if (downloadLink != null)
                    {
                        if (this.galleryViewMode != GalleryViewMode.Lightbox)
                            this.AddPersistenceToLink(downloadLink);
     
                        string url = contentItem.Url +
                            this.Manager.Provider.ThumbnailExtension;
                        if (this.ThumbnailMaxSize > 0)
                        {
                            url += "?width=" + this.ThumbnailMaxSize.ToString() +
                               "&height=" + this.ThumbnailMaxSize.ToString() +
                               "&proportional=false";
                        }
                        downloadLink.ImageUrl = ResolveUrl(url);
                        downloadLink.Text = contentItem.GetMetaData("AlternateText") as string;
                        if (this.galleryViewMode == GalleryViewMode.ListDetails)
                        {
                            downloadLink.NavigateUrl = GetItemUrl(contentItem, this.SingleItemUrl);
     
                            HyperLink titleLink = itemContainer.FindControl("Title") as HyperLink;
                            if (titleLink != null)
                            {
                                titleLink.NavigateUrl = downloadLink.NavigateUrl;
                                titleLink.Text = contentItem.GetMetaData("Name") as string;
                                this.AddPersistenceToLink(titleLink);
                            }
                        }
                        else if (this.galleryViewMode == GalleryViewMode.Lightbox || this.galleryViewMode == GalleryViewMode.BigImageAndList)
                        {
                            downloadLink.NavigateUrl = base.GetItemUrl(contentItem, null);
                            HyperLink titleLink = itemContainer.FindControl("Title") as HyperLink;
                            if (titleLink != null)
                            {
                                titleLink.NavigateUrl = downloadLink.NavigateUrl;
                                titleLink.Text = contentItem.GetMetaData("Name") as string;
                            }
                            downloadLink.ToolTip = contentItem.GetMetaData("Name") as string;
                        }
                    }
     
                    break;
            }
     
          
        }
     
        void AddPersistenceToLink(HyperLink ctrl)
        {
     
            if (ContentItemKeyPersistance == ItemKeyPersistanceMode.Cookie)
            {
                string script = String.Format("document.cookie = '{0}={1};expires={2};path=/'", ProviderNameImpl,
                                              ContentItemKey, DateTime.Now.AddMinutes(1).ToUniversalTime());
                ctrl.Attributes["onclick"] = script;
            }
     
            if (ReturnUrlPersistance == ItemKeyPersistanceMode.Cookie)
            {
                string script = String.Format("document.cookie = '{0}={1};expires={2};path=/'", "ReturnUrl",
                                              Context.Server.UrlEncode(Context.Request.RawUrl), DateTime.Now.AddMinutes(1).ToUniversalTime());
                ctrl.Attributes["onclick"] = script;
            }
        }
     
        private ImageGallery.GalleryViewMode galleryViewMode = GalleryViewMode.ListDetails;
    }

    Then set  ThumbnailMaxSize public property. You also have to modify the css class of the ImageGallery control as Rado suggested in one of his posts.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    02 Nov 2010
    Link to this post
    Thanks Ivan...I will give it a try.
  10. Steve .
    Steve . avatar
    14 posts
    Registered:
    14 Apr 2010
    10 Dec 2010
    Link to this post
    Does this indicate that the ThumbnailMaxSize property in the ImageGallery MISC section of the Advanced gallery properties control has no impact without having to manually edit the template and control code?

    Thanks,

    Steve
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Dec 2010
    Link to this post
    Hi Steve .,

    The thumbnail is re-sized by the handler - image is stretched to fit hardcoded values of 350 px which can be changed only if you use the code provided above.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
11 posts, 0 answered