In content operation, exquisite images can significantly enhance the attractiveness and reading experience of the article.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 understands this and provides a flexible way to correctly display images within 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, to obtain the main content of the article, we mainly rely on{% archiveDetail with name="Content" %}This powerful tag.When you insert an image into the article editor in the background, whether it is an uploaded local image or an externally referenced image, they will be stored as part of the HTML structure in the article content (Content field).
This tag extracts all rich text format content including images, text styles, etc. from the article editor. To ensure that these HTML codes are correctly parsed and displayed by the browser, we usually work with|safeFilter used together.|safeThe function of the filter is to inform the template engine that this piece of content is safe HTML code that 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 may look like this:
<div class="article-content">
{% archiveDetail articleContent with name="Content" %}
{{ articleContent|safe }}
</div>
All images and text formats in the article content will be presented completely and correctly on your website page in this way.
Improve loading efficiency: Image lazy loading
To optimize the user experience and accelerate page loading speed, the Lazy Loading feature becomes particularly important.It starts loading images only when they enter the user's visible area, thus reducing resource consumption during the initial page load. This is particularly effective for articles with many images.
AnQiCMS is inarchiveDetailtags are already built-in to support lazy loading of article content images. You just need to addContenta parameterlazywhen calling the field, for examplelazy="data-src".
The function of this parameter is, when AnQiCMS renders the article content,<img>the image will replace or move the actualsrcattribute value todata-src(or any attribute name you specify, such asdata-original）on, andsrcLeave the attribute empty or set it to a placeholder image.
However, setting this parameter alone is not enough. Browsers will not automatically recognizedata-srcand load the image. You also need to include a frontend JavaScript lazy loading library (such as lazysizes, vanilla-lazyload, etc.), which will handle the detectiondata-srcThe image of the attribute, and dynamically assign the value to it when the image enters the visible area.data-srcthe value to reassign tosrcto achieve lazy loading.
Practice: Template code for image display and lazy loading
Combine them, and your article content display code 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-srcMust match the attribute name recognized by the front-end lazy loading library you are using. Most mainstream libraries support itdata-srcHowever, if your library uses a different attribute, please modify it accordingly.
More image optimization suggestions
In addition to lazy loading, the 'Content Settings' in AnQiCMS backend provides a series of image processing options to further optimize image performance:
- Whether to enable Webp image format:After enabling, the system will automatically convert uploaded JPG, PNG, and other formats of images to a smaller WebP format, significantly improving the 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.
- Whether to download remote images:Enabling this option ensures that external images referenced in the article are also downloaded to your server, facilitating unified management and optimization, while also avoiding the issue of images not displaying due to the failure of external image hosting.
By combining the AnQiCMS template tags,lazyand these backend optimization features, your website will be able to present itself to visitors with faster speed and a smoother experience.
Common Questions (FAQ)
Q1: I have set it in the templatelazy="data-src", but the lazy loading of images does not seem to work, why is that?
A1: Just add it to the AnQiCMS templatelazy="data-src"Parameters, just to let the system obtain the actual address of the image fromsrcAttributes moved todata-srcProperty.To truly implement lazy loading, you also need to introduce a corresponding JavaScript lazy loading library (such as lazysizes.js or vanilla-lazyload.js), and ensure that the library has been initialized correctly.data-srcImages, and load them dynamically when they enter the visible area. Check if you have imported such a library in your frontend and whether the configuration is correct.
Q2: Will the images in the article content automatically generate thumbnails?
A2: AnQiCMS does not automatically generate thumbnail versions for images in the article content for lazy loading by default.lazy="data-src"The parameter is used to take the original image'ssrcReplace properties 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 implementation through custom development.
Q3: How do the cover image or thumbnail of the article display and support lazy loading, in addition to the article content images?
A3: The cover image (Logo) and thumbnail (Thumb) of the article are usually{% archiveDetail with name="Logo" %}or{% archiveDetail with name="Thumb" %}These tags are called individually. These images are not embedded in the rich text of the article content. To implement lazy loading for them, you need to manually changesrcattribute in the content withdata-srcfor example<img data-src="{% archiveDetail with name="Thumb" %}" class="lazyload" alt="文章标题" />Then, it also relies on front-end lazy loading JS libraries to identify and load.