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

Forums / General Discussions / Image Gallery layout

Image Gallery layout

3 posts, 0 answered
  1. Calvin
    Calvin avatar
    1 posts
    Registered:
    16 Apr 2011
    28 Apr 2011
    Link to this post
    Hi guys I have added a image gallery to a page is there a way to limit the number of images per line... I have limited the the per page image number to 10 but the images are being listed 7 images per line which is overflowing into the right side column ... my question is how do i/can i change that to list the images at 5 per line
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    03 May 2011
    Link to this post
    Hello Calvin,

    There isn't built-in functionality to limit how much images per line to be shown. You can do this with CSS. The number of images per line is managed by the width of the parent container, so if you use the default widget template  (respectively the default css selectors) here is an example of how this can be controlled:

    /*//////////////////////////////////////////
    This is the parent of the images (ol)
    ////////////////////////////////////////*/
    ol.sf_listAndPage {
        position:relative;
        float:left;
        width: 100%; /*you can control the number of images per line by changing this width*/
        padding: 0px;
        margin: 0px;
        list-style: none
    }
     
    /*////////////////////////////////////////////////////////////////////////////////////
    These list items are holding the images (li)
    ////////////////////////////////////////////////////////////////////////////////////*/
    ol.sf_listAndPage li {
        position:relative;
        float:left;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    And here is the output of the above code:


    You can change the width of the container (the ol):

    ol.sf_listAndPage {
        position:relative;
        float:left;
        width: 400px;
        padding: 0px;
        margin: 0px;
        list-style: none
    }
     
    ol.sf_listAndPage li {
        position:relative;
        float:left;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    And the result should be less images per line:




    Best wishes,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Pedro
    Pedro avatar
    1 posts
    Registered:
    03 May 2011
    03 May 2011
    Link to this post
    How many images at most can be per line?







    parcel delivery

Register for webinar
3 posts, 0 answered