How to add custom alt text to thumbnail images in the AnQiCMS template?

Manage website content in AnQiCMS, thumbnails are an indispensable part of visual presentation.They not only beautify the page but also greatly affect the website's search engine optimization (SEO) effect and user experience, especially for visually impaired users.Add accurate, descriptive alt text to thumbnail images, which is a key step in enhancing these aspects.

Understanding the importance of thumbnails and alt text

A beautifully detailed thumbnail can quickly attract a visitor's attention, but when the image fails to load, or when search engine spiders, screen readers try to understand the image content, it is the Alt text they rely on.Alternative text (alternative text), that is, the alternative text, is a brief text description provided for images.

It is important in several aspects:

1. Improve SEO performance: Search engines understand image content through Alt text, which helps images get better rankings in image search results and brings traffic to related pages.
2. Improve user experienceWhen an image cannot be displayed due to network issues or browser settings, the alt text will be displayed at the image location, allowing users to understand the original information the image was intended to convey.
3. Enhance accessibilityFor visually impaired users who use screen readers, alt text is the only way they can understand the content of images, and it is an important part of website accessibility design.

AnQiCMS as a SEO-focused and highly customizable content management system, provides a very flexible way to add custom Alt text to thumbnails, helping you to manage each image with precision.

Define a custom Alt text field in the AnQiCMS backend

One of the core strengths of AnQiCMS lies in its 'flexible content model' feature, which allows us to customize the content structure according to business needs.By taking advantage of this feature, we can add a field specifically designed to store the alt text for thumbnails for different types of content (such as articles, products, single pages, etc.).

The following are the specific steps:

1. Enter content model managementFirst, you need to log in to the AnQiCMS backend management interface. In the left navigation bar, find and click "Content Management", and then select "Content Model".

2. Select or create a content modelThe system usually comes with built-in "article model" and "product model".If you need to add custom Alt text to an article or product, you can directly click the "Edit" button of the corresponding model.If you have other special content types, you can also choose 'Add Model' to create a new content model.

3. Add custom fieldIn the model editing page, you will see the "Content Model Custom Field" area. Here, click the "Add Field" button.

   • Parameter NameThis is a user-friendly display name, for example, you can fill in 'thumbnail alt text'.
   • Field invocationThis is the unique identifier used to call the value of this field in the template. It is recommended to use a concise, meaningful English name, such asthumbAltorimageAltRemember this name, it will be used later in the template.
   • Field typeSelect 'Single line text'. Alt text is usually a short description, and the single line text type is sufficient to meet the needs.
   • Mandatory?andDefault value: You can decide whether to set it as a required item and whether to provide a default value according to your actual operational needs. Usually, for SEO considerations, it is recommended to fill it in as much as possible.

4. Save content modelAfter completing the field settings, be sure to click the "OK" button at the bottom of the page to save your content model changes.

5. Enter the Alt text in the specific content.Now, when you go to edit existing articles, products, or single pages under "Content Management" or edit single pages under "Page Resources", you will find an additional input box for "Thumbnail Alt Text" in the "Other Parameters" collapsible box.Here, you can fill in a unique, descriptive alt text for each thumbnail.

Call custom Alt text in AnQiCMS template

Once you have defined custom fields in the background and filled in the content, the next step is to correctly call these Alt texts in the front-end template.AnQiCMS's template uses syntax similar to Django, outputting content through variables and tags.

We will take several common scenarios as examples to show how to add custom Alt text to thumbnails in the template.

1. In the document detail page (such as article or product detail page)： In the document detail page, you would usually usearchiveDetailtags to retrieve the detailed information of the current document, including its thumbnail and custom fields.

   {# 假设您在后台自定义的Alt文本字段的“调用字段”为 thumbAlt #}
   
   {% archiveDetail archiveThumbAlt with name="thumbAlt" %}
   {% archiveDetail archiveTitle with name="Title" %}
   {% archiveDetail archiveThumb with name="Thumb" %}
   
   {# 使用获取到的自定义Alt文本，如果为空，则回退到文档标题 #}
   <img src="{{ archiveThumb }}" alt="{{ archiveThumbAlt|default:archiveTitle }}" loading="lazy" />
   

   Here, we first go througharchiveDetailThe tag obtained a customizedthumbAltField values and article titlesTitleThen, in<img>label'saltIn the attribute, usingdefaultA filter that prioritizes displaying the custom Alt text of the image, if the custom Alt text is empty, it will automatically display