Responsive Logo Branding

INTRODUCTION

A tiny helper that lets your theme render the site logo via a Responsive Image style and exposes it as a Twig variable for the System Branding block.

Lighthouse kept dinging me for having a single logo image that scaled across all breakpoints instead of providing multiple image files. This seemed like a fun exercise, and I realized it would be pretty small and simple when I napkin desgined it.

Unfortunatley

What it does

• Adds a theme setting: “Logo responsive image style” (string; the machine name of a Responsive Image style).
• When the Responsive Image module is enabled and your theme's logo is an uploaded file (so it has a file URI like public://...), the module injects a responsive_logo variable into the system_branding_block preprocess.

REQUIREMENTS

This module requires Drupal core responsive_image module.

INSTALLATION

• Install the Responsive Logo branding module as you would normally install a contributed Drupal module. Visit https://www.drupal.org/node/1897420 for further information.

1. Copy this module to your custom modules directory (e.g. modules/custom/responsive_branding_logo).
2. Enable Responsive Image (Core) if you haven’t already.
3. Enable Responsive Logo Branding.

The logo must be uploaded in Appearance → Settings for this to work (so Drupal has a file URI). If your theme uses its default logo file, there is no file URI to transform and responsive_logo won’t be set.

CONFIGURATION

1. Create your Logo image styles in Configuration > Media > Image styles.
2. Create your Logo's Responsive Image style in Configuration > Media > Responsive Image styles.
3. Go to Appearance → (your theme) → Settings and fill in Logo responsive image style with the machine name of your logo responsive image style (e.g. logo_responsive).

THEMING

Override the branding block template to use the responsive logo:

block--system-branding-block.html.twig (in your theme):

{# Example: prefer responsive logo when available, else fall back to core's site_logo #}
<div class="branding">
  <a href="{{ path('<front>') }}" rel="home" class="site-logo">
    {% if responsive_logo is defined %}
      {{ responsive_logo }}
    {% elseif site_logo %}
      <img src="{{ site_logo }}" alt="{{ site_name|default('Home') }}">
    {% endif %}
  </a>

  {# Keep the rest of your branding (site_name, site_slogan) as you like #}
  {% if site_name %}
    <div class="site-name">{{ site_name }}</div>
  {% endif %}
  {% if site_slogan %}
    <div class="site-slogan">{{ site_slogan }}</div>
  {% endif %}
</div>

MAINTAINERS

Current maintainers for Drupal 10:

• Jason McEachen (JasonMcE) - https://www.drupal.org/u/JasonMcE