Adding article icon tags (fixes #12)

README.md

@@ -19,15 +19,18 @@ The maximum width that an image will be rendered at is 1200px. 1200px wide by 22
 
 Internal tags can be added from the Tags page in Ghost's admin interface. All internal tags are prefixed with a hash. Tag behavior in this theme is dependent on whether it has an associated image.
 
+### How to add an icon before a post's title
+
+- The **Tag image** field is the icon file. This is assumed to be an SVG with an `id` matching the tag's **Meta description**. The SVG must be structured this way to support `fill=currentColor`, which enables the icon to be themed with the website.
+- The **Meta title** field is used for the image title and alt text.
+
 ### How to add text after a post's title
 
 Do not add an image to your internal tag. Only the **Description** field is used.
 
 ### How to add icons above a post's title
 
-- The **Tag image** field is the icon file. This is assumed to be an SVG with an `id` matching the tag's **Meta description**. The SVG must be structured this way to support `fill=currentColor`, which enables the icon to be themed with the website.
+In addition to the fields for an icon before a post's title, a **Description** field must be provided. The provided description text will follow the icon.
-- The **Meta title** field is used for the image title and alt text.
-- The **Description** field is the text that accompanies the icon, if present.
 
 ### How to hide publication date and/or table of contents
 

assets/css/screen.css

@@ -326,6 +326,23 @@ hr {
     display: inline;
 }
 
+.tag-post-icon {
+    color: var(--color-primary-text);
+    float: left;
+}
+
+.gh-article-title .tag-post-icon {
+    width: var(--big-title-font-size);
+    height: var(--big-title-font-size);
+    margin-right: 15px;
+}
+
+.gh-card-title .tag-post-icon {
+    width: var(--title-font-size);
+    height: var(--title-font-size);
+    margin-right: 10px;
+}
+
 /* Feed
 /* ---------------------------------------------------------- */
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "bifocal",
     "description": "A Ghost theme, based on Solo",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "private": true,
     "engines": {
         "ghost": ">=5.0.0"

partials/get-meta-tags.hbs

@@ -4,15 +4,17 @@
     <ul class="tag-list">
         {{#foreach tags visibility="internal"}}
             {{#if feature_image}}
-                <li>
+                {{#if description}}
-                    <svg class="tag-icon" role="img" title="{{meta_title}}" alt="{{meta_title}}">
+                    <li>
-                        <use href="{{img_url feature_image}}#{{meta_description}}">
+                        <svg class="tag-icon" role="img" title="{{meta_title}}" alt="{{meta_title}}">
-                    </svg>
+                            <use href="{{img_url feature_image}}#{{meta_description}}">
+                        </svg>
 
-                    <div class="tag-text">
+                        <div class="tag-text">
-                        <p>{{description}}</p>
+                            <p>{{description}}</p>
-                    </div>
+                        </div>
-                </li>
+                    </li>
+                {{/if}}
             {{/if}}
         {{/foreach}}
 

partials/get-post-icon.hbs

@@ -0,0 +1,13 @@
+{{!-- Used for de-emphasized text after post title --}}
+
+{{#if tags}}
+    {{#foreach tags visibility="internal"}}
+        {{^if description}}
+            {{#if feature_image}}
+                <svg class="tag-post-icon" role="img" title="{{meta_title}}" alt="{{meta_title}}">
+                    <use href="{{img_url feature_image}}#{{meta_description}}">
+                </svg>
+            {{/if}}
+        {{/if}}
+    {{/foreach}}
+{{/if}}

partials/loop.hbs

@@ -22,6 +22,7 @@
             </div>
 
             <h2 class="gh-card-title">
+                {{> "get-post-icon"}}
                 {{title}}
                 <div class="tag-desc">
                     {{> "get-desc-tags"}}

post.hbs

@@ -11,6 +11,7 @@
                 {{#if feature_image}}
                     <header class="gh-article-header gh-canvas">
                         <h1 class="gh-article-title">
+                            {{> "get-post-icon"}}
                             {{title}}
                             <div class="tag-desc">
                                 {{> "get-desc-tags"}}
@@ -31,7 +32,13 @@
 
                     {{#unless feature_image}}
                         <header class="gh-article-header">
-                            <h1 class="gh-article-title">{{title}}</h1>
+                            <h1 class="gh-article-title">
+                                {{> "get-post-icon"}}
+                                {{title}}
+                                <div class="tag-desc">
+                                    {{> "get-desc-tags"}}
+                                </div>
+                            </h1>
                             {{#if custom_excerpt}}
                                 <p class="gh-article-excerpt">{{custom_excerpt}}</p>
                             {{/if}}