How to implement dynamic loading of image URL and custom media resources with `{% diy %}` tag?

As an experienced website operation expert, I am well aware that the flexibility and customization of website content are crucial for maintaining competitiveness in the ever-changing network environment.AnQiCMS (AnQiCMS) boasts its efficient architecture based on the Go language and powerful features, providing us with a flexible content management platform.{% diy %}How it helps us implement dynamic loading of custom media resources like image URLs, making website content operation more skillful.

The foundation of flexible content operation:{% diy %}The charm of tags

During the operation of a website, we often encounter such needs: we need to display a dynamically changing promotional image in a specific area of the website, or embed a video link that is always updated, or provide a PDF download address that can be replaced regularly.This content usually does not belong to conventional articles, product details, or category information, but is a customized element required for the global or specific page layout of the website.At this point, if each update requires modifying the template code, it is not only inefficient but also prone to introducing errors.

Of Security CMS{% diy %}The label is created to solve this pain point.It allows us to flexibly define various custom parameters in the background and dynamically call these parameters in the front-end template, achieving easy content management and updates.{% system %}(System settings) and{% contact %}(Contact information) and other tags focus on obtaining different preset system information, {% diy %}The positioning of the tag is more general, aiming to provide website operators with a highly free custom content management channel, allowing fragmented information that is not suitable for existing modules to be managed and utilized efficiently.

How to define custom media resources in the background?

To utilize{% diy %}Tag dynamically loads media resources, first you need to set these custom parameters in the Anqi CMS backend management interface.Although the document does not directly display an independent management module named "Custom Content", we can understand it by referring to the way custom parameters are added in "Global Settings" or "Contact Information Settings".Generally, you will find the option to 'Custom Parameters' or 'Add Custom Setting Items' on some settings page in the background (such as 'Background Settings' -> 'Global Settings' or 'Content Settings' etc.).

When adding custom parameters, you need to pay attention to the following key points:

  1. Parameter NameThe name used when calling this custom resource in the template, recommended to use concise and meaningful English characters, for examplehomePageBanner/promoVideoUrl/companyBrochurePdfetc.
  2. Parameter ValueHere is where you will store the link to the dynamic media resource.For example, a complete URL of an image, an iframe embed code for a video, a download link for a PDF file, and so on.
  3. RemarkThis is an optional field, used to describe the purpose of the parameter, convenient for future management and maintenance.

For example, if you want to place a main visual image that can be changed at any time on the homepage, you can set it in the background custom parameters:

  • Parameter Name:homePageHeroImage
  • Parameter value:https://yourwebsite.com/uploads/2023/10/new_hero_image.webp
  • Note: Homepage main visual image

This, a custom image URL resource is ready.

{% diy %}Tag: Magic wand in front-end templates

After defining the custom parameters in the background, we can use them in the frontend template.{% diy %}Tags to retrieve and display these dynamic resources.{% diy %}the basic usage of tags is{% diy 变量名称 with name="字段名称" %}.

  1. Dynamic loading of image URL

    Assuming we have already defined a parameter namedhomePageHeroImagewith the value of the image URL. In the template, we can call and display this image as follows:

    {% diy homeBannerImage with name="homePageHeroImage" %}
<img src="{{ homeBannerImage }}" alt="网站首页主视觉" class="hero-section-banner">

    If the image may not exist, we can also use{% if %}tags for conditional judgment to increase the robustness of the template:

    {% diy homeBannerImage with name="homePageHeroImage" %}
{% if homeBannerImage %}
    <img src="{{ homeBannerImage }}" alt="网站首页主视觉" class="hero-section-banner">
{% else %}
    <img src="/static/images/default-banner.webp" alt="默认主视觉" class="hero-section-banner">
{% endif %}

    Further considering performance optimization, if your custom image is the original large image and you want to load it as a thumbnail on the front end, Anqi CMS provides|thumbFilter. This means you don't have to manually upload thumbnails in the background, the system can dynamically generate them based on the original image:

    ”`twig {% diy homeBannerImage with name=“homePageHeroImage” %} {% if homeBannerImage %}

    <img src="{{ home