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

Forums / Developing with Sitefinity / resizing gallery images in single item view

resizing gallery images in single item view

8 posts, 0 answered
  1. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    11 Dec 2008
    Link to this post
    I'm only now starting to make use of the images & documents module, but it's been pretty handy so far! however one problem I've encountered is that there doesn't seem to be any way to resize the Single Item View image so that it doesn't break the layout. I've uploaded rather large sized images, since I want users to be able to download the full resolution, however when showing it on the screen I want it to fit inside the template...

    I found the property to change the Thumbnail image size, but none exists that I could find to change the Single Item size... I managed to create a workaround, but if I did this for nothing, and this functionality is built into the system, please let me know!

    Basically I just added a new UserControl into the /sitefinity/contenttemplates/libraries folder and copied and pasted everything from the GalleryListViewItemTemplate.ascx file into it. I modified it by wrapping a hyperlink around the image:

    <class="sf_singleImage">  
        <asp:HyperLink ID="lnk" runat="server">  
            <asp:Image ID="Img" runat="server" /> 
        </asp:HyperLink> 
    </p> 

    then in the code behind for this control I added the following:

    protected void Page_Load(object sender, EventArgs e)  
    {  
        lnk.NavigateUrl = Img.ImageUrl;  
        lnk.Target = "_blank";  
        Img.ImageUrl += "?width=520&height=350&decreaseOnly=true&proportional=true";  

    Finally, you need to Edit the ImageGallery control on your page and in the Advanced Tab change the value of ListViewItemTemplatePath

    from ~/Sitefinity/ControlTemplates/Libraries/GalleryListViewTemplate.ascx
    to ~/Sitefinity/ControlTemplates/Libraries/TEMPLATE.ascx

    where TEMPLATE is the name of the copied user control you created.

    now on the single item page, the image is sized inside the template, with a link to the full res item for downloading!

    By the way, I noticed that I had to set both width and height, otherwise the resize wouldn't work. I was hoping to be able to just set width, and have it automatically resize the height based on proprotion, but coudn't figure out how to do that.... what is the correct way to do this, or is it even possible?

    anyway, I hope this is helpful to someone, please let me know if there is a better way to do this! thank you!
  2. Parvan
    Parvan avatar
    151 posts
    Registered:
    24 Sep 2012
    15 Dec 2008
    Link to this post
    Hello SelArom,

    Your solution is good.
    In fact the templates (~/Sitefinity/ControlTemplates/Libraries/GalleryListViewTemplate.ascx)
    are related with arrangment of controls and can be customized to match required layout.
    The only thing is to be aware that templates are not as typical ascx controls - the code in the codebehind will not be executed. Templates are used to specify only the layout of controls. You can reorder controls but must preserve their IDs.

    Here you can find description for all query parameters for modification of returned images:
    http://www.sitefinity.com/help/developer-manual/libraries-extending-module.html
    if you set only width or height - for example:
      
    Img.ImageUrl += "?width=520";   

    image width will be changed to 520.

    Problem is that if you add additional parameters(decreaseOnly,proportional), they add restrictions which sometimes do not allow to change width to 520. For example if your image's width is 320 and you provider parameters:
    Img.ImageUrl += "?width=520&decreaseOnly=true";     
     
    Then width cannot be set to 540 because decreaseOnly is true.

    Kind regards,

    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    15 Dec 2008
    Link to this post
    that is strange because in my case the code behind IS being executed. in fact, I've replaced several control templates with standard user control pages complete with code-behind and the additional code always works. I realize that your system uses the ascx simply for layout purposes, but the code behind is executing on all of these instances.

    regarding resize, I did figure that out, but what I wanted to do was to have it proportionally resize the image based on the width. if it needs to go bigger or smaller either way is fine, as long as the width is exact, and the height is proportionally calculated and set correctly as well...

    thanks for following up with me!
  4. Parvan
    Parvan avatar
    151 posts
    Registered:
    24 Sep 2012
    15 Dec 2008
    Link to this post
    Hi SelArom,

    Yes - you are right.
    Both width and height must be specified for image to be resized.
    When using proportional=true, this will determine maximum space that can be occupied by an image.

    Kind regards,
    Parvan
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Emil
    Emil avatar
    6 posts
    Registered:
    25 Feb 2009
    06 Aug 2009
    Link to this post
    If the Image has a transparent background, this resizing method is turning the background black. Is there a solution to this?
  6. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    07 Aug 2009
    Link to this post
    Hi Emil,

    This is fixed as well for the next release. You will be able to get it in a week.

    Don't hesitate to contact us if you have other questions.


    Regards,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  7. Charles
    Charles avatar
    36 posts
    Registered:
    18 Apr 2011
    17 Oct 2011
    Link to this post
    Hi, I'd like to limit the size of the image also. Thing I'm facing is many users build up repository of images and then simply want to upload them.

    But when I go to look for the path in sitefinity 3.7 I can't find it or the same file names. Can I apply this solution to 3.7 or something simular?

    from ~/Sitefinity/ControlTemplates/Libraries/GalleryListViewTemplate.ascx
    to ~/Sitefinity/ControlTemplates/Libraries/TEMPLATE.ascx

  8. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    18 Oct 2011
    Link to this post
    Hi Charles,

    Yes, this solution in in fact for a 3.x project. Could you just elaborate on the images names? We do not change the names of the items, unless you change them after upload. Also, the files are persisted in the database by default.

    Regards,
    Georgi
    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
Register for webinar
8 posts, 0 answered