fix(template): image titles not recognized in Safari Reader mode

sparanoid · Aug 12, 2015 · 9de3d64 · 9de3d64
1 parent 4962189
commit 9de3d64
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/_app/_includes/themes/curtana/layouts/post.html b/_app/_includes/themes/curtana/layouts/post.html
@@ -18,7 +18,6 @@
 {% capture amsf_page_heading_type_svg %}
   <img
     src="{{ site.assets | prepend: site.base }}/{{ page.svg-headline }}"
-    alt="{{ page.title | strip_html | xml_escape }}"
     {% if page.svg-headline-width %}
       style="width: {{ page.svg-headline-width | times: 0.1 }}vw;"
     {% else %}
@@ -29,14 +28,22 @@
 
 {% capture amsf_page_heading_text %}
   {% if page.img-headline %}
+    {{ page.title }}
     {{ amsf_page_heading_type_img }}
   {% elsif page.svg-headline %}
+    {{ page.title }}
     {{ amsf_page_heading_type_svg }}
   {% else %}
     {{ page.title }} <span></span>
   {% endif %}
 {% endcapture %}
 
+{% capture amsf_page_heading_class %}
+  {% if page.img-headline or page.svg-headline %}
+    image-title
+  {% endif %}
+{% endcapture %}
+
 {% capture amsf_page_heading_external %}
   {% if page.link %}
     class=external
@@ -59,7 +66,9 @@
   <!-- Post title -->
   <header>
 
-    <h1>{{ amsf_page_heading }}</h1>
+    <h1 class="{{ amsf_page_heading_class }}" title="{{ page.title | strip_html | xml_escape }}">
+      {{ amsf_page_heading }}
+    </h1>
 
     {% if page.date %}
       <small>

diff --git a/_app/assets/themes/curtana/_less/app.less b/_app/assets/themes/curtana/_less/app.less
@@ -343,6 +343,12 @@ body:hover .latest {
       }
     }
 
+    // Hide actual text if post title is image or SVG, the actual text helps Safari get the real post title in Reader mode.
+    .image-title {
+      text-indent: -999999px;
+      line-height: 0;
+    }
+
     .latest-post {
       margin-top: 16vmin;
       font-size: 80%;