Add logo and title customization to the masthead (mmistakes#2026)

* Add logo and title customization to the masthead * Adjust config description * Add test site logo to `/test` * Document `site.logo` and `site.masthead_title` * Update CHANGELOG and history
chukycheese · Sep 18, 2023 · b57c8fd · b57c8fd
1 parent 8fa8310
commit b57c8fd
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### Enhancements
 
+- Add logo and title customization to the masthead. [#2026](https://github.com/mmistakes/minimal-mistakes/pull/2026)
 - Add support to customize `issue-term` for utterances comment provider. [#2022](https://github.com/mmistakes/minimal-mistakes/pull/2022)
 - Allow custom canonical url on a page-by-page basis. [#2021](https://github.com/mmistakes/minimal-mistakes/pull/2021)
 - Update table of contents navigation based on scroll position to indicate which link is currently active in the viewport. [#2020](https://github.com/mmistakes/minimal-mistakes/pull/2020)

diff --git a/_config.yml b/_config.yml
@@ -25,6 +25,8 @@ url                      : "https://chukycheese.github.io"
 baseurl                  : ""
 repository               : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
 teaser                   : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
+logo                     : # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
+masthead_title           : # overrides the website title displayed in the masthead, use " " for no title
 # breadcrumbs            : false # true, false (default)
 words_per_minute         : 200
 comments:

diff --git a/_includes/masthead.html b/_includes/masthead.html
@@ -1,8 +1,15 @@
+{% if site.logo contains "://" %}
+  {% capture logo_path %}{{ site.logo }}{% endcapture %}
+{% else %}
+  {% capture logo_path %}{{ site.logo | relative_url }}{% endcapture %}
+{% endif %}
+
 <div class="masthead">
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
-        <a class="site-title" href="{{ '/' | relative_url }}">{{ site.title }}</a>
+        {% if logo_path %}<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path }}"></a>{% endif %}
+        <a class="site-title" href="{{ '/' | relative_url }}">{{ site.masthead_title | default: site.title }}</a>
         <ul class="visible-links">
           {%- for link in site.data.navigation.main -%}
             {%- if link.url contains '://' -%}

diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss
@@ -39,6 +39,10 @@
   }
 }
 
+.site-logo img {
+  max-height: 2rem;
+}
+
 .site-title {
   display: -webkit-box;
   display: -ms-flexbox;

diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss
@@ -189,6 +189,11 @@
       color: $masthead-link-color-hover;
     }
 
+    &.site-logo {
+      margin-left: 0;
+      margin-right: 0.5rem;
+    }
+
     &.site-title {
       margin-left: 0;
     }

diff --git a/docs/_config.yml b/docs/_config.yml
@@ -19,6 +19,8 @@ url                      : https://mmistakes.github.io # the base hostname & pro
 baseurl                  : "/minimal-mistakes" # the subpath of your site, e.g. "/blog"
 repository               : "mmistakes/minimal-mistakes"
 teaser                   : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
+logo                     : # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
+masthead_title           : # overrides the website title displayed in the masthead, use " " for no title
 # breadcrumbs            : false # true, false (default)
 words_per_minute         : 200
 comments:

diff --git a/docs/_docs/05-configuration.md b/docs/_docs/05-configuration.md
@@ -2,7 +2,7 @@
 title: "Configuration"
 permalink: /docs/configuration/
 excerpt: "Settings for configuring and customizing the theme."
-last_modified_at: 2018-11-25T19:42:42-05:00
+last_modified_at: 2019-01-15T08:31:44-05:00
 toc: true
 ---
 
@@ -223,6 +223,27 @@ header:
   <figcaption>Example of teaser images found in the related posts module.</figcaption>
 </figure>
 
+### Site masthead logo
+
+To insert a logo before the site title, place a graphic in the `/assets/images/` directory and add the filename to `_config.yml`:
+
+```yaml
+logo: "/assets/images/88x88.png"
+```
+
+<figure>
+  <img src="{{ '/assets/images/mm-masthead-logo.png' | relative_url }}" alt="masthead with logo and custom title">
+  <figcaption>Example of masthead with logo and custom title.</figcaption>
+</figure>
+
+### Site masthead title
+
+By default your site title is used in the masthead. You can override this text by adding the following to your `_config.yml`:
+
+```yaml
+masthead_title: "My Custom Title"
+```
+
 ### Breadcrumb navigation (beta)
 
 Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results:

diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
@@ -4,14 +4,15 @@ permalink: /docs/history/
 excerpt: "Change log of enhancements and bug fixes made to the theme."
 sidebar:
   nav: docs
-last_modified_at: 2019-01-15T08:09:30-05:00
+last_modified_at: 2019-01-15T08:32:58-05:00
 toc: true
 ---
 
 ## Unreleased
 
 ### Enhancements
 
+- Add logo and title customization to the masthead. [#2026](https://github.com/mmistakes/minimal-mistakes/pull/2026)
 - Add support to customize `issue-term` for utterances comment provider. [#2022](https://github.com/mmistakes/minimal-mistakes/pull/2022)
 - Allow custom canonical url on a page-by-page basis. [#2021](https://github.com/mmistakes/minimal-mistakes/pull/2021)
 - Update table of contents navigation based on scroll position to indicate which link is currently active in the viewport. [#2020](https://github.com/mmistakes/minimal-mistakes/pull/2020)

diff --git a/docs/assets/images/mm-masthead-logo.png b/docs/assets/images/mm-masthead-logo.png
diff --git a/test/_config.yml b/test/_config.yml
@@ -18,6 +18,8 @@ url                      : # the base hostname & protocol for your site e.g. "ht
 baseurl                  : "/test"
 repository               : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
 teaser                   : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
+logo                     : "/assets/images/apple-touch-icon.png" # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
+masthead_title           : "Custom Title" # overrides the website title displayed in the masthead, use " " for no title
 # breadcrumbs            : false # true, false (default)
 words_per_minute         : 200
 comments:

diff --git a/test/assets/images/apple-touch-icon.png b/test/assets/images/apple-touch-icon.png