Managing and displaying images in AnQi CMS is an essential part of content operation, especially as the way images are displayed directly affects the website's loading speed and user experience. In template design, item.Logo/item.Altas well asthumbThe filter is a key component in processing image display.
Understanding the role of images in content.
Firstly, we need to clarifyitem.Logoanditem.AltEach represents what. In the context of Anqi CMS templates,itemIt usually represents a specific content item, such as an article, a product, a category, or a tab page.
item.LogoThis variable usually points to the URL of the cover main image or the main image of the content item.It carries the first visual impression of content, such as thumbnails in article lists, main images on product detail pages, and main visual images on category pages, etc.It often provides the original, unprocessed image address, or it is a large image of the system default size.item.Alt: This variable stores the alternative text for the image (Alternative Text), which is also what we commonly refer to as the 'alt attribute' value.It is crucial for the website's search engine optimization (SEO) and accessibility.item.AltThe text is also read by screen readers, which help visually impaired users understand the content of the image. As can be seen from the document, likebannerListthe tag clearly providesitem.AltField. For articles, categories, and other content, if not directly provideditem.Altwe usually useitem.Title(Title) asaltthe value of the attribute.
Flexible image processing:thumbFilter
To adapt to different display scenarios (for example, list pages may require small thumbnails, while detail pages may need large images), use directlyitem.LogoThe image may be too large, affecting the page loading speed. At this time, AnQi CMS provides powerfulthumbFilter.
thumbThe filter's function is to receive a picture URL as input, then according to the preset thumbnail processing rules in the background "content settings" (such as size, cropping method, etc.), dynamically generate and return a thumbnail URL of the corresponding size. This means that you can use an original large image address, through|thumbThe filter retrieves an address of a small-sized image that meets the requirements without manually uploading or processing images of various sizes.
item.Logo/item.AltwiththumbCollaboration of the filter
In practical application of the template, these three elements are often combined to display images in a **practical manner:**
- Image source (
item.Logo): You willitem.LogoPass as the original image address tothumbFilter. For example,{{ item.Logo|thumb }}. - Substitute text (
item.Altoritem.Title): No matter what you useitem.LogoOritem.Logo|thumb, you should cooperateitem.Altto perfect the semantics of the image. Ifitem.AltThe field does not exist, or if you want the alt text to better reflect the content, you can resort to usingitem.Title. A typical use case is:<img src="{{ item.Logo|thumb }}" alt="{{ item.Alt|default:item.Title }}" />. Here,defaultThe filter ensures evenitem.AltEmpty, the image will also have a meaningful onealtValue.
For example, on a document list page, we usually display the title, summary, and a thumbnail image of the article. Suppose we want the image to be in a thumbnail size configured by the backend and have good SEO properties, then the code snippet might look like this:
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<div>{{item.Description}}</div>
</a>
{# 这里的 item.Thumb 是文档自带的缩略图字段，item.Logo 是封面首图。
如果需要对 Logo 进行动态缩略，则使用 item.Logo|thumb #}
{% if item.Logo %} {# 检查是否有主图 #}
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Logo|thumb}}">
</a>
{% endif %}
</li>
{% empty %}
<li>
该列表没有任何内容
</li>
{% endfor %}
{% endarchiveList %}
In the above example,item.Logothe original path of the image was provided,item.Titlewas used asaltthe value of the attribute (usuallyitem.Titleis a good summary of the image content), anditem.Logo|thumbThe image displayed in the list is an optimized small thumbnail, which helps the page load quickly.
In this way, Anqi CMS provides an efficient, flexible, and SEO-friendly image management solution, allowing content operators to easily control the visual presentation of the website.
Frequently Asked Questions (FAQ)
1.item.Thumbanditem.Logo | thumbWhat are the differences between filters?
item.Thumbis an item of contentpreset fieldThis is typically stored as the thumbnail image URL automatically generated and saved by the system when content is uploaded or saved.This means that this URL is a fixed, existing image.item.Logo | thumbIs adynamic filterit receives,item.Logo(Or any image URL as input, and according to the current thumbnail configuration in the background "Content Settings", generate a thumbnail URL in real time. You can understand it as,item.ThumbIs "The system has prepared a thumbnail for you", anditem.Logo | thumbUse the current processing rules of the system to process this image and generate a thumbnail. Use directly if both are available.item.ThumbIt is usually more efficient because it avoids additional image processing logic. But if you need to applyitem.Logoa differentitem.Thumbsize or processing method (if the filter supports this flexibility), oritem.ThumbWhen there is no value,item.Logo | thumbit becomes particularly important.
2. If I don't want the image to be generated as a thumbnail but only show the original image, what should I do?
If you don't want the image to go throughthumbFilter processing, use directlyitem.LogoField. For example, when you need to display a large picture in the article detail page, you can write directly<img src="{{ item.Logo }}" alt="{{ item.Title }}" />It will load like thisitem.LogoThe original image or large-size image it points to will not be thumbnail processed.
3. Why do I sometimes useitem.LogoThe displayed image anditem.ThumbThe size of the displayed image is the same?
This usually relates to the thumbnail configuration in the background "Content Settings". If the thumbnail size set in the background is very close toitem.Logothe size of the stored image, or the one you uploadeditem.LogoIt is a small picture, so there may be no obvious difference in appearance. In addition, ifitem.Logois uploaded as the cover main image, but the system did notitem.Thumbat the time.item.LogoPerform further scaling (for example, becauseitem.LogoIt is already small enough or the background thumbnail settings are loose), this situation may also occur.Check the "Content Settings" in the background for "Thumbnail Size" and "Thumbnail Processing Method" to help understand this phenomenon.