How to display banner carousel images or thumbnails on the category page to enrich the visual effects?

In website operation, the category page is not just a directory of content, but also a key entry point for users to explore and discover your website's services or products.A beautifully designed, visually rich category page can significantly enhance user experience, stimulate their interest, and guide them to explore deeper.AnQiCMS (AnQiCMS) offers flexible and powerful features, allowing you to easily display eye-catching banner carousel images or exquisite thumbnails on category pages, thereby enriching the visual effects and attracting visitors' attention.

Anqi CMS's ability to enrich visual richness

The design philosophy of Anqi CMS focuses on the flexibility and customizability of content display.It allows users to customize content models based on business needs, which means you can set unique display methods for different content types (such as articles, products) and categories.In the category management, you will find options specifically for uploading 'Banner images' and 'thumbnails', which are designed to enhance the visual appeal of the category page.By reasonable configuration, you can make each category page have exclusive visual elements, thereby better conveying the theme of the category and guiding user behavior.

Add Banner Carousel on Category Page

To display a set of banner rotating images on the category page, you first need to use the category management function of the Anqi CMS backend to configure it.

Log in to the AnQi CMS backend and find the "Document Category" under "Content Management".Edit the category you want to add for the Banner, in the edit page, you will see an option for the 'Banner Image'.Here you are allowed to upload multiple images to form a photo group.To achieve the **visual effect, we recommend uploading images of consistent size to ensure the uniformity of the image height during the carousel, and to avoid page jumping.

After the image is uploaded, the next step is how to display these images in the front-end template. The Anqi CMS template system uses a syntax similar to the Django template engine, and the files are usually named with.htmlsuffix and stored in/templateIn the directory. The template files of the category page are usually named{模型table}/list.htmlor{模型table}/list-{文档分类ID}.html.

In your category list template (for examplearticle/list.htmlIn it, you can usecategoryDetailTag to get the details of the current category, including the uploaded Banner image group. Below is a basic template code snippet showing how to retrieve and iterate over these images:

{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
<div class="banner-carousel">
  {% for item in categoryImages %}
    <a href="javascript:void(0);" class="carousel-item"> {# 可以根据需要添加链接 #}
      <img src="{{item}}" alt="分类轮播图片" />
    </a>
  {% endfor %}
</div>
{% endif %}

In this code block,categoryDetail categoryImages with name="Images"Get all the Banner images associated with the current category and assign them tocategoryImagesthe variable. Then, we use{% for ... %}Loop through this image array and embed the URL of each image into<img>In the tag. To achieve the carousel effect, you also need to introduce a front-end JavaScript library (such as Swiper.js or Slick.js) and the corresponding CSS styles to handle image switching, animation, and responsive layout.The Anqi CMS provides data, and the front-end code is responsible for implementing dynamic display.

Display thumbnails on the category page

In addition to the Banner carousel, configuring a representative thumbnail for the category page itself is also an effective way to enhance the visual effect.This is especially applicable in cases where a certain category may only need a fixed image rather than a carousel.

On the category management page, adjacent to the 'Banner Image', there is usually an 'Thumbnail' option.You can upload a well-designed image as a thumbnail for each category.This image can be used as a category icon at the top of the category list, or as a visual guide pointing to the subcategory on the parent category page.

It is equally simple to call the category thumbnail in the template, it is still usingcategoryDetailTags:

{% categoryDetail categoryThumb with name="Thumb" %}
{% if categoryThumb %}
  <img src="{{categoryThumb}}" alt="分类缩略图" class="category-thumbnail" />
{% endif %}

This code will retrieve the thumbnail URL of the current category and display it on the page. Please note,categoryThumbthe variable will contain the full path of the thumbnail.

Moreover, the document (article or product) list displayed on the category page can also be further enriched visually through each respective thumbnail. InarchiveListTagged,item.ThumbYou can directly get the thumbnail of each document, and you can display it together with the document title, summary, and other information:

{% archiveList archives with type="page" categoryId="当前分类ID" limit="10" %}
  {% for item in archives %}
    <div class="article-item">
      {% if item.Thumb %}
        <a href="{{item.Link}}">
          <img src="{{item.Thumb}}" alt="{{item.Title}}" class="article-thumbnail" />
        </a>
      {% endif %}
      <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
      <p>{{item.Description}}</p>
    </div>
  {% endfor %}
{% endarchiveList %}

In this way, the category page not only has its own exclusive visual elements, but the article list below it can also be presented in a rich text and image form, greatly enhancing the attractiveness of the page.

The key elements and skills of template making

It is crucial to understand the template making conventions of Anqi CMS when customizing templates. The template files should follow/templateThe directory structure and naming conventions, for example, the template for the category list page should be placed in the corresponding model directory, and may use such aslist.htmlorlist-{分类ID}.htmlname. Proficient in usingforLoop tags to iterate over the image array and combineifConditional tags to ensure that rendering only occurs when images exist, making your template more robust.

Taking into account the page loading speed and user experience, image optimization is a necessary factor.The Anqi CMS provides various image processing options in the "Content Settings", such as enabling WebP image format, automatically compressing large images, and setting thumbnail sizes.You can configure these options in the background to let the system automatically process images, reducing the burden of front-end optimization.For existing images, the system also supports batch regeneration of thumbnails, making it convenient for you to manage image resources uniformly.

Summary

AnQi CMS provides intuitive and powerful tools for website operators to create captivating visual experiences on category pages.Whether it is to build a Banner carousel by uploading multiple images or to specify a unique style thumbnail for each category, these features are designed to help you better organize and present content, thereby attracting users and enhancing the overall professionalism and user engagement of the website.By flexibly using backend settings and front-end template tags, you can fully tap into the potential of AnQi CMS to create a beautifully and efficiently categorized page.

Frequently Asked Questions (FAQ)

1. Why is only one banner image or none at all displayed on my category page when I uploaded multiple banners?This is usually caused by the front-end template not being written correctly to iterate over the image array. The 'Banner Image' field uploaded on the AnQi CMS backend is represented as an image URL array in the template, and you need to use{% for item in categoryImages %}such loop tags to iterate over this array and generate corresponding for each image<img>Label. If only one is displayed, it may be that you only took the first element of the array. If none are displayed, please check that your template file is correctly referenced.categoryDetailthe tags, andname="Images"Is spelled correctly.

How to make the Banner image or thumbnail of the category page look better on mobile and tablet devices?This involves responsive design and image optimization. In the Anqi CMS backend's 'Content Settings', you can configure automatic image compression, enable WebP format, and set thumbnail size, all of which help reduce image size and speed up loading time.On the front-end template level, you need to combine CSS media queries (Media Queries) to define the maximum width, height, or use images for different screen sizesobject-fitProperty. It is recommended to use a responsive JavaScript carousel library for carousels, as they usually automatically adapt to device screens.

3. Can I set different Banner or thumbnail layout for different categories?Of course, it can. Anqi CMS supports specifying custom templates for individual categories.When editing categories, you can find the "Category Template" option, where you can enter the filename of the template you have designed specifically for this category (for examplemy_category_banner.html). This category will use the template file you specified, and you can freely design the layout and style of its Banner or thumbnail according to the characteristics of the category without affecting other categories.