Added custom_logo support #3

getgrav · Aug 23, 2018 · 911f6da · 911f6da
1 parent 21715de
commit 911f6da
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# v1.1.1
+## 08/23/2018
+
+1. [](#new)
+    * Added new "custom logo" support [#3](https://github.com/getgrav/grav-theme-quark/issues/3)
+    * Added option JSON feed syndication support in sidebar [#47](https://github.com/getgrav/grav-theme-quark/pull/47)
+    * Added basic form field `array` styling
+
 # v1.1.0
 ## 07/25/2018
 

diff --git a/README.md b/README.md
@@ -61,12 +61,24 @@ header-dark: false            # Inverts the text/logo to work better on dark bac
 header-transparent: false     # Allows the fixed header to be transparent over the page
 sticky-footer: true           # Causes the footer to be sticky at the bottom of the page
 blog-page: '/blog'            # The route to the blog listing page, useful for a blog style layout with sidebar
+custom_logo:                  # A custom logo rather than the default (see below)  
 ```
 
 To make modifications, you can copy the `user/themes/quark/quark.yaml` file to `user/config/themes/` folder and modify, or you can use the admin plugin.
 
 > NOTE: Do not modify the `user/themes/quark/quark.yaml` file directly or your changes will be lost with any updates
 
+## Custom Logo
+
+To add a custom logo, you should put the log into the `user/themes/quark/images/logo` folder.  Standard image formats are support (`.png`,`.jpg`, `.gif`, `.svg`, etc.).  Then reference the logo via the YAML like so:
+
+```yaml
+custom_logo:
+    - name: 'my-logo.png'
+```
+
+Alternatively, you can you use the drag-n-drop "Custom Logo" field in the Quark theme options.
+
 ## Page Overrides
 
 Quark has the ability to allow pages to override some of the default options by letting the user set `body_classes` for any page.  The theme will merge the combination of the defaults with any `body_classes` set. For example:

diff --git a/blueprints.yaml b/blueprints.yaml
@@ -47,6 +47,17 @@ form:
       title: Header Defaults
       underline: true
 
+    custom_logo:
+      type: file
+      label: Custom Logo
+      size: large
+      destination: 'theme://images/logo'
+      multiple: false
+      markdown: true
+      description: Will be used instead of default logo `theme://images/grav-logo.svg`
+      accept:
+        - image/*
+
     header-fixed:
       type: toggle
       label: Fixed header

diff --git a/css-compiled/spectre.css b/css-compiled/spectre.css
diff --git a/css-compiled/spectre.min.css b/css-compiled/spectre.min.css
diff --git a/css-compiled/theme.css b/css-compiled/theme.css
diff --git a/css-compiled/theme.min.css b/css-compiled/theme.min.css
diff --git a/images/logo/.gitkeep b/images/logo/.gitkeep
diff --git a/scss/theme/_header.scss b/scss/theme/_header.scss
@@ -53,11 +53,12 @@
     }
   }
 
-  .logo svg {
-    width: 150px;
-    display: inherit;
-
-    @extend .default-animation;
+  .logo {
+    svg, img {
+      height: 42px;
+      display: inherit;
+      @extend .default-animation;
+    }
   }
 
   // Fixed Header solution
@@ -77,8 +78,10 @@ body.header-fixed.header-animated {
       height: $header-height-small;
     }
 
-    .logo svg {
-      width: 100px;
+    .logo {
+      svg, img {
+        height: 28px;
+      }
     }
 
     ~ .mobile-menu .button_container {

diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig
@@ -41,7 +41,7 @@
             <section class="container {{ grid_size }}">
                 <nav class="navbar">
                     <section class="navbar-section logo">
-                        <a href="{{ home_url }}" class="navbar-brand mr-10">{% include('@images/grav-logo.svg') %}</a>
+                        {% include 'partials/logo.html.twig' %}
                     </section>
                     <section class="navbar-section">
 

diff --git a/templates/partials/logo.html.twig b/templates/partials/logo.html.twig
@@ -0,0 +1,9 @@
+{% set logo = theme_var('custom_logo') %}
+<a href="{{ home_url }}" class="navbar-brand mr-10">
+{% if logo %}
+  {% set logo_file = (logo|first).name %}
+  <img src="{{ url('theme://images/logo/' ~ logo_file)  }}" alt="{{ site.name }}" />
+{% else %}
+  {% include('@images/grav-logo.svg') %}
+{% endif %}
+</a>