How to display a custom Banner image on the AnQiCMS page?

In website operation, skillfully using Banner images can not only beautify the page, but also effectively convey information and guide user behavior.AnQiCMS as a flexible content management system, provides various ways to display customized Banner images, allowing you to configure them individually according to different pages and needs.

Flexible upload and management of Banner images

Firstly, all images to be used as banners must be uploaded to the AnQiCMS media library.This is very simple, you can go to the "Page Resources" menu in the background and select "Image Resource Management.Here, you can easily upload images and categorize them for future search and use.Suggest to handle the size and ratio of the image before uploading, according to the expected display position and design style of the Banner, to ensure the visual effect.

AnQiCMS allows you to configure Banner images in different content types, mainly reflected in the following aspects:

  1. Category Page Banner:When you edit a content category (such as "News Center" or "Product DisplayHere you can upload one or more exclusive Banner images for this category.
  2. Single page Banner:For independent single pages like “About Us” and “Contact Information”, you can edit the corresponding page under “Page Resources” -> “Page Management”. You will also see the “Banner Image” settings area, where you can configure a unique Banner for this single page.
  3. Global or Group Banner:

Display Banner images in page template

Configure the Banner image and then display them on the website pages.AnQiCMS's template system adopts a concise syntax similar to Django, calling and rendering content through specific tags.

1. Display global or group-configured Banner

If you want to display a set of carousel banners at the top of the website's homepage or in a specific area, you can usebannerListLabel. This label can fetch the pre-configured Banner list from the backend.

For example, to display a "slide" group Banner on the homepage, you can write it like this in the template file:

{% bannerList banners with type="幻灯" %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

In this code block:

  • {% bannerList banners with type="幻灯" %}Called the Banner group named "幻灯" and assigned the obtained image list tobannersa variable.
  • {% for item in banners %}Traversed each image in the Banner list.
  • {{item.Link}}Get the link address of the image,{{item.Logo}}Get the image file address,{{item.Alt}}Get the alternative text of the image (important for SEO and accessibility),{{item.Title}}Get the title of the image.

By combining frontend JavaScript libraries and CSS styles, you can easily implement dynamic effects such as Banner rotation, fade-in and fade-out.

2. Show category page and single page Banner

For the category page and single page, their banner images are uploaded directly in the content settings. Therefore, we need tocategoryDetailtags (for category pages) orpageDetailTags (for single page) to retrieve these images. These tags will return aImagesfield that contains all the uploaded Banner images on this page.

For example, on a category page:

If you want to display a dedicated Banner image at the top of the list page for a specific category:

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

If the category only uploaded one Banner image, and you only want to display the first image, you can handle it like this:

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

In this code:

  • {% categoryDetail categoryImages with name="Images" %}Get the list of all Banner images uploaded for the current category and assign it tocategoryImages.
  • {% if categoryImages %}Determine if an image has been uploaded.
  • {% for img in categoryImages %}Iterate and display all Banner images.
  • {% set firstBanner = bannerImages[0] %}Then get the first image in the list.
  • {% categoryDetail with name='Title' %}Used to get the title of the current category as the image.altAttribute, which is helpful for SEO.

The display method of the Banner image on a single page is similar to the category page:

Just need tocategoryDetailwithpageDetailThat's it, for example:

{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
    {% set firstPageBanner = pageImages[0] %}
    <div class="single-page-header-banner" style="background-image: url('{{ firstPageBanner }}');">
        <h3>{% pageDetail with name="Title" %}</h3>
    </div>
{% endif %}

Optimize Banner Image Display Suggestions

  • Maintain Consistent Dimensions:Especially for the carousel Banner, make sure all images have the same size to avoid layout jumps and provide a smoother visual experience.
  • Add descriptive text (Alt attribute): altThe attribute is not only crucial for search engine optimization (SEO), but also provides text descriptions when images cannot be loaded, enhancing the accessibility of the website.
  • Optimize image size:Using a compression tool to reduce the size of image files can significantly improve page loading speed and enhance user experience.AnQiCMS backend's "Content Settings" also provides the feature of automatic image compression and WebP format conversion, which can be enabled.
  • Set links reasonably:Banner images usually contain links, ensuring that the links point to correct and valuable target pages.

By following these steps, you can flexibly display various custom Banner images on the AnQiCMS website, adding visual appeal to your site and better achieving your operational goals.

Common Questions (FAQ)

1. Why didn't the Banner image I uploaded display on the website front end?This usually has several reasons.Firstly, please check if you have uploaded the image in the correct background position (for example: the Banner image on the category page should be uploaded on the corresponding category editing page).nameparameters (such as)Images) andtypeParameters (for specific)bannerListIs it consistent with the backend configuration.Finally, check if the website cache has been updated. AnQiCMS backend provides a 'Update Cache' feature, clear the cache and refresh the page to see if it takes effect.

2. How to implement the Banner image rotation or slideshow effect?AnQiCMS's template tags are mainly responsible for outputting image addresses and related information, and the dynamic carousel effect of the image itself needs to be implemented with the help of front-end JavaScript libraries and CSS styles. You can use template tags to output image addresses and related information in the template.bannerList/categoryDetailorpageDetail标签获取到所有Banner图片的URL，然后结合流行的前端轮播库（如Swiper、Slick Carousel或Bootstrap Carousel）编写JavaScript代码，将这些图片渲染成动态轮播图。

3. If I want to display different sizes of Banners on different pages, does AnQiCMS support this?AnQiCMS backend uploads images, where you can set automatic image compression, but the size and style of the images displayed on the page are mainly controlled by the template's CSS styles.If you need to display different-sized Banners on different pages or different areas, it is recommended to define different CSS style rules for these areas when designing the template.At the same time, to avoid image distortion, the original image size uploaded should be able to meet the requirement of the maximum size, and should be scaled or cropped through CSS.