Add anchor links to the headers in my posts

This articles describes some JS that will automatically append a link SVG icon for headers in post content that have an id attribute.

SVG Elements and namespacing

The SVG namespace is not naturally entwined with HTML, so if you've ever tried to create an SVG element, you might have noticed it doesn't work using the standard document.createElement DOM API method.

SVG elements are namespaced under http://www.w3.org/2000/svg, so creating them needs to be done with the document.createElementNS DOM API.
document.createElementNS('http://www.w3.org/2000/svg', 'svg')
Similarly, the use elements for re-using an SVG definition defined using the xlink namespace.
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
use.setAttributeNS(
    'http://www.w3.org/1999/xlink',
    'xlink:href',
    '/responsive/sprite_v1_6.css.svg#ic_24_link_dark');

This example creates the Get link icon using the use element and xlink namespace.

The JS

The custom HTML gadget executes the following javascript to create the elements.
<script>
document.querySelectorAll('.Blog h2, .Blog h3, .Blog h4').forEach(
  h => {
    if (!h.id || h.querySelector('.anchor')) return;
    h.innerText = h.innerText + ' '; // Add some whitespace.
    var a = document.createElement('a');
    a.href = '#' + h.id;
    a.setAttribute('class', 'anchor');
    h.appendChild(a);
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('class', 'svg-icon-24');
    a.appendChild(svg);
    var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
    use.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
    use.setAttributeNS(
        'http://www.w3.org/1999/xlink',
        'xlink:href',
        '/responsive/sprite_v1_6.css.svg#ic_24_link_dark');
    svg.appendChild(use);
  });
  </script>

Comments

Post a Comment

Popular posts from this blog

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Add snippets to the Emporio theme

Image
A lot of people love the image-focused look of the newer Emporio template. This article explains how to tweak your template's XML to add a short snippet to the Emporio posts - unfortunately, there's no easy way to add in snippets for Emporio, without customizing the markup. But, if you're feeling brave, head to: Theme -> Edit HTML -> Jump to Widget -> Blog 1 If you search for 'snippet-container', you'll come across: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title /> </div> <b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div> Notice that it's just got the title. You could change it to add something like: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.
Read more