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

Forums / General Discussions / Any Photo Gallery Tutorial Guide or Video

Any Photo Gallery Tutorial Guide or Video

6 posts, 0 answered
  1. Spelman College
    Spelman College avatar
    18 posts
    Registered:
    28 Dec 2010
    15 Feb 2012
    Link to this post
    Does a video or written tutorial exist for configuring the photo gallery? We were hoping that its out-of-the-box layout would be intuitive to set up but are experiencing otherwise.

    When choosing "Thumbnails + Overlay (lightbox)" from the Gallery Type options and selecting the desired gallery, the resulting layout is not a neat grid with uniformly sized thumbnails as we'd expect might be the default layout (screenshot attached). It's a bulleted list styled layout with erratically sized thumbnails. (the lightbox effect does work though)

    When choosing "Thumbnail strip + Image on the same page", we receive an error message when previewing the page. (screenshot attached)

    Our questions are:
    isn't there an out-of-the-box layout that provides an acceptable presentation of a collection of images?
    how, in simplistic terms, can we achieve a gallery that is useful?

    Thanks in advance. Any help is appreciated.


  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    17 Feb 2012
    Link to this post
    Hello Ingrid,

    Thank you for contacting Telerik Support.

    I believe the problem you have with the image gallery when in "Thumbnails + Overlay (lightbox)" mode, is related to lack of required css styles. If you post the URL of the page, where your gallery is located, I will be able to inspect it further and find out which styles are actually missing.

    As for your second problem with "Thumbnail strip + Image on the same page", have you by chance mapped the template for this gallery view? It seems that a control is missing for the template, which is required for its proper functioning.

    Kind regards,
    Jen Peleva
    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. Sally
    Sally avatar
    2 posts
    Registered:
    22 Jul 2013
    16 Mar 2014
    Link to this post

    This is exactly the issue I am having on our site.  I simply don't know how to format the gallery so that the thumbnails are arranged nicely, and I don't see any option to change the layout.  This is my page http://trinity-services.1boc.net/overview/leadership/Action/Edit

     

  4. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    17 Mar 2014
    Link to this post

    Dear Sally

     As soon as you apply your own theme to a template you will loose all out of the box css.

     I usually have a test pages with the basic theme asigned to it and then use firebug to take me to the css and copy what I need.

     I usually do not copy everything but go step by step so I don't copy stuff I dont need.

     There is always http://www.sitefinity.com/documentation/documentationarticles/designer-s-guide/css-classes-reference 

    http://www.sitefinity.com/documentation/gettingstarted/designer-s-guide/css-classes-reference/image-gallery-widget

     as a help, starting point.

     Here is some css as starting point 

    .sfimagesTmbList .sfimagesTmb
     
    {
        border: 1px solid #e0cabc;
        display: inline-block;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        vertical-align: bottom;
        margin-bottom:20px;
       margin-left:20px;
    -webkit-box-shadow:  1px 1px 5px 0px rgba(00, 00, 00, 0.2);
    box-shadow:  1px 1px 5px 0px rgba(00, 00, 00, 0.2);
    }
    .sfimagesTmbList.sfLightboxMode
    {
        padding-left:0px;
        padding-top:5px;
        margin-bottom:-30px;
        }
     .sfLightBox img
    {
        border:0px;
    }
     
    .sf_pagerNumeric
    {padding-left:5px;
     margin-top:30px;
    }
     
    .sf_PagerCurrent {
         
        font-weight:bold !important;
         background-color: #7e5d4a;
        text-decoration:none;
        color: #FFFFFF !important;
         
    }
     
     
    .sf_pagerNumeric a {
        -moz-text-blink: none;
        -moz-text-decoration-color: -moz-use-text-color;
        -moz-text-decoration-line: none;
        -moz-text-decoration-style: solid;
     font-size:0.6em;
        color:#7e5d4a ;
        margin-right: 5px;
        padding-bottom: 3px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 3px;
    }

     Markus

  5. Kaloyan
    Kaloyan avatar
    11 posts
    Registered:
    19 Sep 2016
    19 Mar 2014
    Link to this post
    Hello Sally,

    Can you give us more detailed explanation of what exactly you want to achieve. Did the Markus's suggestion helped you out in resolving your issues?

    Regards,
    Kaloyan
    Telerik
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  6. Sally
    Sally avatar
    2 posts
    Registered:
    22 Jul 2013
    18 Jun 2014 in reply to Kaloyan
    Link to this post
    The developer we were working with resolved the issue with our template.  Thanks for your support as well.
6 posts, 0 answered