How to correctly display images in the article content of AnQiCMS templates and support lazy loading of images?

In content operation, exquisite images can significantly enhance the attractiveness and reading experience of articles.However, image files are often large, and if not handled properly, they may slow down page loading speed, affect user experience, and even search engine rankings.AnQiCMS is well aware of this, providing a flexible way to correctly display images within the article content in templates, and supports lazy loading of images to balance aesthetics and performance.

Core: Display images in the article content

In the AnQiCMS template, we mainly rely on{% archiveDetail with name="Content" %}This powerful tag. When you insert images in the article editor in the background, whether they are uploaded local images or referenced external images, they will be stored as part of the HTML structure in the article content (Content field).

This tag extracts the content of the article editor that includes all rich text formats, such as images, text styles, etc. To ensure that these HTML codes are correctly parsed and displayed by the browser, we usually work with|safeto use the filters together.|safeThe filter's role is to inform the template engine that this content is safe HTML code, which does not require escaping and can be output directly to the page.

For example, if you want to display the article content on the article detail page, the template code might look like this:

<div class="article-content">
    {% archiveDetail articleContent with name="Content" %}
    {{ articleContent|safe }}
</div>

In this way, all images and text formats in the article content will be displayed completely and correctly on your website page.

Improve loading efficiency: Image lazy loading

To optimize the user experience and speed up page loading, the Lazy Loading feature becomes particularly important.It allows images to start loading only when they enter the user's visible area, thereby reducing resource consumption during the initial page load, especially for articles with many images, the effect is significant.

AnQiCMS is inarchiveDetailThe tag is built-in with lazy loading support for article content images. You just need to add anContentparameter when callinglazyexample.lazy="data-src".

The purpose of this parameter is to, when AnQiCMS renders article content containing<img>tags, it will replace or move the realsrcattribute values todata-src(or any specified attribute name, such asdata-originalon it, and mergesrcLeave the attribute blank or set it to a placeholder image.

However, setting this parameter is not enough. Browsers will not automatically recognize it.data-srcAnd load the image. You also need to introduce a front-end JavaScript lazy loading library (such as lazysizes, vanilla-lazyload, etc.), which this library detectsdata-srcThe image attribute, and dynamically load it when the image enters the visible areadata-srcAssign the value againsrcThus achieving lazy loading.

Practice: Template code for image display and lazy loading

Combine both and your article's code display will become more efficient:

<div class="article-content">
    {% archiveDetail articleContent with name="Content" lazy="data-src" %}
    {{ articleContent|safe }}
</div>

<script>
// 在这里引入并初始化您的前端懒加载 JavaScript 库
// 例如，如果您使用 lazysizes 库，通常只需要在 HTML 页面中引入其 JS 文件即可，
// 库会自动检测带有 data-src 属性的图片并进行懒加载。
// <script src="path/to/lazysizes.min.js" async=""></script>
</script>

Please note,lazy="data-src"ofdata-srcThe attribute name must match the one recognized by the front-end lazy loading library you are using. Most mainstream libraries supportdata-srcHowever, if your library uses a different attribute, please modify it accordingly.

More image optimization suggestions

In addition to lazy loading, a series of image processing options are provided in the 'Content Settings' of AnQiCMS backend, which can further optimize image performance:

• Whether to enable Webp image format:After enabling, the system will automatically convert uploaded JPG, PNG, and other format images to a smaller WebP format, significantly improving image loading speed without losing visual quality.
• Whether to automatically compress large images:If the size of the image you upload is too large, the system can automatically compress it to the specified width, reducing the size of the image file.
• Do you want to download remote images:Enable this option to ensure that external images referenced in the article are also downloaded to your server, making it easier to manage and optimize, and to avoid the situation where images cannot be displayed due to the failure of external image beds.

By combining the AnQiCMS template tags,lazywith these backend optimization features, your website will be able to present to visitors at a faster speed and a smoother experience.

Frequently Asked Questions (FAQ)

Q1: I have set it in the templatelazy="data-src", but the lazy loading of images seems not to work, why is that?

A1: Only in AnQiCMS templatelazy="data-src"The parameter, which just makes the system move the real address of the image fromsrcthe attribute todata-srcProperty. To truly implement the lazy loading effect, you also need to introduce a corresponding JavaScript lazy loading library (such as lazysizes.js or vanilla-lazyload.js), and ensure that the library is properly initialized.This JS library is responsible for detecting the page indata-srcImages, and load them dynamically when they enter the visible area. Please check if your frontend has introduced this library and if its configuration is correct.

Q2: Will the images in the article content be automatically generated as thumbnails?

A2: AnQiCMS does not automatically generate thumbnail versions for images in the article content for lazy loading.lazy="data-src"The parameter is used to convert the original image'ssrcAttribute replacement to delay loading the original image. If you want to use a lower quality or smaller thumbnail as a placeholder for lazy loading, this usually requires configuration in the front-end lazy loading library or through custom development.

Q3: Besides the article content images, how are the cover image or thumbnail of the article displayed and supported for lazy loading?

A3: The cover image (Logo) and thumbnail (Thumb) are usually through{% archiveDetail with name="Logo" %}or{% archiveDetail with name="Thumb" %}Called individually. These images are not embedded in the rich text of the article content. To implement lazy loading, you need to manually adjust thesrcattribute is replaced withdata-srcFor example<img data-src="{% archiveDetail with name="Thumb" %}" class="lazyload" alt="文章标题" />Then it also relies on a front-end lazy loading JS library to identify and load.