In website operation, the management and display of image resources are crucial.}To ensure the website loads quickly, improve search engine optimization (SEO) and optimize the user experience, we often need to handle image URLs.Sometimes, an image URL may carry some parameters, such as version numbers, cropping dimensions, or tracking information, which are usually followed by a question mark,?Starting with parenthesis. Although these parameters have their specific purposes, in certain display scenarios, we may wish to obtain a pure image path without any parameters.

In AnQiCMS (AnQiCMS), with its powerful and flexible template engine, we can easily achieve this goal. Although you might intuitively think of usingcutFilter to remove?But after a deep understanding of its working principle, we will find a more accurate and efficient solution.

Understanding the common scenarios and impacts of parameterized image URLs

The situation where image URLs carry parameters is very common. For example, the image link you may obtain from a third-party image hosting service or CDN is like this: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 problem: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 treat URLs with different parameters as different pages, diluting the page weight and affecting the indexing effect.
  • URL aesthetics: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 parameters 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.

Of Security CMScutFilter: Working Principle and Limitations

The AnqiCMS template engine provides a rich set of filters for data processing, among whichcutFilters are tools used to remove specified characters from strings. According to the documentation,cutThe filter's function 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 a string:{{ "Hello world"|cut:" " }}This code will outputHelloworldBecause all the whitespace characters have been removed.

Then, if we apply this principle to remove the?symbols from the image URL? Assuming the image URL ishttp://yourdomain.com/image.jpg?v=123. When we use{{ imageUrl|cut:"?" }}the filter will find and remove the?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.

Of course, merely usingcutThe filter does not achieve the removal of?The purpose of the symbol and its subsequent parameters, because we need to remove not only?Remove all content after this.

Practice operation: usingsplitFilter to obtain a pure image URL path

To achieve the "remove?Symbol and its subsequent parameters", we cannot simply remove?, but need to parse the URL string in?Perform a "cut", and then only retain the part before the question mark. An enterprise CMS template engine'ssplitThe filter is exactly for this.

splitThe function of the filter is to "split strings of a specific format into an array by a specified delimiter." When we use the image URL with?When split as a delimiter, it returns a string array, in which the first element is the pure image path we need.

The following are the specific steps and code examples:

  1. Get the original image URL:In AnQi CMS templates, we usually get througharchiveDetail/pageDetailtags or loopsitem.Logo/item.Thumband so on 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. UsesplitFiltering for cutting:Now, we will get