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 offers flexible ways to display these banner images in your website template, whether it's a homepage carousel, a category page special image, or a single page promotional image, it can be easily achieved through concise template tags.
In AnQiCMS, the website's banner images are not managed in a single location, but are scattered in different management modules according to their purpose and scope, which gives website operators great flexibility.
- System-level Banner (Home/General): Typically used for large-scale carousel ads on the homepage or in specific areas across the entire site, displayed in a looping manner.This type of Banner can be managed and called uniformly in the background through the 'Home Banner List' or a custom 'Banner Group'.
- Category Page Banner: For Banners specific to certain product or article categories, settings can be made under "Content Management" in the "Document Categories" section of the backend.When the user visits this category page, these banners will be displayed accordingly.
- Single Page Banner: Designed as Banners for independent pages such as "About Us" and "Contact Us", they can be individually uploaded and configured for each single page under "Page Resources" in the background "Page Management".
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 general area, you can use the AnQiCMS providedbannerListLabel. This label can retrieve the system-level banner list you configure in the background and allows you to display it repeatedly through a loop.
First, in your template file (such as the home page templateindex/index.htmlor the public headerpartial/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 nameddefaultThe Banner group's list of all images. You can use the group name you created in the background totype="default"withtype="您的分组名称". The list obtained will be assigned to the namebanners.{% if banners %}This is a conditional judgment, ensuring that onlybannersthe variable has content (i.e., there is a Banner configured on the back-end) does the subsequent code rendering, to avoid blank pages or errors.{% for item in banners %}：TraversebannersEach Banner image in the list. In each loop, the data of the current Banner will be stored initemthe variable.{{item.Link}}: The link to which the Banner image will redirect after being clicked.{{item.Logo}}: Display the URL of the Banner image.{{item.Alt}}: Display the Banner image.altText, which 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 background, 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 judging whether it is 1, it can add a class to the first Banneractivewhich is often used to mark the initial display item when making a carousel.
By such a structure, you can easily display a beautiful system-level Banner image list on the front-end page.Of course, you can add the corresponding CSS styles according to your actual design requirements to beautify their layout and animation effects.
Display category page Banner image list in 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 usecategoryDetailLabel to get the detailed information of the current category, which includes the list of Banner images you have uploaded in the background.
Assuming you are editing the category detail page template (for examplearchive/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 field to be retrieved, it will return an array containing all Banner image URLs and assign it tocategoryBannersVariable.{% set firstBanner = categoryBanners[0] %}: By index[0]It is easy to obtain the first image in the image array, which is very suitable as the main banner image of the page.{% for image in categoryBanners %}: If you upload multiple Banner images for a category and want them to be displayed in a carousel, you can useforLoop throughcategoryBannerseach image in the array.alt="{% categoryDetail with name='Title' %} 宣传图": This emphasizes again.altThe importance of properties, filled dynamically with category titles to enhance the semanticization of images.
Displaying a single-page Banner image list in the template.
Similar to the category page Banner, if you upload a Banner image for a specific single page (such as "Contact Us") you can also get and display them throughpageDetailtags.
In your single-page template (for example),page/detail.htmlyou can refer to the following method 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 category page Banner call, justcategoryDetailreplaced withpageDetail, thus obtaining the list of Banner images for the current single page.
Practical tips and suggestions
- Image optimization is crucialThe large banner image is a common cause of website loading speed issues.AnQiCMS provides features such as 'Enable Webp image format' and 'Automatically compress large images' in the background 'Content Settings', it is recommended to make full use of these tools to optimize images and improve user experience.
- Ensure image quality and sizeWhen uploading a Banner, try to maintain high image quality and uniform size to avoid stretching or blurring on the front end.At the same time, consider the display effect of images on different devices (PC, mobile) and make a responsive design.
- Fill in the Alt attributeWhen uploading or configuring the Banner on the backend, be sure to fill in meaningful content
AltText. This is not only friendly to SEO, but also provides text descriptions when images fail to load, and improves the experience for screen reader users. - Back-end management and front-end display联动: The design of AnQiCMS integrates backend operations with frontend display. After configuring the Banner, remember to check whether the display of the frontend page meets expectations in a timely manner.
By using the above method, you can flexibly and efficiently display a list of various Banner images on the AnQiCMS template, adding visual appeal to your website and better conveying your core message.
Frequently Asked Questions (FAQ)
Q1: Why have I uploaded the Banner image on the backend, but it is not displaying on the frontend of the website?
**A1