CMS Development

kyleffotf
Member

How do you use other logos in a brand kit?

SOLVE

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?

 

 

 

0 Upvotes
1 Accepted solution
Anton
Solution
Thought Leader

How do you use other logos in a brand kit?

SOLVE

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):

Bildschirmfoto 2024-04-12 um 09.47.02.png

Bildschirmfoto 2024-04-12 um 09.47.33.png

 

 

 

hope that helps.

 

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

3 Replies 3
Anton
Solution
Thought Leader

How do you use other logos in a brand kit?

SOLVE

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):

Bildschirmfoto 2024-04-12 um 09.47.02.png

Bildschirmfoto 2024-04-12 um 09.47.33.png

 

 

 

hope that helps.

 

 

best, 

Anton

Anton Bujanowski Signature
Jnix284
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

How do you use other logos in a brand kit?

SOLVE

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.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

Jnix284
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

How do you use other logos in a brand kit?

SOLVE

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?

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin