Does the Anqi CMS document classification support uploading Banner images and thumbnails? How to call them on the front end?

As a website operator who deeply understands the essence of Anqie CMS content management, I know the importance of image content in attracting and retaining users.As for the issue you are concerned about, whether AnQi CMS supports uploading Banner images and thumbnails for document classification, and how to call these resources on the front end, I can clearly tell you that AnQi CMS provides complete support for this and has flexible front-end calling methods.

The image support function of AnQi CMS document classification

The Anqi CMS has fully considered the diversity of website content display needs from the beginning of its design.In the document classification management interface, the system allows operators to upload various types of visual materials for each category.

In particular, when you enter the Anqi CMS backend, under the "Content Management" module and the "Document Category" for adding or editing operations, you will find that the "Other Parameters" area provides options specifically for managing the visual elements of the categories.

The "Banner Image" feature allows you to set a set of carousel images for the category page, which are usually displayed at the top of the page or in a specific area to convey the category theme or attract users.The system supports uploading multiple images and recommends using images of the same size when uploading to ensure consistency and aesthetics in the front-end display.

In addition, Anqi CMS also provides the option to upload 'thumbnails'.The category thumbnail is not required, but it can be displayed as a representative image of the category in certain scenarios on the website front-end, such as category lists, navigation menus, or aggregation pages, helping users quickly identify and understand the category content.You can choose whether to upload according to the actual page design requirements.

The method for calling category image resources on the front-end

The AnqiCMS adopts Django template engine syntax, which makes the development and maintenance of front-end templates very intuitive and flexible.For document classification banner images and thumbnails, you can easily implement calls on the website front-end page using built-in template tags.

Call category thumbnails (Thumb and Logo)

In the Anqi CMS template system, the thumbnails of categories usually have two forms:Thumb(General thumbnails) andLogo(Typically refers to a larger or more representative thumbnail). You can get the thumbnail path for the current category or a specified category bycategoryDetailtag.

For example, on the category detail page, if you need to display the thumbnail of the current category, you can write the template code like this:

{# 调用当前分类的通用缩略图 #}
<div>
    <img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />
</div>

{# 调用当前分类的Logo（大缩略图） #}
<div>
    <img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
</div>

If you want to call each category item's thumbnail in the category list, you cancategoryListaccess directly inside the loopitem.Thumboritem.Logoattribute:

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">
                <h3>{{item.Title}}</h3>
                {# 在分类列表中调用每个分类的缩略图 #}
                {% if item.Thumb %}
                <img src="{{item.Thumb}}" alt="{{item.Title}}" />
                {% endif %}
            </a>
        </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

Call the category Banner group image (Images)

The category banner group images are usually a set of pictures that need to be displayed in a loop.categoryDetailTags providedImagesA field that returns an array of multiple image URLs. You can iterate over this array to build a carousel or other multi-image display effect.

The following is an example of the code to call the Banner group image on the category detail page:

{% categoryDetail categoryImages with name="Images" %}
    {% if categoryImages %} {# 确保有图片才渲染 #}
    <div class="category-banner-carousel">
        {% for imageUrl in categoryImages %}
        <div class="carousel-item">
            <img src="{{imageUrl}}" alt="分类：{% categoryDetail with name="Title" %}" />
        </div>
        {% endfor %}
    </div>
    {% endif %}
{% endcategoryDetail %}

If you only need to use the first Banner image as the background or for a single display on the category page, you can handle it like this:

{% categoryDetail bannerImages with name="Images" %}
    {% set firstBanner = "" %}
    {% if bannerImages|length > 0 %}
        {% set firstBanner = bannerImages[0] %}
    {% endif %}

    {% if firstBanner %}
    <div class="category-header" style="background-image: url('{{firstBanner}}');">
        {# 其他分类标题或内容 #}
        <h1>{% categoryDetail with name="Title" %}</h1>
    </div>
    {% endif %}
{% endcategoryDetail %}

Through these flexible template tags and properties, you can freely display category thumbnails and Banner images on the front page of AnQi CMS according to your website design needs, achieving rich visual effects and better user experience. In actual operation, please ensure that your template file is encoded in UTF-8 and properly placed in/templateThe corresponding template folder under the directory.

Frequently Asked Questions (FAQ)

1. I uploaded the categorized Banner images, but they did not display on the front page. Why is that?There may be multiple reasons why the category Banner image does not display on the front page. First, please check if your frontend template already includes the callcategoryDetailto tag and loop outputImagesThe field code. If the code exists, please confirm that you have uploaded and saved the image in the background "Document Classification" settings.In addition, if your website uses caching, please try to clear the system cache and browser cache.Finally, please check for any error messages in the browser console, as this can help locate the problem.

2. What is the difference between the 'Logo' and 'Thumb' thumbnails, and which one should I use?In Anqi CMS, 'Logo' usually refers to a larger or more visually striking category representative image, while 'Thumb' is a smaller general thumbnail.The specific use depends on the design requirements of your website's frontend page.For example, in an outstanding category display area (such as the home page featured image recommendation), it may be necessary to useLogo, and in a compact category list or breadcrumb navigation,ThumbIt would be more appropriate. You can choose to use it based on the actual size and importance of the display scene.

How to set different links or titles for category Banner images? Does Anqi CMS support this?According to the current document, the "Document Classification" feature of AnQi CMS in the "Banner Image" function is mainly used for uploading image collections, and does not directly provide options to set links or titles for each Banner image individually.These images are usually pure image URL lists when called on the front end.If you need to set independent links and titles for each Banner image, you may consider using the "Single Page Management" feature, and create a single page for each Banner image, then set its link and title in the single page, or customize fields through template secondary development to meet more complex carousel requirements.