As a website content expert who deeply understands the operation of AnQiCMS, I know 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, provides powerful content functions while also ensuring convenient management and access to 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.
The upload process of the website logo for AnQiCMS
The website logo is the first visual impression users have of your brand, therefore, its upload and management in AnQiCMS are 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.
Firstly, please log in to the AnQiCMS backend management interface using your administrator account.After logging in successfully, find the "Background Settings" option in the left navigation menu and click to enter.In the "Background SettingsHere, various basic configurations of the website are managed, including the setting of the website logo.
In the "Global Feature Settings" page, you will find a dedicated area for "Website Logo" upload.通常，这里会提供一个上传按钮或图片选择框。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 that you upload high-definition images.Please make sure to click the "Save" or "Submit" button at the bottom of the page after selecting and uploading an image to ensure that your changes are adopted and saved by the system.Complete this step, your website's logo has already been successfully stored in the AnQiCMS system, ready to be displayed on the front end at any time.
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 adopted syntax similar to Django template engine, making it simple and clear to call system settings in the front-end template.header.htmlorbase.html.
To call and display the website LOGO you uploaded on the backend, you can use the system tags provided by AnQiCMS. Specifically,systemLabels 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 an appropriate location 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 address of the website LOGO image you uploaded will be obtained from the system configuration.alt="{% system with name="SiteName" %}"It will obtain the "website name" configured in the "Global Function Settings" and use it as the important alternative text for the imagealtProperty). This not only helps visually impaired users understand the content of the image, but is also an important part of Search Engine Optimization (SEO), which can enhance the search engine friendliness of your website.
Through this method, whenever 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 choice of image format.For website logos, it is recommended to use SVG format as it is a vector graphic, which does not distort when scaled to any size and usually has a smaller file size.If SVG is not available, PNG format is the second choice, it supports transparent background and is suitable for various background colors.AnQiCMS in the content settings also provides the option to convert WebP image formats, enabling it can further optimize the image volume, thereby speeding up the page loading speed.
Next, please 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 properly before uploading.An overly large logo image can increase page loading time, thereby affecting user experience and SEO ranking.Ensure that 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 aforementionedaltProperties, if you need to display different versions of LOGO for different devices (such as PC and mobile) or use LOGO of the same style but different sizes in different areas of the website, AnQiCMS's template flexibility 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 **practice**, you can easily manage and showcase your brand identity, providing website visitors with a professional and smooth visual experience.
Common Questions (FAQ)
1. I uploaded the LOGO, but the front-end page does not display it, or it displays the old LOGO. Why is that?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 background to clean up the system cache.{% system with name="SiteLogo" %}Label.
2. What is the image format and size of the website logo?**It is recommended to use SVG for formatting, as it has the advantages of infinite 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.Generally, the height of 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 different devices of the website?English defaultSiteLogoThe label 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 of LOGO or replace images under different screen sizes. - Different pages/regions (customized)：You can add a 'custom setting parameter' in the 'Global Function Settings' of AnQiCMS backend, upload additional LOGO images, and then call these custom parameters in the templates of specific pages. For example, you can add a parameter named
MobileLogoThe parameter, and call it in the mobile template.