How to add custom alt text for thumbnail images in AnQiCMS templates?

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

Understanding the importance of thumbnails and alt text

It is important in several aspects:

  1. Improve SEO performanceThe search engine understands 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 position, allowing users to understand the original information that 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 content management system that emphasizes SEO and high customizability, provides a very flexible way to add custom Alt text to thumbnails, helping you to finely manage each image.

In AnQiCMS backend, define a custom Alt text field

One of the core strengths of AnQiCMS is its 'flexible content model' feature, which allows us to customize the content structure according to business needs.Using this feature, we can add a field specifically for storing thumbnail alt text for different types of content (such as articles, products, single pages, etc.).

The following are the specific operation steps:

  1. Enter content model management： Firstly, you need to log in to the AnQiCMS backend management interface. Find and click 'Content Management' in the left navigation bar, then select 'Content Model'.

  2. Select or create a content model： 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 corresponding model's 'Edit' button.If you have other special content types, you can also choose to create a new content model by selecting "Add Model".

  3. Add Custom Fields： In the model editing page, you will see the 'Content Model Custom Fields' area. Here, click the 'Add Field' button.

    • Parameter nameThis is a user-friendly display name, for example, you can fill in "Thumbnail Alt Text".
    • Call fieldThis is the unique identifier used to call the value of this field in the template. It is recommended to use a concise and meaningful English name, such asthumbAltorimageAltRemember this name, as it will be used later in the template.
    • field type：Select 'Single Line Text'. Alt text is usually a brief description, and the single line text type is sufficient to meet the needs.
    • Is requiredandDefault 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 out 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 changes to the content model.

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

In AnQiCMS template, calling custom Alt text

Once you have defined custom fields and filled in the content in the background, the next step is to correctly call these Alt texts in the front-end template.AnQiCMS's template uses a 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 will usually usearchiveDetailtags to get 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 througharchiveDetailLabel has been customizedthumbAltField value and article titleTitleThen, in<img>Tagsaltthe attribute, usedefaultFilter that displays the custom Alt text for images first, if the custom Alt text is empty, it will automatically display