How can I display site logo, name and slogan?

Question

how can i show site logo, name and slogan Separately in custom area in my site theme, I now use this code to display theme, buts this code don't allow me to edit each of them Separately.

{{ page.header }}

Answer 1

function mytheme_preprocess_page(&$variables) {
  $site_config = \Drupal::config('system.site');
  $variables['site_name'] = $site_config->get('name');
  $variables['site_slogan'] = $site_config->get('slogan');

  // logo needs to be placed within specified folder
  $variables['logopath'] = file_url_transform_relative(file_create_url(theme_get_setting('logo.url')));

}

Then in page.html.twig you can use variables site_name and site_slogan as follows:

{{ site_name }}
{{ site_slogan }}

and for the logo:

<img src="{{ logopath }}" />

note: logo image file will need to be available in your current theme's root folder (or subfolder of your choice).

Answer 2

If you use {{ page.header }} to get the site logo and name, then you have a branding block in the region header.

To change how this block is rendered, you can copy the twig into your theme template folder and change the markup:

block--system-branding-block.html.twig

{% extends "block.html.twig" %}
{#
/**
 * @file
 * Theme override for a branding block.
 *
 * Each branding element variable (logo, name, slogan) is only available if
 * enabled in the block configuration.
 *
 * Available variables:
 * - site_logo: Logo for site as defined in Appearance or theme settings.
 * - site_name: Name for site as defined in Site information settings.
 * - site_slogan: Slogan for site as defined in Site information settings.
 */
#}
{% block content %}
  {% if site_logo %}
    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
    </a>
  {% endif %}
  {% if site_name %}
    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
  {% endif %}
  {{ site_slogan }}
{% endblock %}

Answer 3

If the logo is provided by the custom theme, I will simply use in my twig:

<img src="{{ directory ~ '/logo.svg' }}" width="220px" />

directory will lead to the current theme path instead of hooking.

Answer 4

theme_get_setting('logo.url') was the best option for me as \Drupal::theme()->getActiveTheme()->getLogo() doesn't return the right file name. I've got the default file name logo.svg instead.

I'm using a subtheme of Bootstrap barrio 5.1.4.

Figuring out in getActiveTheme() method : in my case $theme->info['logo'] returns NULL

Answer 5

You can also get the active theme's logo path by using the theme manager service.

\Drupal::theme()->getActiveTheme()->getLogo().

Answer 6

Add as separate blocks configured to only display the required item for which there is a checkbox to do so.

Answer 7

It works on Drupal 9.

$host = \Drupal::request()->getSchemeAndHttpHost();
// Get a setting from theme.
$logo_url = \Drupal::theme()->getActiveTheme()->getLogo();
$logo = $host .'/'. $logo_url;

Answer 8

Example for Drupal 10 get URL logo

for file .theme add next lines

function theme_preprocess(&$variables) {
 // Get the admin logo path from the theme settings.
 $path_logo_admin = theme_get_setting('logo.url');
 // Pass the path of the admin logo to the template.
 $variables['logo_path'] = $path_logo_admin;
};

for twig file

<img class="text-white mr-3 logo" src="{{ logo_path }}" alt="Description" >