In content operation, an attractive thumbnail often determines whether a user clicks to view the full content. It is not only the 'facade' of the content but also an important element for enhancing the visual effects of the website and the search engine friendliness.AutoCMS is a powerful content management system that provides flexible ways for you to set custom thumbnails for documents and categories, and can be easily displayed on the front page, thereby effectively enhancing the attractiveness of your content.

Next, we will delve into how to implement this feature in Anqi CMS.

一、 Thumbnail importance: The foundation of content visual recognition

In the age of information explosion, users' attention is a scarce resource.A clear and beautiful thumbnail can quickly convey the content theme, helping users quickly understand and filter information.

  • Enhance user experience:Page layout is more aesthetically pleasing, and information acquisition is more intuitive.
  • Increase click-through rate:Attractive images can encourage users to click and browse more content.
  • Optimize Search Engine (SEO):A good image helps search engines understand the content, increase visibility in image search results, and also enrich structured data, enhancing the overall SEO performance of the page.

English CMS fully understands this and provides a complete thumbnail management and display mechanism.

In the AnQi CMS background settings, set the thumbnail.

The Anqi CMS provides the option to set thumbnails in the document, category, and single-page editing interfaces, with an intuitive and convenient operation process.

1. Set a thumbnail for the document (article, product, etc.)

When you publish or edit a document, Safe CMS will provide you with an entry to set a thumbnail.

  • Operation path:Enter the Anqi CMS backend, click the "Content Management
  • Locate the settings item:In the document editing page, you will see a section named 'Document Image', which is where you set the document thumbnail.
  • Setting method:
    • Upload new image:Click the upload button, select an image from your computer to upload. The system will automatically process the uploaded images, including creating thumbnails, which is affected by the global settings.
    • Select an image from the existing image library:You can also select an image from the uploaded image resource library as a thumbnail.
  • Intelligent extraction:If you have not manually uploaded or selected a thumbnail, but the document content contains images, Safe CMS will intelligently extract the first image in the document content as the default thumbnail, saving the trouble of manual operation.

2. For category settings, set a thumbnail

Category thumbnails are usually used on category list pages or in navigation bars to represent the content theme of the entire category.

  • Operation path:Log in to the AnQi CMS backend, click the "Content Management
  • Locate the settings item:In the category editing page below, you will find the options "Thumbnail" and "Banner Image".
  • Setting method:
    • Thumbnail:This is an independent thumbnail field, used to display exclusive small images for categories. You can upload or select images from the image library.
    • Banner image:If your category page needs to display one or more large banner images, you can upload them here.These images can be used to create the top Banner or carousel for the classification page.Although it is slightly different from the "thumbnail" feature, in some template designs, the first Banner image may also be used as a representative image for classification.

3. Set thumbnail for single page

For single pages such as "About Us" and "Contact Us", you can also set dedicated thumbnails.

  • Operation path:Enter the AnQi CMS backend, click the "Page Resources
  • Locate the setting item and method:Similar to category settings, you will also see 'Thumbnail' and 'Banner image' options, with the same operation as category thumbnails.

3. Global thumbnail management and optimization

To ensure the consistency of the overall image style and performance optimization of the website, Anqi CMS provides global thumbnail processing settings.

  • Operation path:Enter the AnQi CMS backend, click the "Background Settings
  • Key settings items:
    • Thumbnail processing method:Here you can choose how the system generates thumbnails, including three modes: 'Scale to the longest side', 'Fill to the longest side', and 'Crop to the shortest side'.Choose the appropriate processing method according to your design requirements to avoid image distortion or incorrect cropping.
    • Thumbnail size: Set the expected thumbnail width and height. Reasonable size settings can reduce the size of image files and speed up page loading.
    • Default thumbnail:When no dedicated thumbnail is set for the document or category, the system will display the default image uploaded here to ensure that all content on the website has a visual cover.
    • Batch regenerate thumbnails:If you have modified the above global settings, such as changing the thumbnail size or processing method, you can use this feature to regenerate the thumbnails of all uploaded images according to the new rules to ensure consistent display of images throughout the site.

Four, Call and display the thumbnail in the template

Set the thumbnail after setting it up, the next step is to display it in the front-end template.The template system of Anqi CMS (similar to Django template engine) provides rich tags and filters to call these images.

1. Calling the document thumbnail

You can use it in the document list page or detail pagearchiveListandarchiveDetailLabel to obtain document information, and obtain thumbnails through specific fields.

  • Get document thumbnail:
    • {{item.Thumb}}: This is the image URL of the special thumbnail field set for the document.
    • {{item.Logo}}It is usually the first image in the document content, or the first image uploaded in the "Document Images" section in the background.
    • {{item.Images}}If the document supports multiple images (such as product albums), this is an array containing all image URLs, which you can iterate through to display them.

Example code (document list page):

twig {% archiveList archives with type=“page” limit=“10” %}

{% for item in archives %}
<div class="document-item">
    <a href="{{item.Link}}">