It is crucial to have visually appealing content when building and operating a website.AnQiCMS provides a flexible way to manage and display the images of documents (including articles, products, etc.), whether as an eye-catching cover, a delicate thumbnail, or a colorful collage.Understand how to correctly call these images, which can help you better design and optimize the user experience of the website.
AnQiCMS provides several main image fields for different content types, which have clear uses in templates:
- Cover LogoThis usually refers to the main visual or representative image of the content (such as documents, categories, single pages). In some contexts, it may be the first image to highlight.
- Thumbnail (Thumb)This is a smaller, processed version of the cover main image, often used on list pages and recommendation areas to save loading time and keep the page neat.
- Images (Images)When it is necessary to display a set of images to describe a content in detail (such as product multi-angle display, event photo album), AnQiCMS will store these images as an array.
We will discuss how to call and display these images in the AnQiCMS template.
Call images in the document details page.
On the document detail page, you usually want to display the most complete and highest quality images. AnQiCMS providesarchiveDetailLabel to get the detailed information of the current document, including the associated images.
To display the cover thumbnail of the document, you can call it like this.LogoField:
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
here,altProperties are a good habit, they not only help search engines understand the content of the image, but also provide text descriptions when the image cannot be loaded. You can also directly use variables from the current document context, such as:
<img src="{{archive.Logo}}" alt="{{archive.Title}}" />
If your document is configured with a thumbnail and you want to display it at a certain location on the detail page (such as the sidebar), you can callThumbField:
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
Similarly, if you are directly inarchiveUsing in context, the code will be more concise:
<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />
When the document contains multiple images as a collage, you need to use aforto loop throughImagesfield. BecauseImagesthe field returns an array of image links:
{% archiveDetail archiveImages with name="Images" %}
<div class="image-gallery">
{% for imgUrl in archiveImages %}
<img src="{{imgUrl}}" alt="{{archive.Title}} - 图片 {{ forloop.Counter }}" />
{% endfor %}
</div>
In this example,forloop.CounterIt provides the current image sequence number in each loop, which is very suitable for use inaltproperties to enhance the uniqueness of image descriptions.
calling images on the document list page
On the document list page (such as article list, product list), it is usually only necessary to display thumbnails to get an overview of the content, rather than the full cover image.archiveListThe tag is used to retrieve a series of documents, you canforaccess each document's image field in a loop.
When you usearchiveListWhen looping through documents, each document item will be assigned a variable (for exampleitem）。To display the thumbnail of each list item, you can do this：
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="list-item">
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}} 的缩略图" />
{% endif %}
<p>{{item.Description}}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
We used here{% if item.Thumb %}To determine if the thumbnail exists. This is a very practical skill that can avoid displaying corrupted image icons when there are no images, thereby improving user experience.
If the list item needs to display the cover thumbnail (although it is not common), it can also be called{{item.Logo}}. And if you need to display multiple images in the list item, you can nestitemone insideforto loop through{{item.Images}}An array, like displaying a group of images on the detail page.
Call images in categories and single pages.
AnQiCMS not only provides an image field for documents, but also allows you to configure cover images, thumbnails, and group images for categories and single pages. They are called in a similar way to documents, just by using the corresponding tags:
- Category Image: Use.
categoryDetailTag to get the current category image (for example{{category.Logo}}/{{category.Thumb}}/{{category.Images}}), or incategoryListthrough the loop{{item.Logo}}and so on.) - Single Page Image: Use.
pageDetailTag to get the current single page image (for example{{page.Logo}}/{{page.Thumb}}/{{page.Images}}), or inpageListthrough the loop{{item.Logo}}and so on.)
No matter what type of content, AnQiCMS provides a clear image upload and management interface in the background, ensuring that you can easily add visual elements to your content.
Common Techniques to Enhance Image Display Effect
In addition to the basicsrcproperties, there are some common techniques that can help you optimize image display:
- Automatic image path processing: AnQiCMS will automatically handle the storage path of the uploaded image, you can directly call it in the template
{{item.Logo}}or{{archive.Thumb}}Leave the fields as is, there is no need to manually concatenate complex server paths, the system will return the complete image access URL. - add
altproperty: Always set to<img>tagsaltAttribute, this not only benefits SEO (Search Engine Optimization), but also provides text descriptions when images cannot be loaded, enhancing the accessibility of the website. - Conditional judgment: Before displaying the image, use
{% if 变量名 %}Check to ensure that the image field has a value. This can effectively avoid displaying a placeholder for 'Image Missing' and maintain the beauty of the page. - Responsive image processingAlthough template tags directly output image links, you can combine them with CSS frameworks (such as Bootstrap, Tailwind CSS) or the native
srcsetProperties,<picture>To implement responsive images, so that images can display well on different devices.
By flexibly using these tags and fields provided by AnQiCMS, you can easily add rich visual elements to your website content, whether it's an eye-catching cover, a concise thumbnail, or a detailed album display, all of which can be perfectly presented to enhance the professionalism and user experience of your website.
Frequently Asked Questions (FAQ)
1. Why have I uploaded pictures for the document but they are not displayed on the front page?
This could be caused by several reasons. First, please check if the image field name you are using in the template is correct, for example isLogo/ThumbOrImagesNext, confirm that the image has been successfully uploaded and saved to the document, you can view it while editing the document in the background.Again, AnQiCMS has a caching mechanism, if the front-end does not take effect immediately after the back-end is modified, try clicking the "Update Cache" button on the back-end, or clear your browser cache and try again.Finally, make sure you have used in the template{% if 图片字段 %}Such conditional judgment, to prevent the image field from being empty and skipping the image display.
2.LogoandThumbWhat are the differences between these image fields? When should I use them?
LogoGenerally refers to the 'cover lead image' or main image of a document, usually larger in size, used to highlight the visual theme of the document in detail pages or important display areas.ThumbIt is a "thumbnail", which isLogoa smaller size version, intended for use on list pages, recommendation modules, or sidebars, etc., to save page space