How can you effectively obtain and display a thumbnail, cover image, or a collection of multiple images from an article?

In content operation, engaging images are an indispensable element to attract readers and enhance the quality of articles.AnQiCMS understands this and provides a diverse and flexible set of features, whether it's for the thumbnails of article lists, the cover image on detailed pages, or a rich collection of multiple images, all can be easily obtained and displayed in the way you expect.

How does AnQi CMS handle various images?

In AnQi CMS, images are usually divided into several types to meet the display needs of different scenarios:

  • Article Thumbnail (Thumb):This image is mainly used in article lists, recommendation positions, and other scenarios, providing a quick overview of the article content with small-sized images.The AnQi CMS is very intelligent. When you publish an article, even if you do not manually upload a thumbnail, the system will automatically extract the first image from the article content as a thumbnail.Of course, you can also manually upload or select an image from the image library as a custom thumbnail according to your needs.
  • Cover Main Image (Logo):The cover main image usually refers to the main visual image of an article, product, or page, which is larger in size than the thumbnail and occupies a prominent position in the detail page or an important display area, carrying the core visual expression of the content.
  • A collection of multiple images (Images/Group Photos):When you need to display a set of related images, such as product details, event highlights, or a design portfolio, Anqi CMS supports managing and displaying multiple images as a collection.This makes creating a picture gallery or slideshow effortless.

Not only articles, but also categories (Category) and single pages (Page) support setting independent cover logos (Logo), thumbnails (Thumb), and collections of images (Images). This means you can manage unified or personalized visual content at various levels of the website.

Image optimization and management in background settings

To ensure the website's access speed and image display quality, Anqi CMS provides a rich set of image optimization and management options in the backend, allowing you to perform professional processing without any additional tools:

  1. Intelligent Upload and Storage:
    • WebP Format Conversion:You can choose to enable the WebP format conversion feature.WebP is a modern image format that can significantly reduce file size while maintaining image quality, thus speeding up webpage loading times and improving user experience and SEO performance.After enabling, newly uploaded JPG, PNG images will be automatically converted to WebP format.
    • Automatically Compress Large Images:If you do not want the original large image to take up too much server space or affect loading speed, you can enable the automatic compression of large images and set a specific width.The system will resize the image proportionally to effectively control the size of the image.
    • Remote Image Download:If the content of your article includes external image links, the system can be configured to automatically download these remote images to the local, for convenient unified management and accelerated access.
  2. Thumbnail strategy fine control:
    • Thumbnail size: You can flexibly set the unified size of thumbnails according to the website design and frontend display requirements to ensure consistency in visual style.
    • Thumbnail processing method:For different scenarios, Anqi CMS provides various thumbnail generation methods, including 'Proportional scaling by the longest side' to display the image completely, 'Filling with blank space by the longest side' to display at a fixed size and fill in the blank, and 'Center cropping by the shortest side' to crop the image centrally.
    • Default thumbnail:To avoid some content from looking unattractive due to missing images, you can set a default thumbnail image to be automatically used when no image is specified for the content.
    • Batch regenerate:When you adjust the thumbnail size or processing method, you can regenerate all thumbnails with one click using the batch function to ensure that all site images are updated uniformly.
  3. Image library management:The AnQi CMS built-in powerful image resource management function allows you to categorize all uploaded images and videos uniformly, perform batch operations (such as delete, transfer categories), and view detailed information (file name, type, size, resolution, address, etc.).This makes the management of image materials organized and easily accessible at any time.

Call images flexibly in the template

In the website front-end template, Anqi CMS provides an intuitive and powerful tag system that allows you to easily call and display various images as needed.

  • General image field:
    • Whether it is througharchiveListUse it to call the article list orarchiveDetailYou can directly access the article details through{{ item.Thumb }}To get the thumbnail address, use{{ item.Logo }}To get the cover first image address.
    • For a collection of multiple images, such asitem.Imagesit is usually an array of image URLs. You can useforto loop through this array and display each image, easily building a photo gallery. For example:
      
{% for image_url in item.Images %}
    <img src="{{ image_url }}" alt="{{ item.Title }} 细节图" />
{% endfor %}
  • Category and single page image call:Similar articles,categoryDetail(Category details) andpageDetail(Single page details) tags also support through{{ category.Logo }}/{{ category.Thumb }}and{{ category.Images }}The way to obtain and display the main image, thumbnail, or a collection of multiple Banner images for a category or a single page.
  • Dynamic thumbnail generation:The Anqi CMS also provides a practicalthumbFilter. If you need to dynamically generate a specified thumbnail size based on the original image address in a template (for example, when you need a thumbnail size different from the backend preset in some special layouts), you can use{{ image_url|thumb }}This filter will return the thumbnail address of the corresponding size based on the thumbnail rule you set in the background.
  • Image in the custom field:Through flexible content models, you can customize additional image fields for articles, products, etc., such as a field namedproduct_gallerya group image field. In the template, you canarchiveParamsTag fetches this custom field data and uses it in the same wayforLoop to display images:
    
{% archiveDetail productGallery with name="product_gallery" %}
{% if productGallery %}
    <div class="product-gallery">
    {% for img_path in productGallery %}
        <img src="{{ img_path }}" alt="产品展示图" />
    {% endfor %}
    </div>
{% endif %}

With these rich features and flexible calling methods, Anqi CMS provides a comprehensive visual content management solution for you, helping your website content become more attractive and expressive.Whether it is the beauty of content display or the loading performance of the website, it can be effectively guaranteed.

Common Questions (FAQ)

Q1: Why do the images I upload sometimes look blurry, or why are the file sizes still large?A1: This usually has to do with your background content settings.Please check the "Content Settings" for the options "Whether to automatically compress large images" and "Thumbnail size".If the image is over-compressed or the thumbnail size is too small, it may result in blurring.