How to display detailed information of image resources on the front page, such as file name, size, and image address?

When using AnQiCMS to manage website content, images are undoubtedly an important element in enhancing page attractiveness.We often need to display not only the image itself on the front-end page, but also further details about the image, such as their filenames, sizes, and storage addresses.This is very helpful for visitors to understand the background of the image, to make content references, or to manage and download images and other operations.

AnQiCMS as an efficient and flexible content management system provides convenient image upload and management functions.The Image Resource Management page (usually under "Page Resources" -> "Image Resource Management") displays detailed information for each image, including filename, file type, upload time, file size, image resolution, and image address.This information is clearly visible in the background, then how can we present these valuable data on the front-end page?

How to display basic information (URL) of pictures on the front page of AnQi CMS

Firstly, the most fundamental and core is the display of the image on the front.Whether it is an article, product, or single-page, we usually use images as thumbnails, cover images, or illustrations in the content.AnQiCMS provides the corresponding template tags to obtain the URL addresses of these images.

For example, in the details page of a document (article or product), if the document is set with a thumbnail, we can usearchiveDetailLabel to get the image address:

{# 假设我们正在一个文档详情页，获取文档的封面首图URL #}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />

{# 如果需要获取文档内容的缩略图，可能是这样 #}
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />

If the image is part of a multi-image group (such as a carousel or gallery), we can iterate overImagesfield to get the URL of each image:

{# 假设我们在一个页面，获取其设置的Banner组图 #}
{% pageDetail pageImages with name="Images" %}
<ul>
  {% for item in pageImages %}
  <li>
    <img src="{{item}}" alt="页面名称" />
    {# 在这里，{{item}}就是每张图片的URL地址 #}
  </li>
  {% endfor %}
</ul>

By these tags, we can easily display images on the front-end page, and{{item}}or{% archiveDetail with name="Logo" %}The output is the complete access address of the image on the server.

Further: Display image filename, size and resolution

The AnQiCMS backend "Image Resource Management" interface indeed displays detailed metadata for each image, such as filename, size, and resolution. However, on the frontend template tag level, for images passed throughLogo/ThumborImagesThe image URL obtained from the field, the system does not provide direct labels to output these detailed metadata by default.This is because when the front-end renders the page, it usually focuses more on the display and loading speed of the image itself, and the direct output of image metadata is not necessary in all scenarios.

However, this does not mean that we have no way out. We can consider the following strategies:

1. Display the image address (URL)

As mentioned earlier,{{item}}or{% archiveDetail with name="Logo" %}The tag directly outputs the image URL. It inherently contains the 'address' information of the image on the website.

{# 在图片下方显示其URL地址 #}
<div>
  <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
  <p>图片地址：<span>{% archiveDetail with name="Logo" %}</span></p>
</div>

2. Display image file name (via custom field or frontend parsing)

• Through custom content model field:This is the most recommended and reliable method.If you want to display the original file name of the image on the front end, you can add a custom field in the AnQiCMS content model.For example, in the "Article Model" or "Product Model", in addition to the existing "Thumbnail" field, a text field for "Original Filename" can be added.

  1. Go to the background "Content Management" -> "Content Model".
  2. Select the model to be modified (such as "article model
  3. In the "Content Model Custom Field", add a new field, such as "Parameter Name" set to "Original Filename","Callee Field" set tooriginal_filenameChoose "Single-line text" for the field type.
  4. Save model settings.
  5. When publishing or editing an article, manually enter or copy the original filename of the image into this new field.

  After that, in the front-end template, it can be displayed like calling other custom fields:

  {# 假设我们在文章详情页，且已设置自定义字段 original_filename #}
  <div>
    <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
    <p>图片地址：<span>{% archiveDetail with name="Logo" %}</span></p>
    <p>原始文件名：<span>{% archiveDetail with name="original_filename" %}</span></p>
  </div>
  

• Parse the URL through front-end JavaScript:If you do not want to add custom fields, you can also consider extracting the filename from the image URL using JavaScript on the front end.But this can only extract the filename part from the URL path, and cannot retrieve the original filename at the time of upload (if the server has renamed the filename).

  <img id="myImage" src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
  <p>图片地址：<span id="imageUrl"></span></p>
  <p>文件名：<span id="imageFilename"></span></p>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const imageUrlElement = document.getElementById('imageUrl');
      const imageFilenameElement = document.getElementById('imageFilename');
      const imgElement = document.getElementById('myImage');
  
      if (imgElement && imgElement.src) {
        const fullUrl = imgElement.src;
        imageUrlElement.textContent = fullUrl;
  
        // 从URL中提取文件名
        const filename = fullUrl.substring(fullUrl.lastIndexOf('/') + 1);
        imageFilenameElement.textContent = filename;
      }
    });
  </script>
  

3. Display image size and resolution

AnQiCMS's front-end template tags do not directly provide the functionality to obtain the size and resolution of image files. This information is usually obtained through JavaScript after the image has been loaded (for example, by using Imagethe object'snaturalWidthandnaturalHeightProperty to get resolution), or they can be pre-stored in custom fields when processed on the server.

• Front-end JavaScript to get resolution:

  `html <img id="myImageRes">