The visual elements of a website are crucial for attracting visitors and conveying brand information, and the banner image list is one of its core components.AnQiCMS as a powerful content management system, provides a flexible way to display these banner images in your website templates. Whether it's the homepage carousel, special images on category pages, or promotional images on single pages, all can be easily realized with concise template tags.
In AnQiCMS, the Banner images of the website are not managed in a single location, but are scattered across different management modules based on their purpose and scope, which gives website operators great flexibility.
- System-level Banner (Home Page/General)An extensive carousel commonly used on the homepage of a website or a universal Banner that is displayed in specific areas throughout the entire site.This type of Banner can be centrally managed and called through the "Home Page Banner List" or a custom "Banner Group" in the backend.
- Category Page BannerFor specific product or article category banners, settings can be made under 'Content Management' -> 'Document Category' in the backend.These banners will be displayed when the user visits this category page.
- Single Page BannerA Banner designed for independent pages such as 'About Us' and 'Contact Us', which can be individually uploaded and configured for each single page under 'Page Resources' -> 'Page Management' in the backend.
Understood the origin of the Banner, next we will delve into how to flexibly call and display these images in your AnQiCMS template according to different needs.
Display system-level banner image list in the template
When you need to display a set of Banner images on the homepage or some common area of the website, you can use the AnQiCMS providedbannerListThis tag can retrieve the system-level Banner list that you have configured in the background, and allows you to display it in a loop.
Firstly, in your template file (such as the home page template)index/index.htmlor the common header)partial/header.html), you can use the following structure to call the Banner list:
{% bannerList banners with type="default" %}
{% if banners %}
<div class="banner-carousel">
{% for item in banners %}
<a class="banner-item {% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
{% if item.Title %}
<h5 class="banner-title">{{item.Title}}</h5>
{% endif %}
{% if item.Description %}
<p class="banner-description">{{item.Description}}</p>
{% endif %}
</a>
{% endfor %}
</div>
{% endif %}
{% endbannerList %}
In this code block:
{% bannerList banners with type="default" %}: This is a tag that will retrieve the one nameddefaultThe Banner group's list of all images. You can replace it with the group name you created in the background.type="default"Replace it withtype="您的分组名称". The list obtained will be assigned to a variable namedbanners.{% if banners %}This is a conditional judgment to ensure that subsequent code is rendered only whenbannersthe variable has content (i.e., there is a configuration for Banner in the background), to avoid blank pages or errors on the page.{% for item in banners %}: Iterate overbannersEach Banner image in the list. The data of the current Banner will be stored in it during each loop.itemthe variable.{{item.Link}}: The link where the Banner image jumps to after being clicked.{{item.Logo}}【en】Show the URL address of the Banner image.{{item.Alt}}【en】Show the Banner image.alt【en】The text is very important for image SEO and accessibility.{{item.Title}}and{{item.Description}}If your Banner is configured with a title and description in the backend, it will be displayed here.{% if forloop.Counter == 1 %}active{% endif %}This is a very practical trick.forloop.CounterIt will return the current loop count. By checking if it is 1, you can add a class to the first Banner.activeThis is often used to mark the initially displayed item when making a carousel.
With such a structure, you can easily display a beautiful system-level banner image list on the frontend page.Of course, you can add corresponding CSS styles according to your actual design requirements to beautify their layout and animation effects.
Display category page Banner image list in the template
If your website design requires displaying a category-specific Banner image at the top of each category page, AnQiCMS also provides a convenient way. You can go throughcategoryDetailTo obtain detailed information about the current category, use the label, which includes the list of Banner images you uploaded in the background.
Assuming you are editing the template of the category detail page (for example)archive/list.html), you can call the category Banner like this:
<div class="category-banner-section">
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
{# 如果只需要显示一张Banner作为头部大图 #}
{% set firstBanner = categoryBanners[0] %}
{% if firstBanner %}
<div class="hero-banner" style="background-image: url('{{ firstBanner }}');">
{# 可以在这里放置分类标题等信息 #}
<h1>{% categoryDetail with name="Title" %}</h1>
</div>
{% endif %}
{# 如果需要以轮播形式展示多张Banner #}
<div class="category-carousel">
{% for image in categoryBanners %}
<img src="{{ image }}" alt="{% categoryDetail with name='Title' %} 宣传图" class="carousel-image" />
{% endfor %}
</div>
{% endif %}
{% endcategoryDetail %}
</div>
Here:
{% categoryDetail categoryBanners with name="Images" %}: This tag is used to get the image list of the current category.name="Images"Specified the fields to retrieve, it will return an array containing all Banner image URLs and assign it tocategoryBannersa variable.{% set firstBanner = categoryBanners[0] %}: By index[0]It is easy to obtain the first image from the image array, which is very suitable as the main Banner image of the page.{% for image in categoryBanners %}If you have uploaded multiple Banner images for a category and wish to display them in a carousel, you can useforto iteratecategoryBannerseach image in the array.alt="{% categoryDetail with name='Title' %} 宣传图"This emphasizes again:altThe importance of attributes, enhanced by dynamically obtaining category titles to fill, strengthens the semantics of images.
Displaying a single-page Banner image list in the template.
Similar to the Banner on the category page, if you have uploaded a Banner image for a specific single page (such as "Contact Us"), you can also retrieve and display it throughpageDetailtags.
In your single page template (such aspage/detail.html) you can refer to the following methods to call the page Banner:
<div class="page-banner-container">
{% pageDetail pageBanners with name="Images" %}
{% if pageBanners %}
{# 同样，可以根据需求选择只显示一张，或多张轮播 #}
{% set mainPageBanner = pageBanners[0] %}
{% if mainPageBanner %}
<img src="{{ mainPageBanner }}" alt="{% pageDetail with name='Title' %} 顶部Banner" class="single-page-hero" />
{% endif %}
{# 如果是多图轮播，结构与上面分类页类似 #}
{% endif %}
{% endpageDetail %}
</div>
This code's logic is very similar to the Banner call on the classification page, just thatcategoryDetailhas been replaced withpageDetail, thus obtaining the Banner image list for the current single page.
Practical Tips and Suggestions
- Image optimization is crucial
- Ensure the image quality and size[en] : When uploading a banner, try to maintain high image quality and uniform dimensions to avoid stretching or blurring when displayed on the frontend.Consider the display effect of images on different devices (PC, mobile) and do a good responsive design.
- Fill in the Alt attributeBe sure to fill in meaningful content when uploading or configuring the Banner on the backend
Alt[en] This not only benefits SEO but also provides text descriptions when images fail to load, while also improving the experience for screen reader users. - [en] The联动 of backend management and frontend displayAnQiCMS design makes the backend operation closely integrated with the frontend display. After configuring the Banner, remember to check the frontend page display as soon as possible.
Through the above method, you can flexibly and efficiently display various Banner image lists in AnQiCMS templates, adding visual appeal to your website and better conveying your core message.
Common Questions (FAQ)
Q1: Why is the Banner image I uploaded to the backend not displaying on the website frontend?
**A1