More in this section

Forums / Developing with Sitefinity / Image Gallery Customization

Image Gallery Customization

18 posts, 0 answered
  1. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    28 May 2009
    Link to this post
    Hello,

    I can not seem to be able to modify the Image Gallery control. I do not see any .css reference. There is a file refered to as librariesCommonLayout.css in the FAQs for 3.5 but I can't find this. Any help besides "everything is embedded now"

    Thanks,
    John
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    28 May 2009
    Link to this post
    Hello John Stewart,

    1. The templates are embedded since version 3.6 and you need to map the external one in case you want to modify them.
    2. Then in each template you want to modify you can add CssFileLink control and specify the path to your css file.

    <%@ Register TagPrefix="ff" Namespace="Telerik.Cms.Web.UI" Assembly="Telerik.Cms.Web.UI" %> 
     
    <ff:CssFileLink ID="CssFileLink1" Media="screen" runat="server" FileName="~/Sitefinity/ControlTemplates/[Provider]/Layout.css" /> 

    Sample layout.

    /* List and page & Lightbox */ 
    ol.sf_photoListLightbox, ol.sf_listAndPage 
        margin: 0; 
        padding: 0; 
        width: 100%; 
        floatleft
        list-stylenone
        line-height: 1.3; 
        clearboth
    .sf_postDate  
        margin: 0; 
        padding: 0; 
        font-size: .85em; 
        color#666
    * html .controlWrapperSel ol.sf_photoListLightbox, * html .controlWrapper ol.sf_photoListLightbox  
        floatnone
    ol.sf_photoListLightbox li, ol.sf_listAndPage li 
        margin: 0 10px 0 0; 
        padding: 0; 
        width150px
        height: 17.6em;  
        overflowhidden
        floatleft
    ol.sf_photoListLightbox li dl, ol.sf_listAndPage li dl 
        margin: 0; 
        padding: 0; 
    ol.sf_photoListLightbox li dt, ol.sf_listAndPage li dt 
        margin: 0; 
        padding: .3em 0 0; 
        font-weightbold
        font-size: 1.3em; 
        font-size: .9em; 
    ol.sf_photoListLightbox li dd, ol.sf_listAndPage li dd 
        font-size: .85em; 
        margin: 0; 
    ol.sf_photoListLightbox li dd.sf_tags, ol.sf_listAndPage li dd.sf_tags 
     
    ol.sf_photoListLightbox li dd.sf_image, ol.sf_listAndPage li dd.sf_image 
        margin: 0; 
        padding: 0; 
        width150px
        height150px
        overflowhidden
        positionrelative
    ol.sf_photoListLightbox li dd.sf_image img, ol.sf_listAndPage li dd.sf_image img 
        vertical-alignbottombottom
        positionabsolute
        left: 0; 
        bottombottom: 0; 
    /* Simple photo list */ 
    ol.sf_photoListSimple  
        margin: 0; 
        padding: 0; 
        list-stylenone
        line-height: 1.3em; 
    ol.sf_photoListSimple li 
        margin: 0 0 2em; 
        padding: 0; 
        font-size: .9em; 
    ol.sf_photoListSimple dl 
        margin: 0; 
        padding: 0; 
    ol.sf_photoListSimple dt 
        font-weightbold
        font-size: 1.3em; 
    /* Photo per page */ 
    p.sf_singleImage  
         
    p.sf_singleImageCaption 
    ul.sf_singleImageData  
        margin: 0 0 20px
        padding: 0; 
        list-stylenone
    ul.sf_singleImageData li 
        margin: 0; 
        padding: 0; 
        font-size: .9em; 
        list-stylenone
    /* Table mode */ 
    table.sf_libraryGrid  
        margin: 0; 
        padding: 0; 
        border-collapsecollapse
        line-height: 1.3; 
    table.sf_libraryGrid th, table.sf_libraryGrid td 
        padding10px 5px
        vertical-aligntop
        text-alignleft
        border-top1px solid #ccc
        text-alignleft
        font-size: .85em; 
    table.sf_libraryGrid td  
    table.sf_libraryGrid .sf_date, table.sf_libraryGrid .sf_size  
        whitewhite-spacenowrap
    table.sf_libraryGrid tbody th 
        font-weightnormal
        width: 40%; 
    table.sf_libraryGrid th a 
        displayblock
        font-weightbold
    /* List mode */ 
    ol.sf_libraryList 
        margin: 0; 
        padding: 0; 
        line-height: 1.2; 
    ol.sf_libraryList li 
        margin: 0 0 20px
        padding: 0; 
        list-stylenone
    ol.sf_libraryList dl  
        margin: 0; 
        padding: 0; 
    ol.sf_libraryList dt  
        margin: 0; 
        padding: 0; 
        font-weightbold
    ol.sf_libraryList dd 
        margin: 0; 
        padding: 0; 
        font-size: .85em; 
    ol.sf_libraryList .sf_fileExtension  
        text-transformuppercase
        font-weightnormal
    /* Pager */ 
    ol.sf_pager  
        margin10px 0; 
        padding: 0; 
        width: 100%; 
        floatleft
        list-stylenone
        clearboth
    ol.sf_pager li 
        margin: 0; 
        padding: 0 10px 0 0; 
        widthauto
        floatleft
    ol.sf_pager li a 
        padding3px 5px
    ol.sf_pager li a[disabled="disabled"], ol.sf_pager li a.sf_PagerSelItem 
        color#666
        text-decorationnone
        cursordefault

    Let us know if there is anything else that we can do for you.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    28 May 2009
    Link to this post
    Thank you Ivan.

    Is there a place in the help files or elsewhere I could have found this information out. Where does one get the external css files?

    Thanks,
    John
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    28 May 2009
    Link to this post
    Hello John Stewart,

    Please take a look at the following KB article How to map a view to an external template, in Sitefinity 3.6 or later?

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    28 May 2009
    Link to this post
    Hello Again,

    I must be missing something here. How do I get the css files for the templates. It seems came up with the sample layout below from somewhere, but where? I don't see it in any of the template files I downloaded.

    Thanks,
    John
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    30 May 2009
    Link to this post
    Hi John Stewart,

    The css files are not included in the external templates zip. I am sending you attachment with all css sample files that you can use.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    30 May 2009
    Link to this post
     I have added the Image Gallery templates to the configuration file as follows. I also copied the templates into the appropriate directory; however, any changes, including deleting all lines from the template source does not change anything.

    What am I doing wrong?

    Thanks.

    <?

     

    xml version="1.0" encoding="utf-8"?>

     

    <

     

    controlsConfig>

     

    <

     

    viewMap>

     

    <

     

    viewSettings hostType="Telerik.Libraries.WebControls.ImageGallery">

     

    <

     

    additionalTemplates>

     

    <

     

    add key="ItemListTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/Libraries/GalleryListView.ascx" />

     

    <

     

    add key="SingleItemTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/Libraries/GalleryListViewItem.ascx" />

     

    </

     

    additionalTemplates>

     

    </

     

    viewSettings>

     

    </

     

    viewMap>

     

    </

     

    controlsConfig>

     


  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    30 May 2009
    Link to this post
    Hello John Stewart,

    Open the ImageGalley control in edit mode. Then click on Advanced tab. Scroll down to template Paths category and set the templates using the web editor "Select" buttons.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. John S.
    John S. avatar
    126 posts
    Registered:
    09 Aug 2004
    30 May 2009
    Link to this post
    Thanks for the quick response.

    Where can I find the Light Box template?
  10. Stoyanka Assenova
    Stoyanka Assenova avatar
    113 posts
    Registered:
    01 Dec 2016
    01 Jun 2009
    Link to this post
    Hi John Stewart,

    You need to locate the GalleryLightboxList.ascx file and depending on the version, there are different paths:

    If you are using Sitefinity 3.6 SP1 or Sitefinity 3.6 SP2, you can find "Lightbox" template in the following path:
    ~/Sitefinity/Admin/ControlTemplates/Libraries/Modes folder

    If you are using Sitefinity 3.6, you can find the "Lightbox" template in the following path:
    ~/Sitefinity/ControlTemplates/Libraries folder

    Let us know if you need further help.

    Sincerely yours,
    Stoyanka Assenova
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  11. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    12 Jun 2009
    Link to this post
    why doesn't the mapping in the configuration file work? I have several image galleries and it would be great to be able to remap in one location as opposed to going into every single one...
  12. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    12 Jun 2009
    Link to this post
    Hi SelArom,

    You can map the templates through ~/Sitefinity/Admin/ControlTemplates/Libraries/ImageGalleryControlDesigner.ascx instead of working with the properties of the control. More information for mapping the presentation modes can be found at blogs.sitefinity.com

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  13. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    12 Jun 2009
    Link to this post
    okay that works, unfortunately it seems that all this does is automate the selection of the external template when the type of gallery is selected.

    this still requires that I go into each gallery and set the lightbox template. The only thing this saves me is having to go into the advanced tab and selecting the template...

    is there any way to automatically map the lightbox template to my external template directly at that level?
  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    12 Jun 2009
    Link to this post
    Hello SelArom,

    If you change the PresentationMode ID="Lightbox" in the ImageGalleryDesigner you will have your custom template on each instance of the ImageGallery control.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  15. Sarah Masood
    Sarah Masood avatar
    19 posts
    Registered:
    18 May 2010
    22 Jun 2010
    Link to this post
    hi

    i want to change default templeate of image gallary .as i dont need the name of image and want to apply stlye sheet on pager,.i try to add acx file in ~/Sitefinity/ControlTemplates/ImageGallary/imageGallrystlye.ascx ,and add it in Itemlist template in desingView, but image gallry stil have image name displaing and pager is not in format that i define ,
    Need Help


  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    22 Jun 2010
    Link to this post
    Hello Sarah Masood,

    The template has not been mapped properly or your styles do not apply. You could add CssFileLink to add reference to your stylesheet or add the css classes inside the theme stylesheet. You can gather more information at How to apply custom style sheets to Sitefinity Content View controls

    Sincerely yours,
    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
  17. Sarah Masood
    Sarah Masood avatar
    19 posts
    Registered:
    18 May 2010
    22 Jun 2010
    Link to this post

    Hi
    i dont know what to define in .Ascx file for image gallary ,
    i define this in my ascx file 

     

    <%

     

    @ Control Language="C#" %>

     

    <%

     

    @ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %>

     

    <%

     

    @ Register Assembly="Telerik.Libraries" Namespace="Telerik.Libraries.WebControls"

     

     

     

     

     

     

     

     

    TagPrefix="asp" %>

     

     

     

     

     

    <

     

     

    asp:Repeater ID="repeater" runat="server">

     

     

     

     

     

     

     

     

    <HeaderTemplate>

     

     

     

     

     

     

     

     

    </HeaderTemplate>

     

     

     

     

     

     

     

     

    <ItemTemplate>

     

     

     

     

     

     

     

     

    <asp:ImageGallery ID="ImageGallery" runat="server" ItemsPerPage="1">

     

     

     

     

     

     

     

     

    </asp:ImageGallery>

     

     

     

     

     

     

     

     

     

    </ItemTemplate>

     

     

     

     

     

     

     

     

    <FooterTemplate>

     

     

     

     

     

     

     

     

    </FooterTemplate>

     

    </

     

     

    asp:Repeater>

    and in design mode i change ItemListpath so,result screen is Attached (named BadScreen :p)
    and the look of image gallary i want is Attaches named goodScreen
     

     

     

  18. Sarah Masood
    Sarah Masood avatar
    19 posts
    Registered:
    18 May 2010
    23 Jun 2010
    Link to this post
    Hey ,thanks foe all your help , moe dont have external template , that blog help me a lot thanks again
Register for webinar
18 posts, 0 answered