The attractiveness of visual content is crucial in website operation.A well-designed category thumbnail and an eye-catching banner carousel not only beautifies the website interface but also effectively guides users to browse, enhancing the overall professionalism and user experience of the website.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 obtain and display the thumbnail or banner carousel of the category in Anqi CMS.
1. Configure category images in the Anqi CMS background
First, we need to set the corresponding images for categories or single pages in the Anqi CMS backend.
1. Configure the category thumbnail and Banner carousel image
For various categories such as articles, products, etc. on the website, you can set exclusive images on their editing pages. Navigate to the Anqi CMS backend.Content Management-u003eDocument Category. Choose 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 imageAndThumbnailTwo options.
- Thumbnail: Typically used for list pages, recommended areas, or category covers. You can upload a picture representing the category.
- Banner image: Support uploading multiple images, very suitable for displaying as a carousel at the top of the category page, enhancing the dynamic sense and visual impact of the page.
温馨提示: When uploading banner images, it is recommended to keep all images of the same size to ensure smooth and beautiful carousel effects.
2. Configure the thumbnail and Banner carousel of the single page
The single-page (such as "About Us", "Contact Us", etc.) in AnQi CMS can also have independent thumbnails and Banner Carousel images. Go to the AnQi CMS backend, navigate toPage Resources-u003ePage Management. Select a single page to edit, below the editing page, you will also see “Banner imageAndThumbnail” settings options, their configuration method is similar to category images.
Two, call the category image in the front-end template
After completing the background configuration, next, we need to call these images in the website's front-end template to display them.The AnQi CMS adopts the Django template engine syntax, making it easy to implement through specific tags.
1. Call the category thumbnail
You can use it on the category list page or any location where you need to display category informationcategoryDetailLabel to get detailed category information, including thumbnails.
- Get category thumbnail (small image): Use.
Thumbfield.<div> <!-- 假设您正在当前分类页面，会自动获取当前分类的缩略图 --> <img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" /> </div> - Get 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. Call the Category Banner Carousel
The Category Banner Carousel is usually a set of images composed of multiple pictures, which need to be displayed one by one through looping.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>
Tips: If you only want to display the first image in the Banner as a static cover instead of a carousel, you can do 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.
3. Call the single page image in the front-end template.
The method of calling the thumbnail and Banner carousel on a single page is very similar, just the tags used are different:pageDetail.
1. Call the thumbnail of a single page
<div>
<!-- 获取当前单页面的缩略图 -->
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />
</div>
2. Call the single-page Banner carousel
<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>
4. Image optimization and performance considerations
To enhance website loading speed and user experience, it is crucial to optimize images reasonably. Anqi CMS provides a series of image processing features in “Backend settings-u003eContent settings”
- Whether to enable Webp image formatAfter enabling, uploaded JPG, PNG, and other images will be automatically converted to WebP format, which can effectively reduce image size while maintaining good image quality.
- Whether to automatically compress large images: For large images, automatic compression can save storage space and speed up loading.
- Thumbnail processing methods and size: You can set the thumbnail generation method (such as aspect ratio scaling, padding, or cropping) and fixed size according to the requirements of the front-end template to avoid transmitting large images.
Suggest you configure these options reasonably according to the actual needs of the website, so that the images can be displayed to the users in the most optimized way while ensuring the quality.
By following these steps, you can flexibly obtain and display thumbnails and banner sliders for categories and single pages in Anqi CMS, adding rich visual content to your website and enhancing the user experience.
Frequently Asked Questions (FAQ)
1. I have uploaded the Banner image for the category on the backend, why is it not displayed on the front page?This is usually because the code to call the Banner image is missing in the frontend template. You need to check the template files corresponding to the category list page or detail page to ensure that it is used{% categoryDetail categoryBanners with name="Images" %}Such a tag is used to obtain and loop the image path. If the template does not have the corresponding<img>tag or carousel component, the image will not display.
2. How to set the display size and cropping method of category thumbnails?Anqi CMS provides two ways to set up:
- Global SettingsIn the background's 'Background Settings' -> 'Content Settings', you can find the options for 'Thumbnail Processing Method' and 'Thumbnail Size', where you can configure the unified generation of thumbnails for the entire site.
- Template control through CSS: Even if the background generates a thumbnail of a specific size, you can still set it in the CSS style of the front-end template by setting
width/height/object-fitAdjust the final display size and adaptation method of the image with these properties.
3. What are the differences in functionality between the category Banner image and the single page Banner image?In terms of functional implementation, both the category Banner image and the single-page Banner image are used to display image carousels or static backgrounds. Their main difference lies in the associated content entities:
- Category Banner Image: Usually associated with specific article categories, product categories, and content lists to enhance the visual effects of the category page.
- Single page Banner image: Associated with independent, non-list type content pages (such as "About Us", "Service Introduction"), used to enhance the design feel of a single page. When called in the template, they use different tags (
categoryDetailCorresponding category,pageDetailCorresponding single page).