How do you use other logos in a brand kit?

[kyleffotf]

How do I use the other logos in my brand kit settings?

We have 3 logos in our brand kit, a coloured one, a white one, and black one.

When I use the logo module, it only displays the default logo, but I want to be able to switch between the 3 depending on my landing page.

I have tried creating a custom header module, with a Choice field that lets me switch between the different header themes, but there is no documentation or examples on how to reference the other logos in my brand kit. It seems I can only accomplish this using an Image module, but then what is the purpose of having an logo module, or multiple logos in the brand kit?

[Anton · Accepted solution]

Hi @kyleffotf, 

you're both right - it is not that well documented. There's only this documentation about brand-kit logos.

You had the right idea about creating a custom module with a choice field. It's a bit "thinking around the corner" since you have to write the code a bit different.

Also: using brand_settings.logos[0] is the same as brand_settings.primaryLogo and therefore will output the primary logo

Nontheless - here's a working code that will work in a custom module

module.html:

{% if module.custom_logo == "primary" %}
    {% set custom_logo_info = brand_settings.primaryLogo %}
{% elif module.custom_logo == "secondary" %}
    {% set custom_logo_info = brand_settings.logos[1] %}
{% endif %}

{# just logo #}
<img src="{{ custom_logo_info.src }}" alt="{{ custom_logo_info.alt }}" height="{{ custom_logo_info.height }}" width="{{ custom_logo_info.width }}" style="height:{{ custom_logo_info.height }};width:{{ custom_logo_info.width }}">


{# logo with automatic link #}
{% if custom_logo_info.link %}
    <a href="{{ custom_logo_info.link }}">
		<img src="{{ custom_logo_info.src }}" alt="{{ custom_logo_info.alt }}" height="{{ custom_logo_info.height }}" width="{{ custom_logo_info.width }}" style="height:{{ custom_logo_info.height }};width:{{ custom_logo_info.width }}">
    </a>
{% endif %}

{# logo with manual link #}
{% if module.link_logo %}
    <a href="{{ custom_logo_info.link }}">
		<img src="{{ custom_logo_info.src }}" alt="{{ custom_logo_info.alt }}" height="{{ custom_logo_info.height }}" width="{{ custom_logo_info.width }}" style="height:{{ custom_logo_info.height }};width:{{ custom_logo_info.width }}">
    </a>
{% endif %}

fields.json (if you're working with CLI):

[
 {
  "choices": [
   [
    "primary",
    "Primary"
   ],
   [
    "secondary",
    "Secondary"
   ]
  ],
  "display": "radio",
  "display_width": null,
  "id": "7120ae94-964c-4db3-59ab-935a41a66a2f",
  "label": "Custom logo",
  "locked": false,
  "multiple": false,
  "name": "custom_logo",
  "preset": null,
  "reordering_enabled": true,
  "required": false,
  "type": "choice"
 },
 {
  "type": "boolean",
  "id": "936778fc-fbd1-7ee7-d170-5062ee637cf2",
  "default": false,
  "display": "toggle",
  "label": "Link logo",
  "name": "link_logo"
 }
]

Screenshots of the module settings (if you're working with the design-manager):

 

hope that helps.

best, 

Anton

 

[Jnix284]

Amazing, thank you @Anton it's great to know that brand_settings.logos[1] can be incrementally increased to leverage additional logos in the brand kit.

@kyleffotf since you have three logos, you'll need to also include brand_settings.logos[2] accordingly.

[Jnix284]

This is a great question @kyleffotf, I couldn't find any documentation to call the other logos from a brand kit - I'm wondering if this is a planned capability or just undocumented. 

@Anton any idea if you can allow additional logos from a brand kit to be selected from a module dropdown? So if you have multiple logos in the brand kit, giving an option to choose one instead of only using the first/default?