How to customize and display category banner images or thumbnails in AnQiCMS to enhance the visual effect?

In website operation, the application of visual elements is crucial for attracting users and enhancing brand image.The category page is an important entry point for users to browse content. If it is equipped with a dedicated banner image or thumbnail, it will undoubtedly greatly enhance the aesthetics and professionalism of the page.Next, let's take a look at how to achieve this effect in AnQiCMS.

1. Backend settings: Configure exclusive visual elements for categories

To add exclusive visual elements to the category, we first need to enter the AnQiCMS backend management interface.Please find and click on the "Content ManagementHere, you can manage all the categories of the website, whether it is article categories, product categories, or other content model categories you have customized, they can all be visually customized.

Click the 'Edit' button of an existing category, or when creating a new category, you will see a form with multiple settings.At the bottom of the form, there is usually a collapsible area for 'other parameters'.

  1. Banner image:If you want to display one or more large images at the top of the category page as a banner ad or background, you can upload them here.AnQiCMS supports you to upload multiple images to create a Banner carousel effect.To ensure the consistent display effect of the page, it is recommended that you upload images of the same size.
  2. Thumbnail:Category thumbnails are typically used in category lists, navigation menus, or other modules to represent the category in a small image format.It is not necessary, but it is very helpful for enhancing the visual recognition of the list.Here, usually just upload one image.

You can upload the designed Banner image and thumbnail to the corresponding position according to your actual needs. After uploading, remember to click 'OK' to save your category settings.

Although we are setting a category-specific image here, we also need to pay attention to the options related to 'thumbnail processing method' and 'thumbnail size' in the global content settings.These global settings may affect the final display effect of category thumbnails, maintaining consistency helps coordinate the overall style of the website.

Template invocation: Let visual elements shine on the front stage

After the upload of the background images is completed, the next step is to display them elegantly on the website front end.This requires us to adjust the template files of AnQiCMS.AnQiCMS uses a syntax similar to the Django template engine, and after getting familiar with it, you will find its flexibility and ease of use.

Usually, the template files for category pages may be locatedtemplate/{您的模板目录}/{模型table}/list.html Or you can customize for a specific categorylist-{分类id}.htmlIf the category banner image needs to be displayed at the top of the article or product detail page, it may also need to be modified.detail.htmlTemplate.

AnQiCMS providescategoryDetailThe tag is specifically used to retrieve detailed information about the current or specified category, including the banner image and thumbnail we just uploaded.

1. Call the category thumbnail (Thumb)

If you only want to display a concise thumbnail for each category, for example in some category list module, you can usecategoryDetaillabel and specifyname="Thumb".

Assume you have a category list, and you want to display the thumbnail and name of each category:

{% categoryList categories with moduleId="1" parentId="0" %} {# 假设获取文章模型下的顶级分类 #}
    <ul class="category-thumbs">
        {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
                {% else %}
                    {# 如果没有缩略图，可以显示一个默认图片或文字 #}
                    <img src="/public/static/images/default-thumb.png" alt="默认图片" />
                {% endif %}
                <h3>{{ item.Title }}</h3>
            </a>
        </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

On the category list page (such aslist.html），If you want to display the thumbnail of the current category directly, you can write it like this：

{# 在分类列表页顶部显示当前分类缩略图 #}
<div class="category-banner-thumb">
    {% categoryDetail currentCategoryThumb with name="Thumb" %}
    {% if currentCategoryThumb %}
        <img src="{{ currentCategoryThumb }}" alt="{% categoryDetail with name="Title" %}" />
    {% endif %}
</div>

2. Call the category Banner image (Images or Logo)

For the large banner image at the top of the category page, you can choose to call a singleLogoimage (usually the main banner image), or callImagesa field to achieve the carousel effect.

Display a single Banner image:

If you only need to display one main Banner image, you can call it directlyLogoField.This field is usually specified as the Logo when uploading the 'Banner image' on the backend, or when uploading the 'thumbnail', the large image is chosen as the Logo.

{# 在分类列表页顶部显示当前分类Banner大图 #}
<div class="page-banner">
    {% categoryDetail categoryBannerLogo with name="Logo" %}
    {% if categoryBannerLogo %}
        <img src="{{ categoryBannerLogo }}" alt="{% categoryDetail with name="Title" %}" style="width: 100%; height: auto;" />
    {% endif %}
</div>

Or, if you have uploaded multiple Banner images toImagesField, but only show the first one, you can handle it like this:

{# 从Banner组图中获取第一张图片作为主Banner #}
<div class="page-banner">
    {% categoryDetail bannerImages with name="Images" %}
    {% if bannerImages %}
        {% set mainBanner = bannerImages[0] %}
        <img src="{{ mainBanner }}" alt="{% categoryDetail with name="Title" %}" style="width: 100%; height: auto;" />
    {% endif %}
</div>

Display multiple Banner images (carousel effect):

If your design requires displaying multiple Banner images in a carousel, thenImagesthe field will return an array of image URLs, you can useforLoop to iterate and work with the frontend JS carousel plugin to implement:

{# 遍历所有Banner图，用于轮播组件 #}
<div class="swiper-container"> {# 假设您使用了Swiper轮播库 #}
    <div class="swiper-wrapper">
        {% categoryDetail categoryImages with name="Images" %}
        {% for item in categoryImages %}
        <div class="swiper-slide">
            <img src="{{ item }}" alt="{% categoryDetail with name="Title" %}" style="width: 100%; height: auto;" />
        </div>
        {% endfor %}
        {% endcategoryDetail %}
    </div>
    {# 如果需要，可以添加分页器和导航按钮 #}
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

3. Visual effects enhancement and practice**

Just displaying images is not enough, how can we truly enhance the visual effect? Here are some suggestions:

  • Responsive design:Ensure your Banner image and thumbnail display well on different devices (PC, tablet, mobile). Use CSSmax-width: 100%; height: auto;is a basic responsive practice.
  • Image optimization:Compress the image before uploading and consider using modern image formats like WebP to speed up page loading.AnQiCMS provides WebP conversion and automatic compression of large images in the content settings, you can make full use of it.
  • Alt text:Add descriptive text to the imagealtText that not only helps with SEO but also improves website accessibility and is very friendly for users of screen readers. In the above example, we usedalt="{{ item.Title }}".
  • Uniform style:Try to maintain the same visual elements