How to display custom Banner images on AnQiCMS pages?

In website operation, cleverly using Banner images not only beautifies the page, but also effectively conveys information and guides user behavior.AnQiCMS as a flexible content management system provides various ways to display custom banner images, allowing you to customize the configuration according to different pages and needs.

Flexible upload and management of Banner images

First, all images to be used as banners need to 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.It is recommended to adjust the size and proportion of the image before uploading, based on 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 Display"), you will find the "Banner Image" option on the category editing page.Here 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" in "Page Management", and you will also see the "Banner Image" setting area, where you can configure a unique Banner for the single page.
  3. Global or Group Banner:AnQiCMS also supports creating different groups of Banners, such as for the top large image carousel on the website homepage, or for a specific event page Banner group.These banners can be configured and managed in the background through specific features, and can be called through the "group name" in the code.

Display Banner image in page template

After configuring the Banner image, the next step is to display them on the website page.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 group of carousel banners at the top of the website's homepage or in a specific area, you can usebannerListLabel. This label can retrieve the pre-configured Banner list from the background.

For example, if you want 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 tobannersVariable.
  • {% 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 (very important for SEO and accessibility),{{item.Title}}Get the title of the image.

By combining front-end JavaScript libraries and CSS styles, you can easily implement dynamic effects like Banner carousel and fade in/out.

2. Display category page and single page banners

For category pages and single pages, their banner images are directly uploaded 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 the page.

For example, on a category page:

Suppose you want to display a category-specific Banner image at the top of the list page for a certain 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 this 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 any images have been uploaded.
  • {% for img in categoryImages %}Iterate and display all Banner images.
  • {% set firstBanner = bannerImages[0] %}Then get the first picture in the list.
  • {% categoryDetail with name='Title' %}Used to get the title of the current category as the picture'saltattribute, which is helpful for SEO.

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

Just need tocategoryDetailReplacepageDetailThat'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 the Banner image display suggestions

  • Maintain consistent size:Especially for the carousel Banner, make sure all the images have the same size to avoid page layout jumps and provide a smoother visual experience.
  • Add descriptive text (Alt attribute): altAttributes are not only crucial for Search Engine Optimization (SEO), but also provide text descriptions when images cannot be loaded, improving 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 function of automatic image compression and WebP format conversion, which can be enabled.
  • Set links reasonably:Banner images usually contain links, make sure 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.

Frequently Asked Questions (FAQ)

1. Why did I upload a Banner image but it didn't display on the website front end?This usually has several reasons. First, please check if you have uploaded the image in the correct background location (for example: the Banner image of the category page should be uploaded on the editing page of the corresponding category).Secondly, confirm that you have used the correct tags to call the image in the template, and the tags innameParameters such asImages), andtypeParameters (for thebannerListDoes it match the background configuration. Finally, check if the website cache has been updated, the AnQiCMS background provides a "Update Cache" feature, clear the cache and refresh the page to see if it takes effect.

How to implement the banner image carousel or slideshow effect?The AnQiCMS template tags are mainly responsible for outputting image addresses and related information. The dynamic carousel effect of the image itself depends on the front-end JavaScript library and CSS styles to implement. You can use it in the template bybannerList/categoryDetailorpageDetailThe label retrieves all the URLs of Banner images, then combines popular frontend carousel libraries (such as Swiper, Slick Carousel, or Bootstrap Carousel) to write JavaScript code to render these images as dynamic carousels.

3. If I want to display banners of different sizes on different pages, does AnQiCMS support it?When uploading images on the AnQiCMS admin panel, you can set automatic image compression, but the final size and style of the displayed image 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, in order to avoid image distortion, the original image size of the uploaded image should meet the maximum size requirements, and it should be scaled or cropped through CSS.