How to call and display the website logo image in AnQiCMS template?

In website operation, Logo is not only a visual identifier of the brand, but also an important part of the website's professionalism and user experience.AnQiCMS (AnQiCMS) provides an intuitive and easy way to manage and call the website logo, allowing you to easily display your brand image in every corner of the website.

This article will introduce you how to set your website logo in AnQi CMS backend, and guide you to accurately and flexibly call and display it in the front-end template, ensuring that your brand image is presented perfectly.

One, set the website logo in the Anqi CMS background

First, you need to upload the Logo image to the Anqi CMS system and specify it as the website's Logo. This process is very simple:

1. Log in to the backend:Log in to your AnQi CMS backend management interface.
2. Enter global settings:In the left navigation bar, find and click onBackend settingsSelect thenGlobal feature settings.
3. Upload or select Logo:In the global feature settings page, you will see a named "Website LOGOThe configuration item. Click the upload or select button next to it, upload a Logo image file from your computer, or select an image already uploaded to the media library.Suggest choosing a logo image with moderate size and high clarity.
4. Save settings:After confirming that the image selection is correct, click the "Save" button to apply the settings to the system.

After completing these steps, your website logo has been successfully uploaded and configured to the Anqi CMS backend.

Second, call and display the logo in the website template.

The logo image has been configured, and the next step is how to display it in the website's front-end template.The Anqi CMS template syntax is concise and clear, similar to the Django template engine, which can be easily implemented through specific tags.

To call the website logo, we need to use the Anqicms providedsystemtag. This tag is specifically used to obtain the various system configuration information of the website.

1. Basic calling method:The most direct way is to<img>label'ssrccall directly in theSiteLogothis system variable.SiteLogoIt is preset to store the URL address of the website logo that you set in the background.

   <img src="{% system with name="SiteLogo" %}" alt="网站Logo" />
   

   This code will directly output the URL of the Logo image and use it as<img>label'ssrcthe attribute value. At the same time, to better comply with SEO standards and improve accessibility, it is recommended to add an imagealtProperty. Here we temporarily used 'Website Logo' as a placeholder.

2. Optimize with the website namealtattribute:In order toaltMake the property more descriptive, we can usesystemTag to get the website name and use it as the logo imagealttext. The website name is insystemthe parameter corresponding to the tag isSiteName.

   <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
   

   Now, when the browser fails to load the logo image, or for users who use screen readers, they will see the name of the website, which greatly improves the website user experience and SEO performance.

3. Use variables to make code more organized:If you need to call the Logo at multiple locations in the template or want the code structure to be clearer, you can first assign the Logo URL and website name to custom variables and then use these variables. Anqi CMS'ssystemThe tag allows you to directly assign the value obtained when calling a variable.

   {% system siteLogoUrl with name="SiteLogo" %}
   {% system websiteName with name="SiteName" %}
   
   <img src="{{ siteLogoUrl }}" alt="{{ websiteName }}" />
   

   here,siteLogoUrlThe variable now stores the URL of the Logo image,websiteNameThe variable stores the name of the website. You can use it directly in subsequent code.{{ siteLogoUrl }}and{{ websiteName }}to refer to them.

3. Further Thinking and Practice

In practical applications, in addition to simply displaying the Logo, we usually combine other features and practices to enhance the user experience.

1. Make the Logo clickable and jump to the homepage:The website logo usually carries the function of returning to the homepage by clicking. By combiningsystemTagging for obtainingBaseUrl(the homepage address of the website), this interaction can be easily achieved.

   {% system siteLogoUrl with name="SiteLogo" %}
   {% system websiteName with name="SiteName" %}
   {% system baseUrl with name="BaseUrl" %}
   
   <a href="{{ baseUrl }}">
       <img src="{{ siteLogoUrl }}" alt="{{ websiteName }}" />
   </a>
   

   This way, when visitors click on the logo, they can smoothly return to the homepage of the website.

2. Handle the case where the logo has not been uploaded:Sometimes, during the early stages of website construction or in certain situations, the Logo may not have been uploaded yet. IfSiteLogothe variable is empty,<img>label'ssrcThe property will be empty, which may cause the page to display abnormally. You can use conditional judgment to handle this situation:

   {% system siteLogoUrl with name="SiteLogo" %}
   {% system websiteName with name="SiteName" %}
   {% system baseUrl with name="BaseUrl" %}
   
   <a href="{{ baseUrl }}">
       {% if siteLogoUrl %}
           <img src="{{ siteLogoUrl }}" alt="{{ websiteName }}" />
       {% else %}
           <span class="site-title">{{ websiteName }}</span> {# 如果没有Logo，则显示网站名称作为文本Logo #}
       {% endif %}
   </a>
   

   This code will checksiteLogoUrlDoes it exist. If it exists, display the logo image;Otherwise, display the website name as a text logo (you can style it with CSS), to avoid display issues due to the missing logo.

3. Suggestion for Logo optimization:To ensure website loading speed and user experience, make sure your logo image is properly optimized. This includes:

   • File Format:Use WebP format first (supported for automatic conversion in Anqi CMS content settings), followed by PNG or SVG.
   • File size:Compress the file size as much as possible, avoid using too large a Logo image.
   • Responsive design:Ensure that the logo image is clear and adapts to different sizes of devices (mobile, tablet, desktop).

By following these detailed steps and practical tips, you can fully master the website Logo settings and display in Anqi CMS, making your brand image shine on the website.

Frequently Asked Questions (FAQ)

Q1: Why is the Logo not displayed on the website frontend after I uploaded it?A1: There are several possible reasons. First, please confirm that you have saved the Logo settings in the background "Global Function Settings".Secondly, check whether your template file has used it correctly{% system with name="SiteLogo" %}This tag is used to call the Logo. Additionally, browser caching may cause display delay, you can try clearing the browser cache or accessing in incognito mode.

Q2: How can I display a different Logo on a specific page of the website instead of the global Logo?A2: The website logo of AnQi CMS is a global setting.If you need to display different logos on specific pages, you may need some custom template logic.A method is not to use in the template of this pagesystemThe tag calls the global Logo, but instead directly introduces a link to a specific Logo image.<img>Label. A more advanced approach is to set a Logo field for a specific page in the background custom parameters, and then judge and call this custom Logo in the template of that page. If the custom Logo does not exist, fall back to the global Logo.