How to dynamically display the website's logo image in the template of AnQiCMS?

The website's logo is the core of the brand image, it not only enhances the professionalism of the website, but also facilitates users in quickly identifying and remembering your brand.For AnQiCMS users, dynamically displaying the logo image in a website template is a basic yet important operation.luckyly, 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 crucial

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 just need to log in to your AnQiCMS admin interface and then shift your gaze to the left menu bar.There, you will find an option named "Background Settings", click it, and then select to enter the "Global Function Settings".

On the "Global Function Settings" page, you will see a series of customizable global website information.Among them is a very prominent option, marked as 'Website Logo'.Here, just click the corresponding upload button, select the prepared Logo image file from your computer, and then upload and save your settings.Suggest uploading a picture with a moderate size, high clarity, and proper compression to ensure it displays well on various devices and does not slow down the website loading speed.

Dynamically call the Logo in the template

After the logo image is uploaded, the next step is how to correctly display it in the website's front-end template.AnQiCMS uses a syntax similar to the Django template engine, using specific tags to dynamically retrieve background data, making the creation of templates and the calling of content very flexible.

AnQiCMS provided a name calledsystemThe template tag, it is used to obtain the global configuration information of the website, which naturally includes the website logo we have 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 of the Logo image you uploaded will be directly output. At the same time, to comply with web standards, improve the SEO performance and accessibility of the website, we strongly recommend that you add to the Logo imagealt(Replacement text) attribute. Usually, the value of this attribute can be directly used as the name of the website. AnQiCMS also providessystemtag to dynamically retrieve the website name, that is{% system with name="SiteName" %}. This way, even if the image cannot be displayed, users and search engines can understand the content represented by the image.

If you want to operate the logo image or website name as a variable in the template, so that it can be used 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 be more flexible in using templatessiteLogoandsiteNameThese variables, such as adjusting styles, adding links, and so on.

The advantage of dynamically displaying the logo

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

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

Secondly, for the multi-site management feature of AnQiCMS, 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 the content.

Logo picture 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: Be sure to use a compression tool to optimize the logo image size. AnQiCMS also provides the function of automatically compressing large images and converting to WebP format in the "Content Settings" menu, which can further improve the loading speed of the website.
  • AdaptabilityConsidering the screen size of different devices, ensure that 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 generally have some elasticity.
  • Consistency: Maintain the position and size of the Logo consistently throughout the website design, strengthening brand recognition.

Through the simple mechanism provided by AnQiCMS, dynamic management and display of the website logo become effortless, allowing you to focus more on the content and operation strategy of the website.

Frequently Asked Questions (FAQ)

  1. Q: I uploaded the Logo on the backend and also added code to the template, but the Logo didn't show up on the website, what's the matter?A: In this case, you can check the following steps:

    • Check background saveMake sure you have clicked the "Save" or "Submit" button after uploading the Logo on the "Global Feature Settings" page to enable the changes.
    • Clear the system cacheThe AnQiCMS has a caching mechanism, the new configuration may need to clear the cache to take effect on the front page.You can go to the background, click the 'Update Cache' feature to clear all the cache.
    • Check the image pathMake sure the uploaded image file is not corrupted and the path of the Logo image displayed on the back end is correct.
    • Check the template codeMake sure to check the template carefully.systemThe spelling and parameters of the tag are consistent with the document example, includingname="SiteLogo"etc. The template syntax of Go language is very sensitive to case.
    • Browser cacheSometimes the browser caches old images, try clearing your browser cache or access the website in incognito mode.

  2. Q: Can I use different Logos for different pages or mobile devices?A: AnQiCMS'systemThe tag 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, add a custom field (for example, in the 'Other Parameters' of a single page, category, or document by adding a 'PageLogo' field), upload the specific Logo image. Then, use conditional judgment in the template.{% if page.PageLogo %}CombinepageDetailorarchiveDetailLabel to call this specific Logo, otherwise fallback to the global Logo.
    • Multi-site functionality: AnQiCMS supports multi-site management. If you have completely independent PC site and mobile site (bound with different domain names), you can consider managing them as two independent sites, each with its own global Logo.

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

    • Built-in backend features：AnQiCMS's “Content Settings” provides the functions such as 'Whether to enable Webp image format' and 'Whether to automatically compress large images'.You can enable these options to let the system automatically process uploaded images, converting them to a smaller WebP format or compressing them to a specified width.
    • Size and resolution: Prepare the image according to the actual size displayed on the web page, and avoid uploading excessively large original images.The pixel width of a general website logo is sufficient to be clear between 100-300px.
    • File Format: Prefer using SVG (vector graphic) format, which remains clear at any size, with small file size and scalability.If bitmap usage is necessary, WebP is currently the preferred choice considering both image quality and file size, followed by PNG (supports transparent background).JPEG is suitable for photos, but not for logos of this kind.
    • External ToolBefore uploading to AnQiCMS, you can also use professional image compression tools (such as TinyPNG)