How to upload AnQiCMS website logo and call it to display in the front-end template?

As a website content expert who deeply understands the operation of AnQiCMS, I am well aware of the importance of a clear and easily recognizable website logo for brand image and user experience.AnQiCMS as an efficient and customizable content management system, while providing powerful content functions, also ensures the convenient management and calling of basic website elements such as LOGO.Next, I will elaborate on how to upload the website logo in AnQiCMS and display it correctly in the website's front-end template.

AnQiCMS website logo upload process

The website logo is the first visual impression of your brand for users, therefore, its upload and management in AnQiCMS is designed to be intuitive and efficient.To upload your website logo to the AnQiCMS system, you need to log in to the admin backend and go to the global settings area.

First, please log in to the AnQiCMS backend management interface using your administrator account.After successful login, find the "Background Settings" option in the left navigation menu and click to enter.In the submenu of "Background Settings", you will see an option named "Global Function Settings", please click it.Here, various basic configurations of the website are centrally managed, including the setting of the website logo.

In the "Global Feature Settings" page, you will find a dedicated area for uploading the "website logo".Generally, an upload button or image selection box is provided here.Click this area, the system will guide you to select your LOGO image file from your local computer.To ensure the display effect of the image on various devices and resolutions, it is recommended to upload high-definition images.After selecting and uploading an image, please make sure to click the 'Save' or 'Submit' button at the bottom of the page to ensure that your changes are accepted and saved by the system.Complete this step, your website logo has already been successfully stored in the AnQiCMS system and is ready to be displayed on the front end.

Call and display the website logo in the front-end template

After successfully uploading the LOGO, the next step is to display it on various pages of the website.AnQiCMS uses a syntax similar to the Django template engine, making it simple and clear to call system settings in front-end templates.The website logo is usually located at the top navigation bar or header area of the page, so you may need to edit the corresponding file in your website template, such asheader.htmlorbase.html.

To call and display the website logo you uploaded on the backend, you can use the system tags provided by AnQiCMS. Specifically,systemTags are a universal tool for obtaining various system configuration information, including the address of the website logo and the website name.

You can use the following code snippet at the appropriate position in the template file to dynamically display the LOGO image:

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

In this code:

• {% system with name="SiteLogo" %}The system configuration will retrieve the address of the website LOGO image you uploaded.
• alt="{% system with name="SiteName" %}"It will retrieve the website name you have configured in the "Global Feature Settings" and use it as the important alternative text for the image (altProperties). This not only helps visually impaired users understand the content of the images, but it is also an important part of Search Engine Optimization (SEO), which can improve the search engine friendliness of your website.

In this way, no matter when you update the website logo or name in the background, the front-end page will automatically synchronize and display the latest content without manually modifying the template code.

Optimization and **practical suggestions

When uploading and calling the website logo, there are some **practical and optimization suggestions that can help you improve website performance and user experience.

The first is the selection of image formats. For website logos, it is recommended to use SVG format because it is a vector graphic, which will not be distorted no matter how much it is enlarged, and the file size is usually smaller.If SVG is not available, PNG format is the second choice, it supports transparent backgrounds and is suitable for various background colors.AnQiCMS also provides the option to convert WebP image formats in the content settings, enabling it can further optimize the image size, thereby speeding up page loading speed.

Secondly, pay attention to the size and file size of the LOGO image.Although AnQiCMS provides the function of automatically compressing large images, it is recommended to crop and compress the images appropriately before uploading.A large logo image will increase the page loading time, thereby affecting user experience and SEO ranking.Ensure the logo size is suitable for its display area on the website and keep the file size as small as possible.

Finally, in addition to the above mentionedaltAttribute, if you need to display different versions of the LOGO for different devices (such as PC and mobile) or to use style-unified but size-diverse LOGOs in different areas of the website, the flexibility of AnQiCMS templates also allows you to achieve this by CSS media queries or customizing more LOGO image fields in the background.

AnQiCMS provides a simple and powerful solution for uploading and calling website LOGO.By following these steps and **practices, you can easily manage and display your brand identity, providing a professional and smooth visual experience for website visitors.

Frequently Asked Questions (FAQ)

1. Why did the logo I uploaded not display on the front-end page, or is it displaying an old logo?This situation usually occurs due to browser cache or system cache.You can try clearing the browser cache, or click the 'Update Cache' button in the AnQiCMS backend to clear the system cache.If the problem still exists, please check if the LOGO image has been successfully uploaded and saved in the "Global Function Settings", and whether the template code has been used correctly.{% system with name="SiteLogo" %}.

2. What is the image format and size of the website logo?**It is recommended to use SVG, as it has the advantages of unlimited scaling without distortion and small file size.If SVG cannot be used, PNG format is a good choice, supporting transparent background.As for the size, it depends on your website design. Typically, the height of the logo is between 30px and 60px, and the width is adjusted according to the design ratio.The key is to ensure that the image is clear and the file size is as small as possible to optimize loading speed.

3. Can different logos be displayed on different pages or devices of the website?Default of AnQiCMSSiteLogoThe tag calls a logo from the global settings. If you need to display different logos for different pages or devices, you can achieve this in the following way:

• Responsive design (for different devices): Use media queries in CSS (@media) to control the display style or image replacement of the logo under different screen sizes.
• Different pages/regions (customized)：You can add "custom setting parameters" in the "Global Function Settings" of AnQiCMS backend, upload additional LOGO images, and then call these custom parameters in the template of specific pages. For example, you can add a parameter namedMobileLogoThe parameter, and call it in the mobile template.