In website operation, the management and display of image resources is a crucial link.To ensure website loading speed, improve search engine optimization (SEO) and optimize user experience, we often need to handle image URLs.?) starts. Although these parameters have specific functions, in certain display scenarios, we may want to obtain a pure image path without any parameters.

in AnQiCMS, with its powerful and flexible template engine, we can easily achieve this goal. Although you might intuitively think of usingcutFilter to remove?symbols, but after a deeper understanding of how it works, we will find a more accurate and efficient solution.

Understand common scenarios and impacts of parameterized image URLs

The situation where image URLs carry parameters is very common. For example, the image links you may obtain from third-party image hosting services or CDNs are like:http://yourdomain.com/uploads/images/photo.jpg?v=20231026or:http://yourdomain.com/thumbs/image.png?width=800&height=600

The existence of these parameters may cause some inconvenience in some cases:

  • Cache issue:Different parameters may be considered as different URLs, causing CDN or browsers to be unable to effectively cache the same image, increasing the server burden.
  • SEO impact:The search engine may consider URLs with different parameters as different pages, dilute the weight of the pages, and affect the indexing effect.
  • URL attractiveness:Long URLs can sometimes seem unprofessional and affect the overall page design.
  • Data statistics:If the image URL is used for specific data tracking, and we want to only count the image itself in general scenarios, the existence of the parameter will interfere with the analysis.

Therefore, obtaining a pure URL without parameters when outputting images in templates is a basic requirement for the refined operation of a website.

Anqi CMS'scutFilter: Working Principle and Limitations

The template engine of AnQi CMS provides a rich set of filters for data processing, wherecutFilters are tools used to remove specified characters from strings. According to the document,cutThe function of the filter is to 'remove the specified character from any position in the string'.

Its basic usage is very intuitive, for example, if you want to remove all spaces from the string:{{ "Hello world"|cut:" " }}This code will outputHelloworld, because all whitespace characters have been removed.

So, if we apply this principle to removing?symbols from the image URL? Assuming the image URL ishttp://yourdomain.com/image.jpg?v=123。When using{{ imageUrl|cut:"?" }}，the filter will find and remove?characters from the string, but it will only remove?itself, butv=123this part of the parameter will still be retained. The final output will behttp://yourdomain.com/image.jpgv=123.

显然，仅仅使用cut过滤器并不能达到“移除?符号及其后的参数的目的，因为我们不仅需要移除?，还需要移除其后的所有内容。

实战操作：利用split过滤器获取纯净图片URL路径

为了实现“移除?符号及其后的参数”，我们不能简单地移除?，而是需要将URL字符串在?perform "cutting", then only keep the part before the question mark. The security CMS template engine'ssplitThe filter is created for this purpose.

splitThe function of the filter is 'to split a string with a specific format into an array by a specified delimiter'. When we take a picture URL as?When splitting by delimiter, it returns an array of strings, where the first element is the pure image path we need.

The following is the specific operation steps and code examples:

  1. Get the original image URL:In the template of AnQi CMS, we usually getarchiveDetail/pageDetailin the tag or loopitem.Logo/item.Thumbetc. to get the image URL. For example:

    {# 假设我们在文章详情页，获取文章的缩略图URL #}
{% set rawImageUrl = archive.Thumb %}

    Or in the loop:

    {% for item in archives %}
    {% set rawImageUrl = item.Logo %}
    {# ... 后续处理 ... #}
{% endfor %}

  2. UsesplitFilter performs cutting:Now, we will get