The AnQi CMS has always been highly praised for its flexibility in content display, where images serve as the core element to attract users and convey information. How to efficiently and accurately obtain and display the thumbnail or cover image of an article in templates is a focus for many website operators.This article will detailedly analyze the Anqi CMS template mechanism and guide you step by step to master the skills of image calling.
How does Anqi CMS intelligently handle images?
In AnQi CMS, the management and display of images are designed to be very flexible and efficient.When you upload an image as a thumbnail or an image within the content of an article, the system will perform a series of intelligent processes.
First, even if you do not manually upload a thumbnail for the article, as long as the article content contains images, the system will automatically extract the first image as the thumbnail for the article.This greatly reduces the workload of content editing.
Next, Anqi CMS provides rich image processing options.In the background "Content Settings", you can configure the default thumbnail size, cropping method (proportionally scaled by the longest side, padded by the longest side, or cropped by the shortest side), and even set a global default thumbnail to prevent some articles from not having images.These settings will affect the front-end template callThumbThe final presentation effect of the field, ensuring the unity of the website image style.
Obtaining images in the template: core tags and usage.
The AnQi CMS template is based on the Django template engine syntax, which uses specific tags and variables to call data. The main dependency for getting the thumbnail or cover image of the article isarchiveDetail(Document details) andarchiveListThese core tags: (Document list)
1. Call images on the article detail page
When you need to display the cover image on a separate article detail page, you can usearchiveDetailthe tag. This tag can retrieve the detailed data of the current article, including various image fields:
Cover main image (
Logo): Usually used to display the main, largest-sized cover image of the article, which is also the most representative image of the article.<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />Thumbnail (
Thumb): A thumbnail processed by the system, smaller in size, often used in sidebars, related article recommendations, and other places where space needs to be saved.<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />Cover group (
Images)If an article is equipped with multiple cover images, such as product show albums or multi-image slideshows,Imagesthe field will return an array of image URLs. You need to usefora loop to iterate and display them.<div class="gallery"> {% archiveDetail archiveImages with name="Images" %} {% for item in archiveImages %} <img src="{{ item }}" alt="图片描述" /> {% endfor %} </div>Here, we first concatenate
Imagesvalue of the field toarchiveImagesVariable, then display the pictures one by one in a loop.
2. Call the picture on the article list page.
On the article list page (such as the homepage, category list page), you need to iterate over multiple articles. At this point,archiveListtags come into play. InarchiveListthe loop body, the data of each article is processed withitem(or your custom variable name) in the form, you can accessitem.Logooritem.Thumbto get the corresponding article image.
Suppose you are usingarchiveListto cycle through the articles:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-card">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
{% if item.Thumb %} {# 先判断是否存在缩略图 #}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
{% else %}
<img src="{% system with name="SiteLogo" %}" alt="默认图片" /> {# 如果没有缩略图，显示网站Logo或默认图 #}
{% endif %}
<p>{{ item.Description|truncatechars:100 }}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
In this example,item.Thumbwill automatically generate the corresponding thumbnails based on the backend settings.
3. Classification and single-page image calling
For the category detail page (categoryDetail) and single-page detail page (pageDetail), the image calling logic is almost the same as the article detail page. They also provideLogo/ThumbandImagesField used to display the cover image, thumbnail, or group image of categories or single pages. You can refer toarchiveDetailto call the usage.
For example, calling the Banner group image of categories:
{% categoryDetail categoryBanners with name="Images" %}
<div class="category-banner">
{% for banner in categoryBanners %}
<img src="{{ banner }}" alt="分类横幅" />
{% endfor %}
</div>
4. Dynamically generate thumbnails (thumbFilter)
In addition to obtaining predefined thumbnails directly through fields, Anqi CMS also provides athumbA filter that can dynamically generate thumbnails from any image URL.This is very useful in certain specific scenarios, such as when you only want to temporarily display an image of a certain size, or the image is not directly from the thumbnail field of the article.
Its usage is:{{ 图片URL|thumb }}For example, you have a picture URL ishttp://example.com/uploads/original.jpgAnd you want to display it as a thumbnail in the template:
{% set imageUrl = "http://example.com/uploads/original.jpg" %}
<img src="{{ imageUrl|thumb }}" alt="动态缩略图" />
This filter will convert the specified image into a corresponding thumbnail based on the thumbnail size and processing method configured in the background "Content Settings".imageUrlThe background settings are basic.
Practical skills and precautions
- Background settings are fundamental.Make sure to configure the "Thumbnail processing method" and "Thumbnail size" in the "Content Settings" of the AnQi CMS backend according to the website requirements. These settings are used by the front-end template.
ThumbThe foundation of field effect. - Image lazy loadingIf the content of the article (
Contentfield) contains images that need lazy loading, you can addContentwhen callinglazy="data-src"for example:
This will add the image tag of{% archiveDetail articleContent with name="Content" lazy="data-src" %} {{ articleContent|safe }}srcproperties todata-src，convenient for front-end lazy loading script recognition. - Ensure HTML safe output：when displaying article content or other fields that may contain HTML code (such as
Content/Description)} Ensure that the HTML structure is parsed correctly and not displayed as code, be sure to use|safethe filter. For example{{ item.Description|safe }}or{{ articleContent|safe }}.
Frequently Asked Questions (FAQ)
Why is my article thumbnail not displaying or always showing a default image? AnswerCheck if you have uploaded the 'document image' (i.e., thumbnail) when you publish the document in the background.If not uploaded, the system will automatically try to extract the first image from the article content as a thumbnail.If the article content does not have any images, the system will use the default thumbnail you have configured in the "Background Settings" -> "Content Settings".Make sure there is an image source here or a valid default thumbnail has been set.
Why does my uploaded cover image appear very small and unclear when displayed on the list page? AnswerThis is likely because you are calling it on the list page
item.Thumbfield.ThumbThe field will generate a smaller size image based on the "thumbnail size" and "thumbnail processing method" configured in the background "content settings". If you want to display larger and clearer images on the list page, consider callingitem.LogoField, or check and adjust the 'thumbnail size' settings to match your needs.**Question:**
Logo/ThumbandImagesThese three