Added options to display logo in header

CHANGELOG.md

@@ -1,3 +1,12 @@
+# v1.2.4
+## 01/04/2024
+
+1.  [](#new)
+    * Added option to display image logo in header
+2.  [](#improved)
+    * Updated CSS styles
+    * Updated translations
+  
 # v1.2.3
 ## 11/26/2023
 

assets/css/main.css

@@ -2818,6 +2818,11 @@ table.alt tfoot {
   text-decoration: none;
   border-bottom: 0;
 }
+#header .logo a .logo-img {
+  padding: 0.25em 0 !important;
+  vertical-align: middle;
+  height: 3em;
+}
 @media screen and (max-width: 736px) {
   #header .logo {
     font-size: 1em;

assets/sass/components/_logo.scss

@@ -14,7 +14,14 @@
             letter-spacing: 0.25em;
             text-decoration: none;
             border-bottom: 0;
+
+            .logo-img {
+                padding: 0.25em 0 !important;
+                vertical-align: middle;
+                height: 3em;
             }
+        }
+        
 
     @include breakpoint('<=small') {
     font-size: 1em;

assets/sass/libs/_breakpoints.scss

@@ -4,7 +4,7 @@
 
 	/// Breakpoints.
 	/// @var {list}
-	$breakpoints: () !global;
+	//$breakpoints: () !global;
 
 // Mixins.
 

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Future 2021
 slug: future2021
 type: theme
-version: 1.2.3
+version: 1.2.4
 description: Grav Future Imperfect by HTML5 UP (Version 2021)
 icon:  microchip
 author:
@@ -95,6 +95,16 @@ form:
           accept:
             - image/*
         
+        type_logo_header:
+          type: radio
+          label: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER
+          help: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER_HELP
+          default: text
+          options:
+              image: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER_IMAGE
+              text: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER_TEXT
+              both: FUTURE.ADMIN.THEME.TYPE_LOGO_HEADER_BOTH
+
         slogan:
           type: text
           label: FUTURE.ADMIN.THEME.SLOGAN

languages.yaml

@@ -10,6 +10,11 @@ en:
         CUSTOM_LOGO: Custom Logo
         CUSTOM_LOGO_DESCRIPTION: Will be used instead of default logo `theme://images/grav-logo.svg`
         CUSTOM_LOGO_MOBILE: Mobile Custom Logo
+        TYPE_LOGO_HEADER: 'Show logo/text in header'
+        TYPE_LOGO_HEADER_HELP: Choose how to display the logo in the header
+        TYPE_LOGO_HEADER_IMAGE: Image
+        TYPE_LOGO_HEADER_TEXT: Text
+        TYPE_LOGO_HEADER_BOTH: Both
         SLOGAN: Slogan
         MENU:
           TITLE: Top Menu Configuration
@@ -281,6 +286,11 @@ de:
         CUSTOM_LOGO: Benutzerdefiniertes Logo
         CUSTOM_LOGO_DESCRIPTION: Dieses Logo wird anstelle des Standardlogos `theme://images/grav-logo.svg` verwendet
         CUSTOM_LOGO_MOBILE: Benutzerdefiniertes Logo für Mobilgeräte
+        TYPE_LOGO_HEADER: 'Logo/Text in der Kopfzeile anzeigen'
+        TYPE_LOGO_HEADER_HELP: Wählen Sie aus, wie das Logo in der Kopfzeile angezeigt werden soll
+        TYPE_LOGO_HEADER_IMAGE: Bild
+        TYPE_LOGO_HEADER_TEXT: Text
+        TYPE_LOGO_HEADER_BOTH: Beide
         SLOGAN: Motto
         MENU:
           TITLE: Menü-Konfiguration
@@ -549,6 +559,11 @@ es:
         CUSTOM_LOGO: Logo personalizado
         CUSTOM_LOGO_DESCRIPTION: Este logo se usará en lugar del log por defecto `theme://images/grav-logo.svg`
         CUSTOM_LOGO_MOBILE: Logo personalizado para dispositivos móviles
+        TYPE_LOGO_HEADER: 'Mostrar logo/texto en el encabezado'
+        TYPE_LOGO_HEADER_HELP: Elige cómo quieres que aparezca el logo en el encabezado.
+        TYPE_LOGO_HEADER_IMAGE: Imagen
+        TYPE_LOGO_HEADER_TEXT: Texto
+        TYPE_LOGO_HEADER_BOTH: Ambos
         SLOGAN: Slogan
         MENU:
           TITLE: Configuración del Menú Superior

templates/partials/header.html.twig

@@ -2,11 +2,22 @@
 {% set icon_lang = theme_var('menu_langswitcher')|defined('false') %}
 {% set icon_search = theme_var('menu_search')|defined('false') %}
 {% set icon_login = theme_var('menu_login')|defined('false') %}
-
+{% set logoImageHeader = theme_var('type_logo_header')|defined('text') %}
 <header id="header">
+    
     <div class="logo">
-    <a href="{{ home_url }}">{{ site.title }}</a>
+      
+      <a href="{{ home_url }}" class="">
+       {% if logoImageHeader == 'image' %}
+        {% include 'partials/logo.html.twig' with {'logo_class': 'logo-img'} %}
+      {% elseif logoImageHeader == 'both' %}
+        {% include 'partials/logo.html.twig' with {'logo_class': 'logo-img'} %}{{ site.title }}
+      {% else %}
+        {{ site.title }}
+      {% endif %}
+      </a>
     </div>
+  
   <nav class="dropdown">
     {% block header_navigation %}
       {% include 'partials/navigation.html.twig' %}

templates/partials/logo.html.twig

@@ -1,9 +1,7 @@
 {% set logo = theme_var('custom_logo_mobile') ?: theme_var('custom_logo') %}
-<a href="{{ home_url }}" class="logo" rel="nofollow" title="{{ site.title|raw }}">
   {% if logo %}
     {% set logo_file = (logo|first).name %}
-    <img src="{{ url('theme://images/logo/' ~ logo_file) }}" alt="{{ site.title|raw }}"/>
+    <img src="{{ url('theme://images/logo/' ~ logo_file) }}" alt="{{ site.title|raw }}" class="{{ logo_class }}"/>
   {% else %}
     {% include('@images/grav-logo.svg') %}
   {% endif %}
-</a>

templates/partials/sidebar-bits/intro.html.twig

@@ -1,6 +1,8 @@
 <!-- Intro -->
 <section id="intro">
+<a href="{{ home_url }}" class="logo" rel="nofollow" title="{{ site.title|raw }}">
 {% include 'partials/logo.html.twig' %}
+</a>
 <header>
     <h2>{{ site.title|e('html') }}</h2>
     <p>{{theme_config.slogan|raw}}</p>