How does Anqi CMS display the article cover (Logo) and thumbnail (Thumb)?

In content operation, the cover image (Logo) and thumbnail (Thumb) of the article play a crucial role. They not only attract readers' attention and increase click-through rates but are also an indispensable part of search engine optimization (SEO).AnQiCMS (AnQiCMS) provides a flexible and convenient way for users to manage and display these visual elements.This article will discuss in detail how to configure and call the cover image and thumbnail of articles in AnQiCMS.

1. Configuration and generation of cover image and thumbnail

In AnQiCMS, the settings for cover images and thumbnails are divided into manual configuration at the time of article publishing and global processing rules at the system level.

1. Article publishing and intelligent extraction

When you write or edit an article, you can find the "Document Image" area in the "Add Document" or "Edit Document" interface in the background.

  • Manual upload and selection:Here you can upload a brand new image as the thumbnail of the article, or select one from the existing image library.This method provides the highest flexibility, allowing you to carefully select the most suitable image for each article.
  • Automatic extraction:If you have not manually uploaded or selected a thumbnail, but the article content contains images, AnQiCMS will intelligently extract the first image from the article content as the thumbnail for the document.This feature greatly reduces the workload of content creators, ensuring that articles will have default visual display even if they forget to upload.

2. English global thumbnail processing settings

AnQiCMS provides powerful global content settings, allowing you to uniformly manage the generation method of website images and ensure the consistency of visual style.

  • Access path：You can configure these options by accessing the 'Global Settings' -> 'Content Settings' on the backend.
  • Thumbnail processing method:The system provides various thumbnail generation methods to meet different design requirements, such as:
    • Scale proportionally by the longest edge:Maintain the image aspect ratio, adapt to the target size, and may leave some blank space.
    • Pad by the longest edge:Fill the image completely to the target size, and fill the insufficient part with white.
    • Crop by the shortest edge:Automatically center-crop to ensure the image completely covers the target size, which may result in the loss of edge content.
  • Thumbnail size: You can set a default thumbnail size, for example, 200x150 pixels.When the image is uploaded or a thumbnail is generated, the system will process it according to this size and the processing method you choose.
  • Default thumbnail:If an article does not have a manually set thumbnail and no images can be extracted from the content, AnQiCMS allows you to set a "default thumbnail" as the last resort.
  • Batch regenerate:When you modify the global thumbnail size or processing method, the system provides the "batch regenerate thumbnails" feature, which can quickly update all existing thumbnails on the site to ensure they meet the new settings.

Through these configurations, AnQiCMS ensures that the cover image and thumbnail of the article have clear sources and flexible generation mechanisms in the background.

二、In the template, call the article cover image and thumbnail

How to display the cover image and thumbnail in the frontend template after they are configured, is the key to achieving the final effect.AnQiCMS provides an intuitive template tag, making this process simple.

1. Document detail page call

On the page displaying a single article's content (usually the article detail page), you can usearchiveDetailLabel to get the detailed information of the current article, including its cover image and thumbnail.

  • Example of getting the cover image (Logo):The cover image usually refers to the main picture of the article, and sometimes it is also used as the large picture on the list page.archiveDetailin the tag,name="Logo"It will return the URL of the article cover image.

    <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />

  • Example of getting thumbnail (Thumb):Thumbnail images are usually cropped or resized to smaller images, suitable for list display.name="Thumb"It will return the URL of the article thumbnail.

    <img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />

2. Article list page call

When you need to display a list of multiple articles on a page (such as the homepage, category list page), you can usearchiveListLabel performs cyclic calls. Inside the loop body, the data object of each article (for example) includes the URL of its cover image and thumbnail.item) contains its cover image and thumbnail URL.

  • Example of cyclic calls:

    {% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
        <div>
            <a href="{{ item.Link }}">
                {# 显示文章缩略图 #}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
                <h3>{{ item.Title }}</h3>
                <p>{{ item.Description }}</p>
            </a>
        </div>
    {% endfor %}
{% endarchiveList %}

    Here,item.Thumbanditem.LogoIt can directly obtain the URL of the thumbnail and cover image corresponding to the article.

3. Visual elements of other types of pages

In addition to the article, the category page and single page in AnQiCMS also support similar visual element calls:

  • Category page:You can navigate through the category details page or category list bycategoryDetailorcategoryListtags, usename="Logo"orname="Thumb"Get the cover image or thumbnail of the category. For example, the category may have special illustrations or icons.
  • Single page:For single-page pages like "About Us",pageDetailorpageListtags also providename="Logo"orname="Thumb"Field, used to display the visual identifier of the page.

Section 3: Dynamic Thumbnail Processing(thumbThe filter)

AnQiCMS also provides a very practicalthumbFilter, it allows you to dynamically create thumbnail images for any image URL in the template without pre-generating them.This means you can flexibly adjust the size of the image according to the actual needs of the frontend layout.

  • Use cases:If you need a specific size (such as, 100 pixels wide) thumbnail in a certain layout, but the thumbnail size generated by the system does not meet the requirement. You can usethumbFilter to dynamically generate images of this size.

  • Calling method:Just pass the image URL through the pipe symbol|Pass tothumbFilter. For example:

    <img src="{{ item.Logo|thumb:100 }}" alt="{{ item.Title }}" />

    Here are the100Indicates that the image width should be 100 pixels, and the height will be automatically scaled proportionally. You can also specify100x80to define the specific width and height.

Through the above methods, you can fully control the configuration, generation, and display of cover images and thumbnails for articles (and other content types) in AnQiCMS, thereby bringing richer visual effects and a better user experience to your website.

Common Questions (FAQ)

  1. Will the image in the article content automatically become a thumbnail, if I haven't uploaded it manually?Yes, if you do not manually upload or select a thumbnail when publishing an article, but the article content contains images, AnQiCMS will intelligently extract the first image in the content as the default thumbnail for the article.

  2. Can I set different thumbnail sizes for different article lists (such as the home page list and sidebar recommendations)?Of course, you can. Although AnQiCMS has global thumbnail generation settings, on the template level, you can usethumbFilter dynamically processes any image URL. For example, the home page list can call{{ item.Thumb }}(using the globally set thumbnail), while the sidebar recommendation can call{{ item.Logo|thumb:80x60 }}Generate a 80x60 pixel thumbnail to accommodate different layout requirements.

  3. What is the difference between the 'website logo' and the 'cover image (logo)' of AnQiCMS?The 'website logo' usually refers to the overall brand of your website