How to effectively retrieve and display a thumbnail, cover main image, or a collection of multiple images for an article?

In content operation, engaging images are essential elements to attract readers and enhance the quality of articles.AnQiCMS (AnQiCMS) understands this and provides a diverse and flexible set of features, whether it's for the thumbnails of article lists, the cover images of detailed pages, or the rich multi-image collections, 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 type of image is mainly used for article lists, recommendation positions, and other scenarios, providing a quick overview of 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 image usually refers to the main visual image of an article, product, or page, which is larger 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 image):When you need to display a set of related images, such as product details, event highlights, or design portfolios, AnQi CMS supports managing and displaying multiple images as a collection.This makes creating a picture gallery or slideshow effortless.

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

Image optimization and management in the background settings

To ensure the access speed and image display effect of the website, Anqi CMS provides a wealth of image optimization and management options in the background, 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, thereby speeding up web page loading and enhancing user experience and SEO performance.After turning on, 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 specified width.The system will resize the image proportionally, effectively controlling the size of the image.
    • Remote Image Download:If your article content references 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 uniform size of thumbnails according to the needs of website design and front-end display to ensure consistency of visual style.
    • Thumbnail processing method:For different scenarios, AnQi CMS provides various thumbnail generation methods, including "proportionally scaling to the longest side" to display the image in full, "filling with blank space around the longest side" to display at a fixed size, and "cropping to the shortest side" to center-crop the image.
    • Default thumbnail: To avoid the display from being unattractive due to missing images, you can set a default thumbnail that will be automatically called when there is no specified image.
    • Batch regenerate: After you adjust the thumbnail size or processing method, you can use the batch function to regenerate all thumbnails with one click, ensuring that all images on the site are updated uniformly.
  3. Image library management:The Anqi CMS is built with powerful image resource management features, allowing 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.

Flexibly call images 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.

  • Universal image field:
    • Whether it is througharchiveListUse to call the article list, orarchiveDetailYou can get the article details directly through{{ item.Thumb }}Get the thumbnail address through{{ item.Logo }}Get the cover main image address.
    • For a multi-image collection, such asitem.Imagesit is usually an array of image URLs. You can useforto iterate through this array and display each image, easily building an image gallery. For example:
      
{% for image_url in item.Images %}
    <img src="{{ image_url }}" alt="{{ item.Title }} 细节图" />
{% endfor %}
  • Category and image call for single page: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 single page.
  • Dynamic thumbnail generation:AnQi CMS also provides a practicalthumbFilter. If you need to dynamically generate a thumbnail of a specific size based on the original image address in a template (for example, when a different thumbnail size is needed in a special layout than the background preset), you can use{{ image_url|thumb }}. This filter will return the thumbnail address of the corresponding size based on the thumbnail rules set in your background.
  • Image in the custom field:By using a flexible content model, you can customize additional image fields for articles, products, etc., such as a field namedproduct_gallerya group image field. In the template, you can usearchiveParamsLabel to retrieve these custom field data and use them similarlyforLoop 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 you with a comprehensive visual content management solution, helping your website content to be more attractive and expressive.Whether it is the beauty of content display or the loading performance of the website, it can be effectively guaranteed.

Frequently Asked Questions (FAQ)

Q1: Why do the images I upload sometimes look blurry or the file size is still very large?A1: This usually relates to your background content settings. Please check the options for 'Whether to automatically compress large images' and 'Thumbnail size' in the 'Content Settings'.If the image is over-compressed or the thumbnail size is too small, it may cause blurring.At the same time, ensure