In content operation, the thumbnail of the article list page plays a crucial role.They can quickly attract visitors' attention, increase click-through rate, and make the page content clear at a glance, greatly improving the user experience.AnQiCMS (AnQiCMS) is a comprehensive content management system that provides a very flexible and easy-to-operate way to display thumbnails of each article in the article list.Next, let's discuss in detail how to implement this feature.
Why are thumbnails so important?
Imagine that you are browsing a news website. If all the article titles are piled up together without any images, wouldn't you find it boring and difficult to quickly find the content you are interested in?The purpose of the thumbnail is right here.It can convey the general information of the article topic visually before the article content is clicked and read.This is very helpful for enhancing the professionalism and attractiveness of the website, as well as optimizing SEO performance (such as image ALT tags).
The thumbnail feature basics of Anqi CMS
AnQiCMS was designed with the richness of content display in mind, providing multi-faceted support for thumbnail processing:
- Automatic extraction:When you publish an article, if the content includes images, AnQiCMS will intelligently extract the first image in the article content as the default thumbnail for that article.This eliminates the trouble of manual uploading.
- Flexible manual upload:Of course, if you wish to specify a particular thumbnail for the article instead of the image automatically extracted by the system, you can also manually upload it from the background article editing interface or select it from the existing image library.
- Default thumbnail mechanism:Even if the article content does not have any images, and no manual thumbnail upload is performed, AnQiCMS still allows you to set a "default thumbnail".So, if there is no thumbnail specified for an article in the list, it will not appear empty, but will display a unified placeholder instead.
These mechanisms ensure the visual integrity and consistency of the website content.
Backend settings: optimize thumbnail display effect
Before displaying thumbnails in the front-end template, we can first make some global configurations in the Anqi CMS backend to ensure that the display effect of the thumbnails meets our expectations.
Enter the background management interface, find the left menu bar's "Backend settingsThen click on "".Content Settings". Here, you will see various configuration items related to images and thumbnails:
- Thumbnail processing method:AnQiCMS provides three processing methods: 'Scale by the longest side to maintain aspect ratio', 'Fill by the longest side', and 'Crop by the shortest side'.You can choose the most suitable method according to the website design style and image display requirements.For example, if you want all thumbnail sizes to be exactly the same, even if the image aspect ratios are different, you can choose to 'fill with whitespace according to the longest side'; if all images should be cropped to a uniform aspect ratio, then you can choose to 'crop according to the shortest side'.
- Thumbnail size: You can set a specific width and height, and the system will process the thumbnail based on this size.Suggested to set according to the actual design width and height of the article list in your template, which can avoid excessive stretching or compression of images, and also effectively reduce the file size of the image, thereby speeding up the page loading speed.
- Default thumbnail:As mentioned earlier, you can upload a picture here as the default thumbnail for all articles on the website.When an article does not specify a thumbnail, the system will automatically call this image.
- Batch regenerate thumbnails:If you change the thumbnail processing method or size settings, you need to regenerate thumbnails for all the uploaded images according to the new settings. You can use this feature for batch processing, which is very convenient.
Configure these options reasonably, which will lay a good foundation for the thumbnail display on the front-end page.
Front-end template implementation: Display thumbnails in the article list.
Configure the background settings first, then we need to call and display these thumbnails in the frontend template. AnQiCMS uses a syntax similar to Django template engine, and the template files are usually located in/templateThe catalog, according to the model and category of your website content, the corresponding article list page template file may be{模型table}/list.htmlor a more specific custom template.
In the template, we mainly usearchiveListTags to get the list of article data. This tag will take the data of each article asitemvariables for us to use in the loop. Among,item.ThumbThis variable contains the complete URL of the article thumbnail.
Below is an example code snippet for a thumbnail that displays in the article list, you can add it to your article list template file (for examplearchive/list.html):
English
{% archiveList archives with type="page" limit="10" %} {# type="page" 表示启用分页，limit="10" 表示每页显示10篇文章 #}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}" class="article-link">
<div class="article-content">
<h5 class="article-title">{{item.Title}}</h5>
<p class="article-description">{{item.Description}}</p>
<div class="article-meta">
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
</div>
{# 这里是显示缩略图的关键代码 #}
{% if item.Thumb %}
<div class="article-thumb">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</div>
{% endif %}
</a>
</div>
{% empty %}
<div class="no-content">
该列表没有任何内容。
</div>
{% endfor %}
{% endarchiveList %}
{# 如果您使用了type="page"模式，还需要添加分页代码 #}
<div class="pagination">
{% pagination pages with show="5" %}
{# 首页 #}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{# 上一页 #}
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
{% endif %}
{# 中间多页