How to dynamically display the website logo image in AnQiCMS templates?

The website's logo is the core of the brand image, it can not only enhance the professionalism of the website, but also facilitate users to quickly identify and remember your brand.For AnQiCMS users, dynamically displaying the logo image in the website template is a fundamental and important operation.It is fortunate that AnQiCMS provides a very convenient way to achieve this, allowing you to easily manage and display the website logo without writing complex code.

Manage website logo: Back-end settings are key

To display the Logo on your AnQiCMS website, the first step is of course to set it up and upload it in the background. This process is intuitive and simple.

You only need to log in to your AnQiCMS backend management interface, and then shift your focus to the left menu bar.There, you will find an option called "Background Settings

In the "Global Function Settings" page, you will see a series of customizable global website information.其中就有一个非常醒目的选项，标记为“English LOGO”。Here, simply click on the corresponding upload button, select the logo image file you have prepared on your computer, and then upload and save your settings.Suggest that you upload an image with moderate size, high resolution, and appropriate compression. This ensures that it displays well on various devices and does not slow down the website loading speed.

Dynamically call the Logo in the template

Logo image upload completed, the next step is how to correctly display it in the website front-end template.AnQiCMS uses syntax similar to Django template engine, using specific tags to dynamically retrieve background data, which makes the creation of templates and the invocation of content very flexible.

AnQiCMS为此提供了一个名为 EnglishsystemThe template tag, which is specifically used to retrieve the global configuration information of the website, naturally including the website Logo we just set.

To display the Logo in the template, you can use it like thissystemTags:

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

Here,{% system with name="SiteLogo" %}The complete URL address of the Logo image you upload on the backend will be directly output. At the same time, to comply with web standards, enhance the SEO performance of the website, and improve accessibility, we strongly recommend that you addalt（Replacement text）property. Generally, the value of this property can be directly used as the name of the website. AnQiCMS also providessystemtags to dynamically retrieve the website name, i.e.{% system with name="SiteName" %}.This is such that even if the image cannot be displayed, users and search engines can understand the content represented by this image.

If you want to operate the Logo image or website name as a variable in the template for more complex logic processing or multiple references, you can also assign them to a variable first:

{% system siteLogo with name="SiteLogo" %}
{% system siteName with name="SiteName" %}

<img src="{{ siteLogo }}" alt="{{ siteName }}" />

This way allows you to use it more flexibly in the template.siteLogoandsiteNameThese variables, such as adjusting styles, adding links, etc.

The advantages of dynamically displaying the logo

Using this dynamic call method, the logo management of your website will become very flexible and efficient.

Firstly, no matter how many pages on your website reference the Logo, you only need to update the Logo image in the "Global Function Settings" of AnQiCMS backend once, and all references to the Logo will be automatically updated, greatly reducing the cost of repetitive operations and maintenance.This is undoubtedly a great convenience for operators who need to frequently update brand images or conduct A/B tests.

其次，for AnQiCMS's multi-site management feature, whether different sites need to share the same Logo or have independent Logos, the system can flexibly handle it to ensure consistency and customization of content.

Logo image usage tips

In actual operation, in addition to learning how to dynamically display the Logo, there are some tips that can help you better utilize this important brand element:

  • Image Optimization：Ensure that the logo image size is optimized using a compression tool, the 'Content Settings' in AnQiCMS also provides the feature of automatically compressing large images and converting to WebP format, which can further improve the website loading speed.
  • CompatibilityConsidering the screen sizes of different devices, make sure your logo image is clear and beautiful on PC, tablet, and mobile devices.This may involve CSS adjustments in responsive design, but the logo itself should have some flexibility in design.
  • Consistency：Maintain the position and size of the Logo relatively consistent throughout the website design, strengthen brand recognition.

Through the simple mechanism provided by AnQiCMS, it becomes easy to dynamically manage and display the website logo, allowing you to focus more on the content and operation strategy of the website.

Common Questions (FAQ)

  1. Q: I uploaded the Logo on the backend and added the code in the template, but the Logo did not show up on the website. What's wrong?A: In this situation, you can check the following steps:

    • Check the background saveEnsure that you clicked the "Save" or "Submit" button after uploading the Logo on the "Global Feature Settings" page to make the changes take effect.
    • Clear system cache：AnQiCMS will have a caching mechanism, new configurations may need to clear the cache to take effect on the front end.You can enter the background, click the 'Update Cache' feature to clear all cache.
    • Check the image pathEnsure that the uploaded image file is not corrupted and the logo image path displayed on the back-end is correct.
    • Check the template codeCarefully check the templatesystemThe spelling and parameters of the label are completely consistent with the document example, includingname="SiteLogo"etc. The template syntax of the Go language is very sensitive to case.
    • Browser cache：Sometimes the browser may cache old images, try clearing your browser cache or access the website in incognito mode.

  2. Q: Can I use a different Logo for different pages of the website or on mobile?A: AnQiCMS'ssystemThe label calls the global Logo. If you need to display a different Logo for a specific page or mobile (in the "Computer + Mobile Independent Site" mode), you can consider the following methods:

    • Custom template logicIn the page template where you want to use a different Logo, upload a specific Logo image by adding a custom field (for example, in the "Other Parameters{% if page.PageLogo %}CombinepageDetailorarchiveDetailLabel to call this specific Logo, otherwise fallback to the global Logo.
    • Multi-site feature：AnQiCMS supports multi-site management. If you have a completely independent PC site and mobile site (bound to different domains), you can consider managing them as two separate sites, each with its own global Logo.

  3. Q: How can I optimize my logo image to load faster while maintaining clarity?A: Image optimization is crucial for website performance:

    • Built-in background features：AnQiCMS的“Content Settings”中提供了“是否启动Webp图片格式”和“是否自动压缩大图”等功能。You can enable these options to allow the system to automatically process uploaded images, converting them to a smaller WebP format or compressing them to a specified width.
    • Size and resolutionAccording to the actual size of the Logo displayed on the web page, prepare the image to avoid uploading too large of the original image.The pixel width of a general website logo is sufficient to be clear between 100-300px.
    • File format：Prioritize using SVG (vector graphics) format, which maintains clarity at any size, with small file size and scalability.If bitmap usage is necessary, WebP is the preferred choice considering both quality and file size, followed by PNG (supports transparent background).JPEG is suitable for photos, but not suitable for Logo graphics.
    • External Tool: Before uploading to AnQiCMS, you can also use professional image compression tools (such as TinyPNG