How to display the cover image (Logo) and thumbnail (Thumb) of an AnQi CMS article?

In content operation, the cover image (Logo) and thumbnail (Thumb) of the article play a crucial role. They not only attract the reader's attention and increase the click-through rate, but are also an indispensable part of search engine optimization (SEO).AnQiCMS (AnQiCMS) provides users with a flexible and convenient way to manage and display these visual elements.This article will discuss in detail how to configure and call the cover image and thumbnail of the article 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 publication and global processing rules at the system level.

1. Article publication 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 select: Here you can upload a brand new image as the thumbnail of the article, or select one from the existing image library.This approach provides the highest flexibility, you can carefully select the most suitable image for each article.
• Intelligent 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 even if the upload is forgotten, the article can have a default visual display.

2. Global thumbnail processing settings

AnQiCMS provides powerful global content settings, allowing you to unify the management of website image generation methods to ensure consistency in visual style.

• Access path:You can configure these options by accessing the "Global Settings" -> "Content Settings" in the backend.
• Thumbnail processing method:The system provides multiple thumbnail generation methods to meet different design needs, such as:
  • Scale proportionally to the longest side:Maintain the image ratio to fit the target size, may leave white space.
  • Pad to the longest edge:Fill the image completely to the target size, and fill the insufficient part with white.
  • Trim to 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 there are no images to extract from the content, AnQiCMS allows you to set a 'default thumbnail' as a last resort.
• Batch regenerate: After 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 website to ensure they meet the new settings.

With these configurations, AnQiCMS ensures that the cover image and thumbnail of the article have a clear source and a flexible generation mechanism in the background.

Two, call the article cover image and thumbnail in the template

After configuring the cover image and thumbnail, how to display them in the front-end template is the key to achieving the final effect.AnQiCMS provides intuitive template tags, making this process simple.

1. Call in the document detail page

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

• Example of getting the cover image (Logo):Cover image usually refers to the main illustration of an article, which is sometimes also used as the large image on the list page.archiveDetailTagged,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 is usually a smaller image cropped or scaled, 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 usearchiveListTag for loop calling. Inside the loop body, each article's data object (such asitem) includes the URL of its cover image and thumbnail.

• Loop calling example:

  {% 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.LogoYou can directly obtain the URL of the thumbnail and cover image corresponding to the article.

3. Other types of page visual elements

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

• Category page:In the category detail page or category list, you cancategoryDetailorcategoryListuse tags,name="Logo"orname="Thumb"Get the cover image or thumbnail of the category. For example, the category may have special pictures or icons.
• Single page:For single-page pages like "About Us", pageDetailorpageListLabels also providedname="Logo"orname="Thumb"Field used to display the visual identification of the page.

3. Dynamic thumbnail processing (thumbFilter)

AnQiCMS also provides a very practicalthumbA filter that 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.

• Usage scenario:Assuming you need a specific size (such as 100 pixels wide) thumbnail in some layout, but the system-generated thumbnail size does not meet the requirements. You can usethumbA filter to dynamically generate images of that size.

• The calling method:Just pass the image URL through a pipe symbol|pass tothumband use the filter. For example:

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

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

By using the above method, 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.

Frequently Asked 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 homepage list and sidebar recommendations)?Of course you can. Although AnQiCMS has global thumbnail generation settings, you can use it at the template level.thumbThe filter dynamically processes any image URL. For example, the home page list can be called{{ item.Thumb }}(using the globally set thumbnail), while the sidebar recommendations can be called{{ 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.