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

Forums / Sitefinity SDK / Spacing and Overlap on MediaContentSelectorView

Spacing and Overlap on MediaContentSelectorView

6 posts, 1 answered
  1. William
    William avatar
    108 posts
    Registered:
    15 Feb 2011
    18 Mar 2011
    Link to this post
    Hey Telerik,

    I've been working on some custom widgets using the image selector via a MediaContentSelectorView and am experiencing some spacing and layout issues when viewing thumbnails in the tool.

    I'm attaching a screenshot here.  You can see that the images overlap, especially on selection.  Also, note that there are four images displayed here.  The first row contains a small button, whose thumbnail is shown very large, and a larger header, whose thumbnail is shown regular size.  Same as the second row.

    I'm suspecting this is an image thumbnail display issue.  It's not a big deal, but obviously I'd like this to look better for my clients.

    Any tips?

    Thanks

    - William

  2. Slavo
    Slavo avatar
    295 posts
    Registered:
    24 Sep 2012
    24 Mar 2011
    Link to this post
    Hello William,

    The MediaContentSelectorView resizes the thumbnails that it shows, according to the Width and Height properties of the data item. I suspect that in this case, it shows the full image size and not the thumbnails, hence the overlapping.

    Can you check that the Width and Height properties of your images are OK. Alternatively, you can edit the template for items of the MediaContentSelectorView, and render the thumbnail URL of images instead the full URL. One ends in .tmb, while the other ends in .sfimg

    All the best,
    Slavo
    the Telerik team
  3. William
    William avatar
    108 posts
    Registered:
    15 Feb 2011
    29 Mar 2011
    Link to this post
    Hi Slavo,

    Looks like my image properties are fine, showing the right width and height.

    Can you explain how you'd edit the template to display only thumbnails?

    This is the control I'm using on the template page:
    <label class="sfTxtLbl">Select Image<span style="color:#CC0000;">*</span></label>
    <designers:MediaContentSelectorView
        id="ImageSelectorView"
        runat="server"
        ContentType="Telerik.Sitefinity.Libraries.Model.Image"
        ParentType="Telerik.Sitefinity.Libraries.Model.Album"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false">
    </designers:MediaContentSelectorView>
    <br /><label class="sfTxtLbl">Image Name</label><label>(automatically displayed by selecting a thumbnail above)</label>
    <input type="text" id="SelectedImageName"  class="sfTxt" />
    <br /><input type="hidden" id="SelectedImageGUID"  class="sfTxt" />

    Thanks!

    - William
  4. William
    William avatar
    108 posts
    Registered:
    15 Feb 2011
    04 Apr 2011
    Link to this post
    Hey Slavo,

    Any further information on this?

    Thanks

    - William
  5. Slavo
    Slavo avatar
    295 posts
    Registered:
    24 Sep 2012
    06 Apr 2011
    Link to this post
    Hi William,

    The MediaContentSelectorView in Sitefinity shows thumbnails as squares. You can see what I mean in the designer of the Image control in the toolbox. The reason they don't show up in your case is a missing class, which has to be supplied to the MediaContentSelectorView. Here's the modified template, which should work fine:

    <designers:MediaContentSelectorView
        id="ImageSelectorView"
        runat="server"
        ContentType="Telerik.Sitefinity.Libraries.Model.Image"
        ParentType="Telerik.Sitefinity.Libraries.Model.Album"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false" CssClass="sfContentViews">
    </designers:MediaContentSelectorView>

    If you don't want your thumbnails as squares, you have to include your own CSS styles and override the default ones by setting the appropriate width and height.

    Regards,

    Slavo
    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
    Answered
  6. William
    William avatar
    108 posts
    Registered:
    15 Feb 2011
    07 Apr 2011
    Link to this post
    Slavo,

    Wow.  That made QUITE a difference :)  Thanks!

    - William
6 posts, 1 answered