How to set custom thumbnails and display them for documents and categories in AnQi CMS?

In content operations, an attractive thumbnail often determines whether users click to view the full content. It is not only the "face" of the content, but also an important element in enhancing the visual effect of the website and the search engine optimization.AnQi CMS is a powerful content management system that provides a flexible way 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.

I. The importance of thumbnails: the cornerstone of content visual recognition.

In the era of information explosion, users' attention is a scarce resource.A clear and beautiful thumbnail can quickly convey the theme of the content, helping users quickly understand and filter information.Whether it is an article list, product display, or category navigation, a unified and high-quality thumbnail can:

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

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

Secondly, set thumbnails in the Anqi CMS background.

The Anqi CMS provides options 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, Anqi CMS will provide you with an entry to set a thumbnail.

• Operation path:Log in to the AnQi CMS backend, click on the left menu's 'Content Management', and select 'Publish Document' or 'Edit Document'.
• Locate the settings item: In the content area of the document editing page, you will see a region 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 image, including generating thumbnails, the specific rules are affected by the global settings.
  • Select an existing image from the image library:You can also select an image from the uploaded image resource library to use as a thumbnail.
• Smart extraction:If you have not manually uploaded or selected a thumbnail, but the document content contains images, Anqi CMS will intelligently extract the first image in the document content as the default thumbnail, saving the trouble of manual operation.

2. Set a thumbnail for the category

Category thumbnails are usually used on category list pages or in navigation bars, representing the main content theme of the entire category.

• Operation path:Log in to the Anqi CMS backend, click on the left-hand menu's 'Content Management', select 'Document Category', then click on the category you need to set the thumbnail for and edit it.
• Locate the settings item: Below the category editing page, you will find the options 'Thumbnail' and 'Banner image'.
• Setting method:
  • Thumbnail:This is an independent thumbnail field, used to display the exclusive small image of the category. Upload or select an image 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 category page.Although it is slightly different from the 'thumbnail' function, in some template designs, the first image of the Banner may also be used as a representative image for the category.

3. Set thumbnail for single page

For pages like "About Us", "Contact Us", and others, you can also set a dedicated thumbnail.

• Operation path:Log in to the AnQi CMS backend, click on the left menu's 'Page Resources', select 'Page Management', and then edit the single page you want to set.
• Locate the settings item and method:Similar to the category settings, you will also see the 'Thumbnail' and 'Banner Image' options, and the operation is consistent with the category thumbnail.

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:Log in to the AnQi CMS backend, click the left menu's "Backend Settings", and select "Content Settings."
• Key settings item:
  • Thumbnail processing method:Here you can choose how the system generates thumbnails, including three modes: 'Proportionally 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 improper cropping.
  • Thumbnail size:Set the desired thumbnail width and height. Reasonable size settings can reduce the size of the image file and speed up page loading.
  • Default thumbnail: When the document or category does not have a dedicated thumbnail set, the system will call here to upload the default image for display, ensuring that all content on the website has a visual cover.
  • Batch regenerate thumbnails:If you modify the aforementioned global settings, such as changing the thumbnail size or processing method, you can use this feature to regenerate thumbnails for all uploaded images according to the new rules, ensuring 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 Anqi CMS template system (similar to Django template engine) provides rich tags and filters to call these images.

1. Calling the document thumbnail

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

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

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}}">