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

Forums / General Discussions / single image thumbnail

single image thumbnail

6 posts, 0 answered
  1. Rene
    Rene avatar
    25 posts
    Registered:
    02 Feb 2009
    27 May 2010
    Link to this post
    Hi,

    I would like to add an image to a generic content, but that image should be displayed as a thumbnail. When clicking on the thumbnail, the image will be shown in its real size. Is this possible?

    René
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    27 May 2010
    Link to this post
    Hi Rene,

    Thank you for using our services.

    This can be achieved, however with some customization of built in controls. You can take a look at this blog post: Extend RadEditor dialogs to add captions for images. The principle is similar however you will have to skip the second part of the blog post dealing with the dialog for editing image properties. What you have to do is the following

    1) Instead of wrapping the image in a <div> element as described in the blog post you will create an <a> element in which you will wrap the <img>.

    2) Add an attribute href to the <a> element which will be the same as the src attribute of the nested <img>.

    3) [Optional] Add an attribute rel="lightbox[images]" to the <a> element if you wish to open the image in a Lightbox instead of navigating to another page. Then add this to your master page:
    <telerik:CssFileLink ID="CssFileLink" FileName="~/Sitefinity/ExternalLibraries/lightbox/css/lightbox.css" Media="screen" runat="server" />
    <telerik:JsFileLink ID="PrototypeLink" runat="server" FileName="~/Sitefinity/ExternalLibraries/lightbox/js/prototype.js" />
    <telerik:JsFileLink ID="ScriptaculousLink" runat="server" FileName="~/Sitefinity/ExternalLibraries/lightbox/js/scriptaculous.js?load=effects" />
    <telerik:JsFileLink ID="JsFileLink2" runat="server" FileName="~/Sitefinity/ExternalLibraries/lightbox/js/lightbox.js" />

    4) Add a style attribute to your <img> tag to control its size, for example style="width: 150 px;"

    Best wishes,
    Radoslav Georgiev
    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.
  3. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    28 May 2010
    Link to this post
    Of course, one of the problems is that if your images are large and there are a lot of them.... the page takes a long time to load the "thumbnails".

    Personally, I prefer to write a http handler and get the server to provide me with thumbnail versions of images, and fetch the full-size versions on demand.

    Something like: <a href="url-to-image"><img src="thumbnail.ashx?src=url-to-image" /></a>
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    28 May 2010
    Link to this post
    Hello MB,

    Thank you for joining the conversation.

    If you add resizing parameters in the image tag's src as query string the built in Sitefinity image handler will produce thumbnails with this size on demand, so an additional handler should not be required. Something like this: <img sfref="[Libraries]c2324561-bcd4-4978-a63c-ceedb1fe8350" src="/EmptyProject/Images/Desert.sflb.ashx?width=150&amp;height=150" alt="text" />

    Kind regards,
    Radoslav Georgiev
    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.
  5. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    28 May 2010
    Link to this post
    Hi Radoslav,

    Well that's something I wasn't aware of... essentially I wrote my own ashx to do just that... doh!

    Are the src parameters of the library handler documented, so I can check out the options ?

    In my own hander, I required a boundling-box logic, adjusting width or height, depending on which is the larger dimension... but I'm all for using standard services where I can.
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    31 May 2010
    Link to this post
    Hi MB,

    Thank you for getting back to me.

    The parameters which you can use are:
    width
    The width of the thumbnail to create
    height
    The height of the thumbnail to create
    keepProportions
    if set to true generates image with proportional dimensions, depending on the higher value of the widht and height parameters.
    decreaseOnly
    A boolean value. When set to true, the image will only be scaled down. If the passed width and height are larger than the ones of the original image, then the original image will be returned.

    The default value of keepProportions is true and the default value of decreaseOnly is false.

    Best wishes,
    Radoslav Georgiev
    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.
Register for webinar
6 posts, 0 answered