Spacing and Overlap on MediaContentSelectorView
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
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
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" />Hey Slavo,
Any further information on this?
Thanks
- William
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,
Wow. That made QUITE a difference :) Thanks!
- William