In website operation, designing unique visual elements for different classification 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.Auto CMS provides intuitive and powerful functionality to meet this requirement.
How does Anqi CMS support category-specific visual content?
In the backend management interface of Anqi CMS, setting a unique Banner image or thumbnail for each category is the first step to achieve personalized display.When we enter the 'Content Management' under the 'Document Classification' page, whether we create a new category or edit an existing category, we can find a collapsible area named 'Other Parameters'.Expand this area and you will find two very critical settings items, “Banner Image” and “Thumbnail”.}']
“Banner image”is usually used to display multiple images, forming a slideshow 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.
The 'thumbnail' is more commonly used to represent a category as a small image in category lists, or as a supplement to the main visual image on the category page. Here, usually only one image needs to be uploaded.
These backend settings allow for customizing visual content for each category, making your website content more vivid and targeted.
Obtain and display this content in the template.
Completed the background settings, the next step is to correctly call and display these images in the front-end template of the website. This is mainly done through the powerful template tags of the Anqi CMS, especiallycategoryDetailLabel. When you are on the category list page (such as, usually named{模型table}/list.htmlpage) system will automatically recognize the current category, and through thecategoryDetaillabel 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 using the following method:
<img src="{% categoryDetail with name='Thumb' %}" alt="{% categoryDetail with name='Title' %}" />
If the upload on the backend is a category called “Logo” (usually used as the main image), it can be retrieved like this:
<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.srcIf the current category does not have a corresponding image set, this tag will return an empty string.
Display category Banner carousel image
If multiple 'Banner images' are uploaded after the category is set up, they will be stored as a group of images. We can utilizecategoryDetaillabel combined withforLoop 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 on the page when no Banner image is uploaded, we usually add{% if bannerImages %}Such 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 some kind ofdivThe background image of the element, 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 %}
Pass{% set firstBanner = bannerImages[0] %}We can conveniently get 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 is not limited to this, it also supports specifying completely different template files for specific categories, which provides infinite possibilities for deeper page customization.When editing categories, you will find a 'Category Template' setting option in the 'Other Parameters'.
By default, the category page will use the general 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 activity category), you can create a new template file, for examplepage/about-us.htmlThen, fill in the 'Category Template' field for this category in the backgroundabout-us.htmlWhen the user visits the 'Company Profile' category, the system will automatically loadpage/about-us.htmlthe template instead of the generic onearticle/list.htmlThus, to achieve a completely personalized page display.
This mechanism allows us to create a unique user experience for the core categories based on business needs, not just by changing a few pictures, making each category page distinct.
Through the above methods, the Anqi CMS provides great flexibility and convenience for website operators, whether it is to upload images through the backend, use template tags to dynamically display, or specify exclusive templates for specific categories, personalized visual presentations of category pages can be easily achieved.This not only improves the aesthetics of the website, but also helps optimize the user experience and the effectiveness of content marketing.
Common Questions (FAQ)
Q: If no specific Banner or thumbnail is set for a category, what will be displayed?A: If no specific Banner or thumbnail is 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' %}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: In the home page or other list pages, if you need to display thumbnails of various categories, you can use
categoryListtags to cycle through all categories. In this loop, each category itemitem) containsThumborLogoField, you can directly call it to display an image: “`twig