How to handle the adaptive image size issue when displaying images using the `prevArchive` tag?

As an experienced website operations expert, I know how to elegantly handle image display in a content management system, especially in terms of responsive design and performance optimization, which is crucial for improving user experience and SEO performance.AnQiCMS (AnQiCMS) with its powerful functions and flexible template mechanism, provides us with many solutions.prevArchiveHow to handle the problem of image size adaptation when displaying images with tags.

Use AnQiCMSprevArchiveHow to achieve size adaptation and optimization when displaying images with tags?

When building a website with AnQiCMS, we often need to display a thumbnail of the previous or next article on the article detail page to enhance user experience and page navigation efficiency. AnQiCMS providesprevArchiveandnextArchiveSuch convenient labels make content calls easy.However, when these tags call images, how to ensure that the images can beautifully adapt to various screen sizes while also considering loading performance, this is often a practical problem faced by operators.

UnderstandingprevArchiveLabel and image field

prevArchiveThe tag is mainly used to obtain the data of the previous document of the current article. It conveniently allows us to access the title, link, and image information of the previous article. Specifically, the image,prevArchiveTags will provideLogoandThumbTwo core fields, they directly return the URL address of the image.

  • LogoIt typically represents the main image or cover large image of an article, which may be of larger size and is suitable for use in places where a prominent visual effect is needed.
  • ThumbThis is a thumbnail automatically generated by the system based on the backend settings, with a relatively small size, more suitable for scenarios that require a unified small image in lists, sidebars, etc.

For example, the basic structure of calling the thumbnail of the previous article in the template is usually like this:

{% prevArchive prev %}
{% if prev %}
  <a href="{{ prev.Link }}">
    <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />
    <span>{{ prev.Title }}</span>
  </a>
{% else %}
  <!-- 如果没有上一篇，显示提示 -->
  <span>没有上一篇了</span>
{% endif %}
{% endprevArchive %}

As you can see,{{ prev.Thumb }}The thumbnail URL was output directly. So, how can the image be both adaptive and load quickly?

The built-in image optimization capability of AnQiCMS: the backend strategy is the first line of defense

Our CMS provides powerful backend features for image processing, which is the first line of defense against image adaptation.As operators, we can make fine-grained configurations in the "Content Settings" backend.These configurations directly affect the loading performance and default size of images on the front-end.

  1. WebP format support: After enabling the WebP option, the system will automatically convert uploaded JPG, PNG, and other traditional image formats to a smaller size and faster loading WebP format.This directly improves image performance, especially crucial for mobile experience.
  2. Automatically Compress Large ImageFor the original large image uploaded, we can set whether to enable the automatic compression feature and specify a maximum width (such as 800px or 1200px).The system will resize the image proportionally according to this size to avoid loading too large image resources on mobile devices, further optimizing loading speed.
  3. Thumbnail processing method and sizeThis is one of the core configurations. You can set the default thumbnail generation method (such as 'proportionally scale to the longest edge', 'fill to the longest edge', or 'crop to the shortest edge'), and precisely define the size of the thumbnail, for example200x150This means that when you passprevArchiveTag call{{ prev.Thumb }}At this point, the image has already been processed by the system backend and is a thumbnail of appropriate size.If needed, you can even use the "batch regenerate thumbnails" feature to process uploaded images according to new rules.
  4. Default thumbnailEven if the article does not upload a specific thumbnail, the system can automatically use the preset default image to ensure the display of the content