In AnQiCMS, you can completely set up multiple Banner groups and flexibly display them in different positions according to the website layout requirements.AnQiCMS provides a multi-dimensional way to manage and call these important visual elements, helping you better organize website content and attract visitors.
【en】One, The core concept of Banner management in AnQiCMS
AnQiCMS demonstrates high flexibility and customization in the management of banners.It not only allows you to configure exclusive Banner carousels for specific parts of the website (such as category pages or single pages), but also supports creating and naming different Banner groups through a unified Banner management mechanism, for easy calls at any location on the website.This design aims to meet various content display needs, whether it's the large carousel on the homepage, thematic recommendations on the article list page, or promotional information on the product detail page, a suitable solution can be found.
【en】Two, How to set up Banner in AnQiCMS backend: Two main methods
AnQiCMS provides two main Banner setting methods to adapt to different management granularity and display scenarios.
1. Add Banner for Specific Page and Category
For the category pages and independent single pages on the website (such as 'About Us', 'Contact Information', etc.), AnQiCMS allows you to upload exclusive Banner images directly in the editing interface of these pages.
- Category Banner SettingsIn the background, go to the 'Content Management' under the 'Document Category' page. When editing or creating a new category, you will see an option for a 'Banner Image'.Here, you can upload multiple images, which will be used as the exclusive Banner carousel for this category page.The system will suggest using images of the same size to maintain consistency in display.
- Single Page Banner SettingsSimilarly, there is also a "Banner Image" area when editing or creating a single page under "Page Resources" -> "Page Management".You can upload multiple images for each single page, which will be used as the carousel banner for that single page.
The advantage of this approach is that it tightly binds the Banner with specific content entities, making it convenient for management and content association.
2. Create and manage custom Banner groups
In addition to the page and category-specific Banners, AnQiCMS also allows you to create generic, named Banner groups. Although the specific menu path for 'Banner Group Management' is not directly shown in the documentation, it can be inferred from the design of the template tags (especially)bannerListthe tag intypeThe parameter can be inferred that there is a centralized Banner management entry on the backend, where you can:
- Define the group nameFor example, you can create different groups named 'Home Main Carousel', 'Product Page Promotion', 'Sidebar Advertisement', and so on.
- Upload images to the groupUpload the images you want to display in a specific group to the corresponding group, and you can set links, descriptions, and alt text for each image.
In this way, you can unify the management of Banners that are not attached to a specific category or page, and call these groups at any location on the website.
Three, call the Banner on the website front-end as needed: flexible template tags
AnQiCMS allows you to easily call different types of Banners on the website front-end through intuitive template tags.
1. Call page/specific category Banner
When you need to display the exclusive Banner on a category page or a single page, you can use the corresponding detail tag to get the image data.
Call category BannerIn the template files of the category (such as
{分类模型}/list.html), you can usecategoryDetailtags to get the details of the current category, and throughImagesfields to get the list of Banner images.{% categoryDetail categoryImages with name="Images" %} {% if categoryImages %} {# 判断是否有Banner图 #} <div class="category-banner-slider"> {% for image in categoryImages %} <img src="{{ image }}" alt="分类Banner" /> {% endfor %} </div> {% endif %}Call Single Page Banner: In the template file of a single page (e.g.
page/detail.html), you can usepageDetailTag to get the details of a single page, and throughImagesfields to get the list of Banner images.{% pageDetail pageImages with name="Images" %} {% if pageImages %} {# 判断是否有Banner图 #} <div class="page-banner-slider"> {% for image in pageImages %} <img src="{{ image }}" alt="单页面Banner" /> {% endfor %} </div> {% endif %}
2. Call Custom Banner Group
For the general Banner group created in the background, you can usebannerListtags to call.
Call the default groupIf you do not specify a specific group name for Banner, they will default to the "default" group.
{% bannerList banners %} {# 调用默认分组Banner #} <div class="default-banner-slider"> {% for item in banners %} <a href="{{item.Link}}" target="_blank"> <img src="{{item.Logo}}" alt="{{item.Alt}}" /> <h5>{{item.Title}}</h5> {# 如果有标题内容 #} </a> {% endfor %} </div>**Call