How to display a category-specific Banner image or thumbnail on the category page?

In website operation, designing exclusive visual elements for different category pages, such as an eye-catching banner image or a dedicated thumbnail, is an effective means to enhance user experience, strengthen brand image, and promote content conversion.AnQi CMS provides intuitive and powerful function support to meet this requirement.

How does Anqi CMS support category-specific visual content?

On the AnQi CMS backend management interface, setting a unique Banner image or thumbnail for each category is the first step in achieving personalized display.When we enter the 'Content Management' under the 'Document Classification' page, whether we create a new category or edit an existing one, we can find a collapsible area named 'Other Parameters'.Expand this area and you will find these two very critical settings: 'Banner Image' and 'Thumbnail'.

The 'Banner image' is usually used to display multiple images, forming a carousel or album effect, especially suitable for displaying large promotional images at the top of categories to attract visitors.You can upload multiple images according to your actual needs, the system will suggest using images of the same size to ensure consistent display effects on the page.

While "thumbnail" is more commonly used to represent a category in a category list or as a supplement to the main visual on a category page. Here, it usually only requires uploading one image.

These backend settings make it possible to customize the visual content for each category, making your website content more vivid and targeted.

Retrieve and display this content in the template.

After completing the background settings, the next step is to correctly call and display these images in the website's front-end template. This is mainly achieved through the powerful template tags of AnQi CMS, especiallycategoryDetailLabel. When you are on the category list page (for example, usually named{模型table}/list.htmlpage) the system will automatically identify the current category and throughcategoryDetaillabel to obtain its details.

Get a single thumbnail or main image

If you only uploaded a 'thumbnail' or need a larger main image to represent the category, you can get and display it in the template in the following way:

<img src="{% categoryDetail with name='Thumb' %}" alt="{% categoryDetail with name='Title' %}" />

If the category "Logo" (usually used as the main image) is uploaded on the backend, it can be retrieved in this way:

<img src="{% categoryDetail with name='Logo' %}" alt="{% categoryDetail with name='Title' %}" />

These tags will automatically extract the corresponding image path based on the current category and fill it in thesrcproperty. If the current category does not have a corresponding image set, the tag will return an empty string.

Display Category Banner Carousel

If the category backend uploads multiple 'Banner images', they will be stored in the form of an image group. We can usecategoryDetailLabel collaborationforLoop to display these images:

{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
<div class="category-banner-carousel">
    {% for image in bannerImages %}
    <img src="{{ image }}" alt="{% categoryDetail with name='Title' %} Banner" />
    {% endfor %}
</div>
{% endif %}

here,bannerImagesIt will be an array containing image URLs. To avoid blank pages or errors when no Banner image is uploaded, we usually add{% if bannerImages %}Such a conditional judgment ensures that rendering only occurs when the image exists.

Use the Banner image as a background

Sometimes, we may need to use the Banner image as somedivThe element's background image, especially when only the first Banner image needs to be displayed, this method can better integrate into the page design. It can be implemented in this way:

{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
    {% set firstBanner = bannerImages[0] %}
    <div class="category-header" style="background-image: url('{{ firstBanner }}');">
        <!-- 这里可以放置分类标题、简介或其他内容 -->
    </div>
{% endif %}

By{% set firstBanner = bannerImages[0] %}We can conveniently obtain the first image in the image group and apply it as the CSS background image.

Implement category-specific templates to enhance customization experience.

The flexibility of AnQi CMS does not stop here, it also supports specifying completely different template files for specific categories, which provides infinite possibilities for deeper page customization.When editing categories, in the "Other Parameters", you will find a "Category Template" setting option.

By default, the category page will use the universal list template corresponding to the model, for example, the category list of the article model may usearticle/list.html. But if you want to design a unique layout for a special category (such as 'Company Profile' or a promotional event category), you can create a new template file, for examplepage/about-us.htmlThen fill in the "Category Template" field of this category in the backgroundabout-us.htmlSo when the user visits the "Company Profile" category, the system will automatically loadpage/about-us.htmltemplate instead of the general onearticle/list.htmlThus, achieving a completely personalized page display.

This mechanism allows us to create a unique user experience for core categories based on business needs, not just by changing a few pictures, making each category page distinct.

Through the above method, Anqi CMS provides website operators with great flexibility and convenience, whether it is through uploading pictures on the backend, using template tags for dynamic display, or specifying exclusive templates for specific categories, it can easily achieve personalized visual presentation of category pages.This not only improves the aesthetics of the website, but also helps optimize the user experience and content marketing effectiveness.

Frequently Asked Questions (FAQ)

1. Q: What will be displayed if a category does not have a specific Banner or thumbnail set?A: If no specific Banner or thumbnail has been set for the category, the template will usually display a blank space or a default image set by the template designer. When writing the template, we usually add conditional judgments (such as{% if categoryDetail with name='Thumb' %}) to ensure that the image is rendered only when it exists, thus avoiding displaying broken links or blank areas.If the template does not make such a judgment and does not have a default image, the position may display a blank or unloading placeholder.

2. Q: How to display all category thumbnails on the homepage or other list pages instead of seeing them only after entering the category detail page?A: On the homepage or other list pages, if you need to display thumbnails of various categories, you can usecategoryListtags to cyclically output all categories. In this loop, each category itemitemIt includesThumborLogoField, you can directly call it to display an image: “`twig