Skip to main content
NICE CXone Expert

We will be closed on Monday, May 27th in observance of Memorial Day

Expert Success Center

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

Screenshot 2024-05-15 at 11.24.11.png

Example of mismatched thumbnail size:

Screenshot 2024-05-15 at 11.26.09.png

 

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.

Screenshot 2024-05-15 at 14.28.52.png

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.

Set a max height or max width to tile thumbnails

Add the following code to the control panel CSS and adjust the values as needed. Delete one of the values if you do not need it:

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

Set a max height or max width to page summary thumbnails

Add the following code to the control panel CSS and adjust the values as needed. Delete one of the values if you do not need it:

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

Hide the page summary thumbnail

Add the following code to the control panel CSS:

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

 

  • Was this article helpful?