Thumbnail file size for media gallery

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?

  • 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
  • In reply to GeoffK:

    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)
Related