Thumbnail file size for media gallery

Support

Support
A public community space for Developers, IT Professionals, Architects, and System Administrators to engage and help each other, share knowledge and best practices, find product documentation and Q&A, and discuss technology oriented topics.

Thumbnail file size for media gallery

This question is answered

When you upload a file to the media gallery it creates a small thumbnail image for display, approximately 8kb.

Is it possible to change a setting so it saves a slightly higher quality thumbnail, ie about 25kb?

Verified Answer
  • Guessing you are interested in showing a larger thumbnail on the "Media Gallery - File List" widget?  If so, you should be able to just modify the widget and change the dimensions of the scaled image that is rendered.  The new image will be scaled from the original and saved to filestorage for future references.

    On a 7.6 base install, you will want to look on the "standard-thumbnail.vm" file, Line 25 of the "Media Gallery - File List" widget - try updating the height and width.

    <div class="post-thumbnail"><a href="$core_v2_encoding.HtmlAttributeEncode($media.Url)">$!core_v2_ui.GetPreviewHtml($media.File.FileUrl, "%{width=103,height=92}")</a></div>

    Line 2296 in Screen.css could also cause you some problems as it sets a min and max height on the image, as could 2294 as they put constraints on the size of the div that will contain the thumbnail - you may have to override these (and possibly some others) to fit your new rendering size.

    .content-fragment.media-gallery-post-list .file-thumbnail-list .abbreviated-post .post-thumbnail img

    .content-fragment.media-gallery-post-list .file-thumbnail-list .abbreviated-post .post-thumbnail
  • GeoffK - this looks like it may be a bit more difficult to fix.  The dotted line looks like it is a repeating background image - on my 7.6 install it is a 5px x 188px image that repeats.  This means you will need to hide the image, or update it with your own that is taller via the theme.

    The code you will need to modify/override is on Screen.css line 2292 (provided you have not altered anything to change the line nums)

    .content-fragment.media-gallery-post-list .content-list.file-thumbnail-list {
    margin-top: 15px;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: url('http://localhost/evolution76/cfs-filesystemfile.ashx/__key/themefiles/s-fd-7e987e474b714b01ba29b4336720c446-files/thumbnail_2D00_separator.gif');
    }

    So you would need to do one of the following:

    • Modify Screen.css (not recommended)
    • Override the CSS styles in the theme (in the dynamic style box or upload a separate stylesheet) and hide the background
    • Overwrite the image in the theme with a new image that is the proper dimensions (Just use the same filename)
All Replies
  • Guessing you are interested in showing a larger thumbnail on the "Media Gallery - File List" widget?  If so, you should be able to just modify the widget and change the dimensions of the scaled image that is rendered.  The new image will be scaled from the original and saved to filestorage for future references.

    On a 7.6 base install, you will want to look on the "standard-thumbnail.vm" file, Line 25 of the "Media Gallery - File List" widget - try updating the height and width.

    <div class="post-thumbnail"><a href="$core_v2_encoding.HtmlAttributeEncode($media.Url)">$!core_v2_ui.GetPreviewHtml($media.File.FileUrl, "%{width=103,height=92}")</a></div>

    Line 2296 in Screen.css could also cause you some problems as it sets a min and max height on the image, as could 2294 as they put constraints on the size of the div that will contain the thumbnail - you may have to override these (and possibly some others) to fit your new rendering size.

    .content-fragment.media-gallery-post-list .file-thumbnail-list .abbreviated-post .post-thumbnail img

    .content-fragment.media-gallery-post-list .file-thumbnail-list .abbreviated-post .post-thumbnail
  • This worked very well. The only issue I now have it is I need to increase the frame size of the boxes for the images in that widget. Do you know where that size is found?

  • Geoff, I'd start by looking at the two Css style declarations I mentioned in my previous post.  However you may have to use your Browser's developer tools to sniff out additional styles that could be affecting your desired rendering...

  • Nevermind, I did find it. Thanks for your help.

  • Anybody know where the code is that the defines the width between the dotted line dividers? I figured out how to increase the size and layout but can't find that dotted line element to reformat the spacing of the line dividers.

  • GeoffK - this looks like it may be a bit more difficult to fix.  The dotted line looks like it is a repeating background image - on my 7.6 install it is a 5px x 188px image that repeats.  This means you will need to hide the image, or update it with your own that is taller via the theme.

    The code you will need to modify/override is on Screen.css line 2292 (provided you have not altered anything to change the line nums)

    .content-fragment.media-gallery-post-list .content-list.file-thumbnail-list {
    margin-top: 15px;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: url('http://localhost/evolution76/cfs-filesystemfile.ashx/__key/themefiles/s-fd-7e987e474b714b01ba29b4336720c446-files/thumbnail_2D00_separator.gif');
    }

    So you would need to do one of the following:

    • Modify Screen.css (not recommended)
    • Override the CSS styles in the theme (in the dynamic style box or upload a separate stylesheet) and hide the background
    • Overwrite the image in the theme with a new image that is the proper dimensions (Just use the same filename)