Merge pull request #174 from isubit/D8ISUTHEME-157

D8ISUTHEME-157 Header and footer logo dimensions
isubit · Jul 26, 2021 · ebfe08f · ebfe08f
2 parents 9c6dda8 + f56f5f9
commit ebfe08f
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 9 deletions.
diff --git a/config/install/iastate_theme.settings.yml b/config/install/iastate_theme.settings.yml
@@ -3,13 +3,20 @@ gold_border_hidden: 0
 iastate_copyright_hidden: 0
 features:
   favicon: true
+logo:
+  use_default: true
+  path: ''
 iastate_logo_alt: ''
+iastate_logo_width: ''
+iastate_logo_height: ''
 iastate_logo_url: ''
 iastate_unit_name: ''
 iastate_unit_url: ''
 iastate_footer_logo_path: themes/contrib/iastate_theme/isu-stacked.svg
 iastate_footer_logo_url: 'https://www.iastate.edu/'
 iastate_footer_logo_alt: ''
+iastate_footer_logo_width: '180'
+iastate_footer_logo_height: '58'
 iastate_contact_address: "2221 Wanda Daley Dr\n2nd Floor ASB\nAmes, IA 50011"
 iastate_contact_email: '[email protected]'
 iastate_contact_phone: '515-294-6654'

diff --git a/css/base.css b/css/base.css
@@ -260,7 +260,7 @@ caption {
 /* ## IMAGES
 /* --------------------------------------  */
 
-img {
+img:not(.isu-wordmark-logo_default):not(.isu-wordmark-logo_custom):not(.isu-footer-logo) { /* See theme.css */
   max-width: 100%;
   height: auto;
 }

diff --git a/css/theme.css b/css/theme.css
@@ -174,9 +174,13 @@ body,
   .isu-wordmark a:focus {
     color: #ffffff;
   }
-.isu-wordmark-logo {
+.isu-wordmark-logo_default {
   width: 100%;
-  max-width: 250px;
+  max-width: 250px ;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.isu-wordmark-logo_custom {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
@@ -200,9 +204,18 @@ body,
   border-top: 1px solid rgba(255, 255, 255, 0.5);
 }
 
+/* Medium */
+@media (max-width: 991px) {
+  .isu-wordmark-logo_custom {
+    width: 100%;
+    max-width: 250px;
+    height: auto;
+  }
+}
+
 /* Large */
 @media screen and (min-width: 992px) {
-  .isu-wordmark-logo {
+  .isu-wordmark-logo_default {
     width: 100%;
     max-width: 400px;
     margin-top: 0;
@@ -1293,9 +1306,9 @@ a.tabledrag-handle .handle {
   color: #676767;
   background: #f3f3f3;
 }
-.isu-footer-logo {
-  width: 100%;
-  max-width: 180px;
+.isu-footer-logo { 
+  max-width:  100%;
+  height: auto;
 }
 .isu-sign-off_wrapper {
   margin-bottom: -2rem;

diff --git a/iastate_theme.theme b/iastate_theme.theme
@@ -167,6 +167,10 @@ function iastate_theme_preprocess(&$variables, $hook) {
 
 function iastate_theme_preprocess_block(&$variables) {
   $variables['iastate_logo_alt'] = theme_get_setting('iastate_logo_alt');
+  $variables['iastate_logo_width'] = theme_get_setting('iastate_logo_width');
+  $variables['iastate_logo_height'] = theme_get_setting('iastate_logo_height');
+  $variables['iastate_logo_alt'] = theme_get_setting('iastate_logo_alt');
+  $variables['is_default_logo'] = \Drupal::config('iastate_theme.settings')->get('logo.use_default');
   $variables['iastate_logo_url'] = theme_get_setting('iastate_logo_url');
 }
 
@@ -185,6 +189,8 @@ function iastate_theme_preprocess_page(&$variables) {
   $variables['iastate_footer_logo_path'] = theme_get_setting('iastate_footer_logo_path');
   $variables['iastate_footer_logo_url'] = theme_get_setting('iastate_footer_logo_url');
   $variables['iastate_footer_logo_alt'] = theme_get_setting('iastate_footer_logo_alt');
+  $variables['iastate_footer_logo_width'] = theme_get_setting('iastate_footer_logo_width');
+  $variables['iastate_footer_logo_height'] = theme_get_setting('iastate_footer_logo_height');
 
   $variables['iastate_contact_title'] = theme_get_setting('iastate_contact_title');
   $variables['iastate_contact_address'] = theme_get_setting('iastate_contact_address');

diff --git a/templates/blocks/block--system-branding-block.html.twig b/templates/blocks/block--system-branding-block.html.twig
@@ -30,13 +30,18 @@
 {% extends "block.html.twig" %}
 
 {% block content %}
+
   <div class="isu-wordmark">
     {% if iastate_logo_url %}
       <a href="{{ iastate_logo_url }}">
     {% endif %}
 
     {% if site_logo %}
-      <img class="isu-wordmark-logo" src="{{ site_logo }}" {% if iastate_logo_alt %} alt="{{ iastate_logo_alt }}" {% else %} alt="Iowa State University logo"{% endif %}>
+      {% if is_default_logo %}
+        <img class="isu-wordmark-logo isu-wordmark-logo_default" width="400" height="30" src="{{ site_logo }}" {% if iastate_logo_alt %} alt="{{ iastate_logo_alt }}" {% else %} alt="Iowa State University logo"{% endif %}>
+      {% else %}
+        <img class="isu-wordmark-logo isu-wordmark-logo_custom" {% if iastate_logo_width %}width="{{ iastate_logo_width }}"{% endif %} {% if iastate_logo_height %} height="{{ iastate_logo_height }}"{% endif %} src="{{ site_logo }}" {% if iastate_logo_alt %} alt="{{ iastate_logo_alt }}" {% else %} alt="Iowa State University logo"{% endif %}>
+      {% endif %}
     {% endif %}
 
     {% if iastate_logo_url %}

diff --git a/templates/parts/footer.html.twig b/templates/parts/footer.html.twig
@@ -24,7 +24,7 @@
             {% if iastate_footer_logo_url %}
               <a href="{{ iastate_footer_logo_url }}">
             {% endif %}
-                <img class="isu-footer-logo" src="{{ base_path }}{{ iastate_footer_logo_path }}" class="wordmark-isu" {% if iastate_footer_logo_alt %} alt="{{ iastate_footer_logo_alt }}" {% else %} alt="Iowa State University logo" {% endif %}>
+                <img class="isu-footer-logo" {% if iastate_footer_logo_width %} width="{{iastate_footer_logo_width }}"{% else %}width="180"{% endif %} {% if iastate_footer_logo_height %} height="{{ iastate_footer_logo_height }}"{% else %}height="58"{% endif %} src="{{ base_path }}{{ iastate_footer_logo_path }}" class="wordmark-isu" {% if iastate_footer_logo_alt %} alt="{{ iastate_footer_logo_alt }}" {% else %} alt="Iowa State University logo" {% endif %}>
             {% if iastate_footer_logo_url %}
               </a>
             {% endif %}

diff --git a/theme-settings.php b/theme-settings.php
@@ -47,6 +47,27 @@ function iastate_theme_form_system_theme_settings_alter(&$form, &$form_state) {
     '#default_value'  => theme_get_setting('iastate_logo_url'),
   );
 
+  // Logo dimensions description
+    $form['logo']['logo_settings']['logo_dimensions_description'] = array(
+    '#type' => 'item',
+    '#title' => t('Logo dimensions'),
+    '#markup' => t('If you are using a custom logo, set an explicit width and height to improve page load time.'),
+  );
+
+  // Logo width
+  $form['logo']['logo_settings']['iastate_logo_width'] = array(
+    '#type'   => 'number',
+    '#title'  => t('Logo width in pixels'),
+    '#default_value'  => theme_get_setting('iastate_logo_width'),
+  );
+
+  // Logo height
+  $form['logo']['logo_settings']['iastate_logo_height'] = array(
+    '#type'   => 'number',
+    '#title'  => t('Logo height in pixels'),
+    '#default_value'  => theme_get_setting('iastate_logo_height'),
+  );
+
   // Create a section for ISU theme settings
   $form['iastate_theme_settings'] = array(
     '#type'         => 'details',
@@ -365,4 +386,27 @@ function iastate_theme_form_system_theme_settings_alter(&$form, &$form_state) {
     '#default_value'  => theme_get_setting('iastate_footer_logo_alt'),
     '#description' => t('If left blank the alt text will be Iowa State University logo'),
   );
+
+  // Footer logo dimensions description
+    $form['iastate_footer_logo']['footer_logo_dimensions_description'] = array(
+    '#type' => 'item',
+    '#title' => t('Logo dimensions'),
+    '#markup' => t('Set an explicit width and height for the footer logo.'),
+  );
+
+  // Footer logo width
+  $form['iastate_footer_logo']['iastate_footer_logo_width'] = array(
+    '#type'   => 'number',
+    '#title'  => t('Footer logo width in pixels'),
+    '#default_value'  => theme_get_setting('iastate_footer_logo_width'),
+    '#description' => t('Default is 180.'),
+  );
+
+  // Footer logo height
+  $form['iastate_footer_logo']['iastate_footer_logo_height'] = array(
+    '#type'   => 'number',
+    '#title'  => t('Footer logo height in pixels'),
+    '#default_value'  => theme_get_setting('iastate_footer_logo_height'),
+    '#description' => t('Default is 58.'),
+  );
 }