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

Forums / Developing with Sitefinity / News Thumbnail Resizing

News Thumbnail Resizing

14 posts, 0 answered
  1. Simon
    Simon avatar
    31 posts
    Registered:
    01 May 2009
    02 Jun 2009
    Link to this post
    Hi,
    I am using the external news template ListPageMaster.ascx to display a list of news stories with a summary and thumbnail.
    What is the best way to have these thumbnail images automatical resize?
    I have seen in previous posts that you can add size information to the image url, however I'm not sure how to go about appending that to the thumbnail within the template.
    The only code that relates to the thumbnail is:
    <asp:PlaceHolder ID="ThumbnailHolder" runat="server">  
       <class="sf_newsThumbnail"><asp:Image ID="Thumbnail" runat="server" /></p>  
    </asp:PlaceHolder> 
    And as this is an exteranl template I can't access the code behind file.

    Many thanks.

    Simon
  2. Dido
    Dido avatar
    149 posts
    Registered:
    24 Sep 2012
    04 Jun 2009
    Link to this post
    Hi Simon,

    While it is true that you can not access Sitefinity's code for this control, you can still add a code-behind for every template for quick modification.

    Here are the changes I made to make it work:
    markup:
    <%@ Control Language="C#" CodeFile="ListPageMaster.ascx.cs" AutoEventWireup="true" Inherits="ListPageMaster"%> 

    code-behind:
    using System; 
    using System.Collections.Generic; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
     
    public partial class ListPageMaster : UserControl 
        protected void Page_Load(object sender, EventArgs e) 
        { 
             
        } 
     
        protected override void OnPreRender(EventArgs e) 
        { 
            base.OnPreRender(e); 
     
            List<Image> thumbnails = new List<Image>(); 
            this.FindControlsRecursive<Image>(this"Thumbnail", thumbnails); 
     
            foreach (Image thumbnail in thumbnails) 
            { 
                if (thumbnail != null
                { 
                    this.ImageResize(thumbnail, 10, 10); 
                } 
            }        
        } 
     
        private void FindControlsRecursive<T>(Control root, string id, List<T> result) where T : Control 
        { 
            if (root == null
            { 
                return
            } 
     
            Control firstLevelResult = root.FindControl(id); 
            if (firstLevelResult != null && firstLevelResult is T) 
            { 
                result.Add(firstLevelResult as T); 
            } 
     
            foreach (Control childControl in root.Controls) 
            { 
                this.FindControlsRecursive<T>(childControl, id, result); 
            } 
        } 
     
        private void ImageResize(Image image, int desiredWidth, int desiredHeight) 
        { 
            // this will work always, but doesn not really cut the image, simply makes it appear so 
            image.Width = Unit.Pixel(desiredWidth); 
            image.Height = Unit.Pixel(desiredHeight); 
             
            // if all your thumbnails were inside the Images&Documents library, it would be better to 
            // use this, instead: 
            image.ImageUrl += String.Format("?width={0}&height={1}", desiredWidth, desiredHeight); 
        } 
     


    All the best,
    Dido
    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. David Meyer
    David Meyer avatar
    13 posts
    Registered:
    29 Oct 2009
    10 Dec 2009
    Link to this post
    Is there a way to have sitefinity save a thumbnail to a particular size when it gets uploaded? I dont want to resize the thumbail on the page.
    Thanks
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Dec 2009
    Link to this post
    Hello David Meyer,

    There is a way that you can  resize the image during upload. You can add the following logic in project's Global.asax file

    what the code does

    • subscribing for Executing event of LibraryManager
    • check the command name
    • get width and heigh
    • draw the image
    • call ImagesHelper.GenerateThumbnail method and pass new parameters for width and height
    • finally set the content metadata  - width, height and size

    void Application_Start(object sender, EventArgs e)  
        Telerik.Libraries.LibraryManager.Executing += new EventHandler<Telerik.ExecutingEventArgs>(LibraryManager_Executing); 
      
    void LibraryManager_Executing(object sender, Telerik.ExecutingEventArgs args) 
        if (args.CommandName != "DeleteContent"
        
            if (args.CommandArguments is Telerik.Cms.Engine.IContent) 
            
                Telerik.Cms.Engine.IContent currentItem = ((Telerik.Cms.Engine.IContent)args.CommandArguments); 
      
                if (Telerik.Cms.Engine.ImagesHelper.IsBrowserImage(currentItem)) 
                
                    long width = 0; 
                    long height = 0; 
      
                    object o2 = currentItem.GetMetaData("Width"); 
                    if (o2 != null
                        width = Convert.ToInt64(o2); 
      
                    o2 = currentItem.GetMetaData("Height"); 
                    if (o2 != null
                        height = Convert.ToInt64(o2); 
      
                    if (width > 200 || height > 200) 
                    
                        System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(currentItem.Content as byte[])); 
                       img = Telerik.Cms.Engine.ImagesHelper.GenerateThumbnail(200, 200, img, false, true);
      
                        System.IO.MemoryStream stream = new System.IO.MemoryStream(); 
                        Telerik.Cms.Engine.ImagesHelper.SaveImageToStream(img, stream, currentItem.MimeType); 
                        currentItem.Content = stream.GetBuffer(); 
      
                        currentItem.SetMetaData("Size", ((byte[])currentItem.Content).Length); 
                        currentItem.SetMetaData("Width", img.Width); 
                        currentItem.SetMetaData("Height", img.Height); 
                    
                
            
        
    }


    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Chanan Zass
    Chanan Zass avatar
    123 posts
    Registered:
    21 Aug 2012
    20 Jun 2010
    Link to this post
    Greetings,

    We're looking for ways to resize News item thumbnails to fixed width and height.
    We've tried to edit our Global.asax as described above, but this does not seem to affect News thumbnails.

    Any clue?
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    20 Jun 2010
    Link to this post
    Hi Chanan Zass,

    The code is valid for the items that are uploaded through Images and Documents module when LibraryManager.Executing event is called. It depends on whether you are uploading the item to the file system or to the Images and Documents module. Anyway, I tried the code below and it generates a thumb with size 50 x 50 pixels without problems.

    void Application_Start(object sender, EventArgs e)
     {
         Telerik.Libraries.LibraryManager.Executing += new EventHandler<Telerik.ExecutingEventArgs>(LibraryManager_Executing);
     }
     
     void LibraryManager_Executing(object sender, Telerik.ExecutingEventArgs e)
     {
        if(e.CommandName != "DeleteContent")
       {
           if (e.CommandArguments is Telerik.Cms.Engine.IContent)
           {
               Telerik.Cms.Engine.IContent currentItem = ((Telerik.Cms.Engine.IContent)e.CommandArguments);
      
               if (Telerik.Cms.Engine.ImagesHelper.IsBrowserImage(currentItem))
               {
                   long width = 0;
                   long height = 0;
      
                   object o2 = currentItem.GetMetaData("Width");
                   if (o2 != null)
                       width = Convert.ToInt64(o2);
      
                   o2 = currentItem.GetMetaData("Height");
                   if (o2 != null)
                       height = Convert.ToInt64(o2);
      
                    
                       System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(currentItem.Content as byte[]));
                      img = Telerik.Cms.Engine.ImagesHelper.GenerateThumbnail(50, 50, img, false, true);
      
                       System.IO.MemoryStream stream = new System.IO.MemoryStream();
                       Telerik.Cms.Engine.ImagesHelper.SaveImageToStream(img, stream, currentItem.MimeType);
                       currentItem.Content = stream.GetBuffer();
      
                       currentItem.SetMetaData("Size", ((byte[])currentItem.Content).Length);
                       currentItem.SetMetaData("Width", img.Width);
                       currentItem.SetMetaData("Height", img.Height);
                     
               }
           }
       
     }



    Greetings,
    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
  7. Chanan Zass
    Chanan Zass avatar
    123 posts
    Registered:
    21 Aug 2012
    20 Jun 2010
    Link to this post
    Thanks for responding.
    Unfortunately, thumbnails are uploaded by various editors and we can't require them to use the Images & Documents module when preparing News items.
    So, almost always thumbnails will be uploaded to the file system, where your code would not affect image size.

    Thanks again.
  8. gohigher
    gohigher avatar
    25 posts
    Registered:
    24 Nov 2008
    18 Aug 2010
    Link to this post
    I too am trying this suggestion to resize thumbnails, but am now receiving the following error message on upload of a regular jpg file:

    "Some files could not be uploaded succesfully."

    [file name] could not be uploaded because it is not a valid browser viewable image. Image gallery should contain only browser viewable images.

    Please advise thank you.
  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Aug 2010
    Link to this post
    Hi gohigher,

    The ArgumentException is thrown because your library does not support the type you are trying to upload or the mime type is not correct for a browser viewable image (.jpeg, gif, png etc.) image.

    Greetings,
    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
  10. gohigher
    gohigher avatar
    25 posts
    Registered:
    24 Nov 2008
    19 Aug 2010
    Link to this post
    The mime type is a jpg. Again when the code is removed for creating the thumbnails it is not a problem.
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    20 Aug 2010
    Link to this post
    Hello gohigher,

    I verified the code and it does not produces the error you are reporting. Sample video has been attached.

    Regards,
    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
  12. David
    David avatar
    15 posts
    Registered:
    22 Jun 2011
    07 Oct 2011
    Link to this post
    This worked for me, however, I want to specifically re-size the images when they are uploaded through the News Module. This code re-sizes all images upon upload.

    Is there a way to only re-size images when they are uploaded as a News Thumbnail?

    Thanks,

    David
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Oct 2011
    Link to this post
    Hello David,

    You can try to use some parameters from the context that include News module provider in the url.

    All the best,
    Ivan Dimitrov
    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
  14. David
    David avatar
    15 posts
    Registered:
    22 Jun 2011
    18 Oct 2011
    Link to this post
    Ivan,

    Thank you for the help, I was able to use the code snippet for the code behind file from Dido. I modified it for me needs and it is resizing the images for me.

    Thanks,

    David
Register for webinar
14 posts, 0 answered