As an experienced website operations expert, I fully understand the importance of visual presentation of website content for user experience and information delivery.In a powerful and flexible system like AnQiCMS, we have multiple ways to achieve fine-grained control over content, especially in key navigation areas such as category lists. How to effectively display category thumbnails or banner images is a crucial element in enhancing the professionalism and attractiveness of a website.Today, let us delve into how to skillfully integrate these visual elements into the category list in AnQi CMS.
AnQiCMS Practical Guide: Display thumbnails or Banner images elegantly next to the category list
In website navigation design, category lists are not just a pile of text; they are the key to users quickly understanding the website structure and discovering interesting content. Adding representative visual elements to category lists, whether small thumbnails (item.Thumb【en】Is it more attractive Banner image (item.LogoIt can greatly enhance user experience, making the website interface more vivid and lively, and information delivery more intuitive.The Anqi CMS provides great flexibility, making everything simple and efficient.
【en】Backend configuration: Add visual elements to categories
In the Anqi CMS, the operation to set thumbnails or Banner images for categories starts from the content management backend. The system reserves a dedicated image upload area for each category, and you can easily complete the configuration in just a few steps:
- Log in to the Anqi CMS admin backend: Enter your website management interface.
- Navigate to category management: Find 'Content Management' in the left menu and click on 'Document Category'.
- Select or Create a CategoryYou can select an existing category to edit or create a new category.
- Upload imagesIn the category editing page, scroll down to the 'Other Parameters' section. Here, you will see the 'Banner Image' and 'Thumbnail' options.
- ThumbnailIt is usually used in list or card display as a small representative image for classification. It is recommended to upload images of moderate size and clear content.
- Banner imageIt is usually a larger, more visually striking image that can serve as the top banner on a category page or as the main visual element in some layouts.The system supports uploading multiple Banner images, but please note to maintain consistent image sizes to ensure a uniform and beautiful display effect.
- Save ChangesEnsure that you click Save after the upload is complete to make sure your image settings take effect.
By such configuration, the classification data includes the URLs of these visual elements, waiting for us to call them in the front-end template.
Front-end Display: Unlock the visual power in the template.
The AnQi CMS uses a template engine syntax similar to Django, which makes it intuitive and easy to understand to call category data in the front-end templates. To display these images next to the category list, we mainly usecategoryListTemplate tags.
When we use{% categoryList categories ... %}Such tags are cyclically output when categorizing,categoriesEvery one in the变量 variables.item(representing a category) will be includeditem.Thumbanditem.LogoThese two properties correspond to the image URL of the thumbnail and Banner image you upload on the backend.
Here are some key calling tips and注意事项.
- Directly access properties: In
forDirectly in the loop,{{ item.Thumb }}or{{ item.Logo }}to obtain the image address. - Conditional judgment[en] Not all categories require or will upload images. To avoid the page displaying incorrectly due to empty image links, it is strongly recommended to use
{% if item.Thumb %}or{% if item.Logo %}Perform a conditional judgment, render the image tag only when the image exists. - Select an appropriate image: Decide whether to display next to the category list based on your design requirements.
item.Thumb[more suitable for compact layout] oritem.Logo（More suitable for highlighting visual effects or as a Banner). It can also be used together, for example, to prioritize displaying thumbnails, and if there are none, to try displaying the Logo. - Add
altProperty[en]For SEO optimization and accessibility, make sure to set the<img>Label addaltattribute, the content can be set as the category title{{ item.Title }}.
Complete example: Refresh the category list
Now, let's demonstrate how to elegantly display category images next to a category list through a specific template code example:
{# 假设我们想获取ID为1的文章模型下的所有顶级分类 #}
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="category-list-with-images">
{% for item in categories %}
<li class="category-item">
<a href="{{ item.Link }}" class="category-link">
<div class="category-content">
{# 优先展示缩略图，如果存在 #}
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }} 缩略图" class="category-thumb">
{# 如果没有缩略图，但存在Banner图，则展示Banner图 #}
{% elif item.Logo %}
<img src="{{ item.Logo }}" alt="{{ item.Title }} Banner图" class="category-banner-fallback">
{% else %}
{# 如果没有任何图片，可以显示一个占位符或者默认图标 #}
<span class="no-image-placeholder">🎨</span>
{% endif %}
<h3 class="category-title">{{ item.Title }}</h3>
<p class="category-description">{{ item.Description }}</p>
</div>
</a>
</li>
{% else %}
{# 如果没有任何分类 #}
<p>暂无分类数据。</p>
{% endfor %}
</ul>
{% endcategoryList %}
In this code, we first usecategoryListThe label has obtained the specified model (moduleId="1"All top-level categories under 【en】parentId="0"）。Then, in 【en】，we create a list item for each 【en】.for（分类）in the loop，we create a list item for each 【en】.item（分类）created a list item for each 【en】.
The key point is 【en】{% if item.Thumb %}and{% elif item.Logo %}The judgment logic. It ensures that:
- If the category has uploaded a thumbnail (
item.Thumb), it will be displayed first. - If there is no thumbnail but there is an uploaded Banner image (
item.LogoIf there is no image, then display the Banner image as an alternative. - If neither of the two images is available, then display a simple text placeholder to avoid the awkwardness of blank space on the page or failed image loading.
By such logic, you can flexibly display visual elements next to the category list based on the actual image upload situation, while also considering the aesthetics and robustness of the page.
[en]温馨提示与**实践
- Image Optimization【en】Upload the image and make sure to compress and optimize its size before uploading.The 'Content Settings' in the Anqi CMS backend provides functions such as 'whether to enable Webp image format' and 'whether to automatically compress large images', which can help you automate image processing and speed up page loading.
- Responsive Design[en]: In CSS styles, add
category-thumborcategory-banner-fallback[en]responsive styles to image classes, such as `max-width:`} ]