In website operation, the attractiveness of visual content is crucial.A meticulously designed category thumbnail and an eye-catching banner carousel not only beautify the website interface but also effectively guide users through browsing, enhancing the overall professionalism and user experience of the website.AnQiCMS (AnQiCMS) provides powerful and flexible functions, allowing you to easily manage and display these important visual elements.This article will introduce in detail how to get and display category thumbnails or banner carousel images in the Anqi CMS.
一、In the AnQi CMS backend, configure category images.
Firstly, we need to set the corresponding images for categories or single pages in the AnQi CMS backend.
1. Configure category thumbnails and banner carousel images
For various categories such as articles and products on the website, you can set exclusive images on their editing pages. Go to the Anqi CMS backend, navigate toContent management-Document Category。Select a category you need to configure the image for editing (or create a new category). Below the category editing page, you will find the options "Banner image" and "Thumbnail".
- Thumbnail：English translation: Typically used for list pages, recommended areas, or category covers as a single image. You can upload an image that represents the category.
- Banner imageSupports uploading multiple images, very suitable for displaying as a carousel at the top of a category page, enhancing the dynamic sense and visual impact of the page.
TipsWhen uploading Banner images, it is recommended to maintain consistent image sizes to ensure a smooth and beautiful slideshow effect.
2. Configure the thumbnail and Banner carousel of a single page
The single-page (such as "About UsPage Resources-Page Management. Select a single page to edit, and below the editing page, you will also see the "" settings options, which are configured in a similar way to category images.Banner image" and "Thumbnail" settings options, their configuration method is similar to that of category images.
2. In the front-end template, call the category image
After completing the background configuration, we need to call these images in the website's frontend template next, so that they can be displayed.The security CMS adopts Django template engine syntax and can be easily implemented through specific tags.
1. Call the category thumbnail
In the category list page or any location where you need to display category information, you can usecategoryDetailTo get the detailed information of the category, including thumbnails.
- To get the category thumbnail (small image).: Use
Thumbfield.<div> <!-- 假设您正在当前分类页面，会自动获取当前分类的缩略图 --> <img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" /> </div> - To get the category thumbnail (large image or Logo).: Use
Logofield.<div> <!-- 如果您想获取指定ID分类的Logo图片，例如ID为1的分类 --> <img src="{% categoryDetail with name="Logo" id="1" %}" alt="{% categoryDetail with name="Title" id="1" %}" /> </div>
2. English Banner Carousel Call
The Banner Carousel for categories is usually a group of images, and it needs to be displayed one by one through a loop.ImagesField is used to store these images.
<div class="category-banner-slider">
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %} {# 判断是否有Banner图存在 #}
{% for item in categoryBanners %}
<img src="{{ item }}" alt="{% categoryDetail with name="Title" %}" />
{% endfor %}
{% else %}
<!-- 如果没有设置Banner图，可以显示一个默认占位图或者其他内容 -->
<img src="/static/images/default-banner.jpg" alt="默认Banner" />
{% endif %}
{% endcategoryDetail %}
</div>
Tactic: If you only want to display the first image in the Banner as a static cover instead of a carousel, you can do it like this:
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set firstBanner = bannerImages[0] %} {# 获取第一张图片 #}
<div class="category-cover" style="background-image: url({{ firstBanner }});">
<!-- 这里可以放置其他内容 -->
</div>
{% endif %}
{% endcategoryDetail %}
Please note,altThe attribute is very important for the SEO and accessibility of the image, it is recommended to fill in meaningful text in the template.
Chapter 3: Calling single-page images in the front-end template
The method of calling the thumbnail and Banner carousel of a single page is very similar to the category, just with different tags:pageDetail.
1. Call the thumbnail of a single page
<div>
<!-- 获取当前单页面的缩略图 -->
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />
</div>
2. English Single Page Banner Carousel Call
<div class="page-banner-slider">
{% pageDetail pageBanners with name="Images" %}
{% if pageBanners %}
{% for item in pageBanners %}
<img src="{{ item }}" alt="{% pageDetail with name="Title" %}" />
{% endfor %}
{% endif %}
{% endpageDetail %}
</div>
Four, Image Optimization and Performance Consideration
In order to enhance website loading speed and user experience, it is crucial to optimize images reasonably. Anqi CMS provides a series of image processing functions in “Backend settings-Content Settings”.
- whether to enable Webp image format：After enabled, uploaded JPG, PNG and other images will be automatically converted to WebP format, which can effectively reduce the image size while maintaining good image quality.
- whether to automatically compress large images：For images with larger dimensions, automatic compression can save storage space and speed up loading.
- Thumbnail processing methods and dimensions：You can set the thumbnail generation method (such as aspect ratio scaling, padding, or cropping) and fixed size according to the needs of the front-end template to avoid transmitting excessively large images.
Suggest that you configure these options reasonably according to the actual needs of the website, so that the images can be presented to the user in the most optimized way while ensuring quality.
By following these steps, you can flexibly obtain and display thumbnails and banner carousel images of categories and single pages in the Anqi CMS, adding rich visual content to your website and enhancing the user experience.
Common Questions (FAQ)
1. I have uploaded the category Banner image on the backend, why is it not displayed on the front-end page?This usually occurs because the calling code for the banner image is missing in the front-end template. You need to check the template files for the corresponding category list page or detail page to ensure that it is used properly.{% categoryDetail categoryBanners with name="Images" %}This label is used to retrieve and loop through the image path. If the template does not have the corresponding<img>label or carousel component, the image will not be displayed.
2. How to set the display size and cropping method of category thumbnails?Safe CMS provides two ways to set up:
- Global SettingsIn the "Backend Settings" -> "Content Settings
- Template controlled by CSS: Even if a specific size thumbnail is generated in the background, you can still set the CSS styles in the front-end template,
width/height/object-fitAdjust the final display size and adaptation method of the image using properties.
What are the differences in function between the classified Banner image and the single-page Banner image?In terms of functional implementation, the category Banner image and the single page Banner image are both used to display image carousels or static backgrounds. Their main difference lies in the associated content entities:
- Category Banner ImageIt is usually associated with specific article categories, product categories, and content lists, used to enhance the visual effects of the category page.
- Single Page Banner ImageAssociated with independent, non-list content pages (such as "About Us
categoryDetailCorresponding category,pageDetailCorresponding single page).