Make Dynamic Views use the width from the Template Editor

Dynamic Views is little bit different to the other Blog templates on Blogger. It renders all of the posts client-side, with a variety of views. But, there's no easy way to adjust the width of a Dynamic Views Blog, as it doesn't respond to the value selected in the GUI editor.

Blogger's template designer makes it easy to trial different widths.
Too bad this doesn't work on Dynamic Views :(

The reason that it doesn't work is that the javascript for Dynamic Views clears out all the existing <style> from the <head> element of the page when a view is loaded. So even though the <b:template-skin> element propagates the content.width variable into the css, it's wiped away before Dynamic Views even gets started.

Unless...
Actually, there is one case in which it doesn't wipe the <style> tags - when they have a class of "singleton-element". This is how we're going to propagate the content.width variable.

Step 1: Store the Variable's Value

Head to your Template tab, and hit Edit HTML.

If we take a copy of the css before Dynamic View's cleanup occurs, we can persist it in a separate css element which is marked as singleton. So to be sure we get in first, this should happen immediately after the <b:template-skin>.




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
      function getStyleRuleValue(style, selector, sheet) {
          var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
          for (var i = 0, l = sheets.length; i &lt; l; i++) {
              var sheet = sheets[i];
              if( !sheet.cssRules ) { continue; }
              for (var j = 0, k = sheet.cssRules.length; j &lt; k; j++) {
                  var rule = sheet.cssRules[j];
                  if (rule.selectorText &amp;&amp; rule.selectorText.split(',').indexOf(selector) !== -1) {
                      return rule.style[style];
                  }
              }
          }
          return null;
      }
      window.dynamicViewsHack = {
        width: getStyleRuleValue('width', '.dynamicViewsHack')
      };

Step 2: Make a Singleton Style

Add a script somewhere near the end inside the head tag. You can tweak the classes that you want to affect with the width parameter below; the script currently affects the classic and flipcard views.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
      // Get width as number.
      var width = $('&lt;div style="width: ' + window.dynamicViewsHack.width + ';"&gt;&lt;/div&gt;').width();

      var $style = $('<style></style>');
      $style.addClass('singleton-element');
      $style.append('ol#items li.item { max-width: ' + width + 'px; }');
      $style.append(' ol#items li.item div.article { max-width: ' + width + 'px; }');
      $style.append(' div#overview div.overview-wrap { max-width: ' + (width + 250) + 'px; }');
      $style.append(' div#overview div.overview-wrap div.article { max-width: ' + width + 'px; }');
      $style.append(' div.viewitem-panel div.viewitem-content { max-width: ' + width + 'px; }');
      $style.append(' div.viewitem-panel div.viewitem-content div.article { max-width: ' + width + 'px; }');
      $('head').append($style);

Now, when you head to Template tab and hit Customise, you should be able to adjust the value of Entire Blog in the Adjust Widths tab.

Happy Blogging!

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