Page Thumbnail Best Practices

Size

The size of the thumbnail affects how big an image is on the page, and the thumbnail size is ultimately up to the customer. Without CSS setting the thumbnail size, the image will appear as large as the file itself if the size does not exceed the maximum limits Expert sets by default. It is highly recommended that your thumbnails are all the same size when uploading them to the site. This will minimize or eliminate the need for CSS, and ensure a consistent look across your tiles.

We recommend that the thumbnail image be the desired size before you upload it. The "Adjust or hide thumbnails" section of this article contains CSS to help you resize your images.

Example of consistent thumbnail size (75px x 75px):

Example of mismatched thumbnail size:

Remember that the DekiScript at the top of Category and Guide pages pulls the thumbnail and summary from the Page Settings. This section does not have a size limit, so the thumbnail will appear as large as the image file itself. If the image is too big it can force the summary off the page and it takes up a lot of real estate on the page.

Orientation

We recommend that the orientation of all your thumbnails are landscape, or square. As mentioned earlier, the most important aspect is consistent sizing. If you use portrait orientation, your tiles might appear too tall. If you do not have consistent sizing in your thumbnails, the layout of the tiles might look inconsistent or have too much blank space.

File type

The best file type to use for thumbnails is PNG or SVG. If you use SVG, you will have to set a width or height for it to appear. See Working with SVGs for more information.

Adjust or hide thumbnails

The following code snippets will enable you to resize or hide thumbnails as needed.

.mt-sortable-listing a img {
    max-height: 75px;
    max-width: 75px;
}

.mt-page-thumbnail {
    max-height: 75px;
    max-width: 75px;
}

.mt-page-thumbnail {
    display: none;
}