Found a mistake? Please contact me.

  • Link: CSS for Photos page for Micro.blog-hosted blogs

    I’ve added a new page for photos … We’re starting with a simple grid of photo thumbnails …, each linking to the microblog post. …

    It uses CSS Grid Layout, so you can also customize a bunch of things without changing the template. For example, to change it to 5 equally-spaced columns, click Posts → Design → Edit CSS and paste in:

    
    .photos-grid-container {
        grid-template-columns: 20% 20% 20% 20% 20% !important;
    }

    Source: Manton Reece - New photos page for Micro.blog-hosted blogs.

  • Link: Get Your Site Ready For Dark Mode

    I’ve been able to update my site to support dark mode across iOS 13, iPadOS and MacOS.…It turns out to be extremely simple. I just had to add a small bit of code to my custom CSS, as seen below.

    Thanks @andynicolaides .

    Andy’s screenshot of his site using light or dark mode.

  • Link: more structure to URLs

    Manton wrote on July 6, 2019:

    Rolled out a few tweaks to custom pages on Micro.blog-hosted blogs today, including performance improvements and allowing more structure to URLs, so you can create web pages like /travel/northwest or /books/fiction. (Click Posts → Pages and then edit a page. Enjoy!)

  • Add a header image to your blog

    You can do this. You need to already know: how to reach your Theme files and the Custom CSS file. You also need to have prepared a suitable image.

    I have a blog for folks interested in our local community — the beach where I live. As it’s a beautiful place I’d like to use a photo at the top of the pages. Many people would call this a header image, but for this tutorial I’ll refer to it as a banner, so as not to confuse it with the header part of the page that contains the title of the blog and other information. See Head, header, heading.

    Caveat: I’ve only tested this with the Arabica theme my Love Waikawa Beach blog uses. Other themes may need slightly different instructions.

    Love Waikawa Beach blog before the banner.

    Love Waikawa Beach blog before the banner.

    We’re going to add the banner image using an additional file, though it could also be added directly to the files that control the Home Page and other pages.

    In addition, we need to edit one file and set up some CSS.

    Step by step, copy and paste — it’s not too hard.

    This is what we’ll do:

    1. Upload the prepared image, then copy and save the URL.
    2. Make a new theme page and paste in the code, then save.
    3. Paste some extra code into the page that lists posts, then save.
    4. Edit the Custom CSS to make it look better.

    Upload the prepared image and copy the URL

    1. Prepare a suitable image. Mine was 929 pixels wide by 237 pixels high.
    2. Upload the image to your blog.
    3. Control click on the uploaded image and copy the image URL.
    4. Save that address somewhere as you’ll need it later.
    Copy the uploaded image address.

    Copy the uploaded image address.

    Make a new Theme page called layouts/partials/banner.html

    1. Go to the page that lists all your theme files.
    2. Click the New Template button. A new, empty, template page opens.
    3. In the empty name area at the top paste layouts/partials/banner.html
    4. In the main part of the page paste the code below. Replace the part that says ImageURL with the address for the image.
    5. Click the Update Template button. The new template is saved and you’re returned to the list of templates.

    The code to paste in the body of the new page. Replace the part that says ImageURL with the actual address for the image:

    <div class=“banner”>
    <img src=“ImageURL” alt=“” class=“banner” />
    </div>
    
    New Template button.

    New Template button.

    Love Waikawa Beach banner partial, with extra comments.

    Love Waikawa Beach banner partial, with extra comments.

    Love Waikawa Beach list of custom templates.

    Love Waikawa Beach list of custom templates.

    Paste additional code into layouts/partials/header.html

    Note: In the Arabica theme you need layouts/partials/header.html. Other themes could name their header files differently or incorporate them into other files. In Arabica the header.html file is included in all other pages, so adding an item here will add it everywhere.

    1. Go to the page that lists all your theme files.
    2. Click the layouts/partials/header.html page to edit it. The page opens.
    3. At the top, you should see something like: <header class=“main-header”>.
    4. Press Return after the end of that line to create a blank line.
    5. Paste in {{ partial “banner.html” . }} (that’s all).
    6. Click the Update Template button. The new template is saved and you’re returned to the list of templates.

    That piece of code calls up the other page we just created and includes it in any page a visitor is viewing, if that page is based on the template we’ve added this code in to.

    The banner code included in header.html.

    The banner code included in header.html.

    There. You’ve now added the banner image to your Home Page. Visit your Home Page and refresh it to see the change. Try some other pages too. If the banner image doesn’t appear on other pages you’ll have to add the {{ partial “banner.html” . }} code to more of the theme files. Ask for help if you can’t work out where to add the code.

    Love Waikawa Beach blog with banner, but notice the gap.

    Love Waikawa Beach blog with banner, but notice the gap.

    You may notice though that the banner image isn’t in exactly the right place. That’s where CSS comes in. I wanted to have my banner image butting right up against the top of the page.

    Style the banner image

    In the code above we assigned a class to the chunk of code that contains the banner: banner. We can use that to make sure the image is correctly placed. In my Custom CSS file I added this:

    /* banner image */
    .banner img {
      width:100%;
      max-width: 969px;
      padding-top:0;
      margin-top:0;
    }

    .main-header { padding-top:0; margin-top:0; }

    That set the banner image to be as wide as the rest of the page (100%) and it removed any padding or margin above the image. It then goes on to make sure the main-header that contains the banner image also has no padding or margin above it.

    Love Waikawa Beach banner now buts up against the top of the page.

    Love Waikawa Beach banner now buts up against the top of the page.

    You may need or want different CSS coding for your blog’s banner image. Ask for help if you don’t know what you need.

    Sometimes the hardest thing about all this is forcing your blog to refresh properly. While writing this tutorial I had to switch to a different browser with an Incognito window and refresh there for the changed CSS to be picked up.

    Extra notes

    One person found that when copying the code from this tutorial the speech marks all became curly (“ ”) instead of straight (" "). That didn’t happen for me, but watch for it causing problems for you.

    The banner image of green characters at the top of this blog uses a different method. I did that before I’d figured out how to do it the way explained above. This one uses a background image, with the text below it shifted down a bit.

    My personal blog uses the Marfa theme. I did an experiment that demonstrated my quick effort would need a lot more work. I added the layouts/partials/banner.html file as described above. Then I found I needed to edit layouts/_default/baseof.html rather than a header file. The results of that quick experiment were terrible and I removed the image again. As a proof of concept though, it worked.

    My blog banner coding.

    My blog banner coding.

    I edited baseof.html.

    I edited baseof.html.

    My blog banner is way too big and isn't in keeping, but it did work.

    My blog banner is way too big and isn’t in keeping, but it did work.

  • Add number of available pages to the pagination

    You can do this. You need to already know: how to reach your Theme files.

    My Love Waikawa Beach website uses the Arabica theme. Along with providing links to older and newer posts (See Link to more blog pages with pagination) it tells you how many pages there are and which page you’re currently viewing.

    Page numbering - page 3 of 10.

    Page numbering - page 3 of 10.

    I realised while making the screenshot what a pale grey those links are. That’s not very user-friendly and I’ll be making them darker and easier to read.

    Here’s the end of the page on this blog after the pagination tutorial. Let’s add the number of pages between the links to Older and Newer Posts.

    Pagination links separated mb

    Pagination links separated mb

    Add the page number code to layouts/partials/pagination.html

    In the previous tutorial you created layouts/partials/pagination.html and pasted in the following code.

    {{ $pag := $.Paginator }}

    <nav id=“post-nav”> {{ if $pag.HasNext }} <span class=“older”> <a href=”{{ $pag.Next.URL }}” title=“Older Posts”> <span class=“arrow”>←</span> Older Posts </a> </span> {{ end }} {{ if $pag.HasPrev }} <span class=“newer”> <a href=”{{ $pag.Prev.URL }}” title=“Newer Posts”> Newer Posts <span class=“arrow”>→</span> </a> </span> {{ end }} </nav>

    Now we need to add extra code in the right place. The part to pay attention to is in the middle:

    {{ end }}
       {{ if $pag.HasPrev }}

    Copy the following code and paste it between {{ end }} and {{ if $pag.HasPrev }}.

    The code to copy and paste (I’ve broken up the line to fit better on this blog):

    <span class=“page-number”>
    Page {{ $pag.PageNumber }} of {{ $pag.TotalPages }}
    </span>
    
    Page number code.

    Page number code inserted between the Older and Newer posts links.

    Click the Update Template button. The new template is saved and you’re returned to the list of templates.

    You’ve now added page numbering to your Home Page. Visit your Home Page and refresh it to see the change.

    Page numbering on this Custom blog.

    Page numbering on this Custom blog.

  • Link to more blog pages with pagination

    You can do this. You need to already know: how to reach your Theme files and the Custom CSS file.

    When visitors reach the bottom of the Home Page on my personal blog, there's nowhere to go. I'd like them to be able to see another page, of older posts, and then another, if they wish.

    Bottom of the Home Page on my personal blog.

    Bottom of the Home Page on my personal blog.

    My personal blog uses the Marfa theme. Other themes do offer pagination controls. To add pagination is straightforward: copy the appropriate code, and paste it into the appropriate place, then tidy up the appearance with some CSS.

    I found the pagination code in the Default theme. We're going to add the page numbers as that theme does, using an additional file, though they could also be added directly to the file that controls the Home Page.

    In addition, we need to edit one file and set up some CSS.

    Step by step, copy and paste — it's not too hard.

    This is what we'll do:

    1. Make a new theme page and paste in the code, then save.
    2. Paste some extra code into the page that lists posts, then save.
    3. Edit the Custom CSS to make it look better.

    Make a new Theme page called layouts/partials/pagination.html

    1. Go to the page that lists all your theme files.
    2. Click the New Template button. A new, empty, template page opens.
    3. In the empty name area at the top paste layouts/partials/pagination.html
    4. In the main part of the page paste the code below.
    5. Click the Update Template button. The new template is saved and you're returned to the list of templates.

    The code to paste in the body of the new page:

    {{ $pag := $.Paginator }}
    
    <nav id="post-nav">
         {{ if $pag.HasNext }}
            <span class="older">
                <a href="{{ $pag.Next.URL }}" title="Older Posts">
                    <span class="arrow">←</span> Older Posts 
                </a>
            </span>
        {{ end }}
       {{ if $pag.HasPrev }}
            <span class="newer">
                <a href="{{ $pag.Prev.URL }}" title="Newer Posts">
                     Newer Posts <span class="arrow">→</span>
                </a>
            </span>
        {{ end }}
    </nav>
    
    New Template button.

    New Template button.

    Page name.

    Page name.

    List of custom templates.

    List of custom templates.

    The code above links to older posts on the left and newer posts on the right. I've edited it to do that: the original linked to newer on the left and older on the right.

    Paste additional code into layouts/partials/post-list.html

    Note: In the Arabica theme you need layouts/_default/list.html. Other themes could name their Home Page files differently.

    1. Go to the page that lists all your theme files.
    2. Click the layouts/partials/post-list.html page to edit it. The page opens.
    3. Scroll to the bottom. You should see something like: {{ end }} </ul>. There’s nothing after that. That’s the code that appears in the Marfa theme, but your theme may be different.
    4. Paste the code below.
    5. Click the Update Template button. The new template is saved and you’re returned to the list of templates.

    The code to paste in:

    <div class=“extra-pagination”>
            {{ partial “pagination.html” .}}
    </div>
    

    That piece of code calls up the other page we just created and includes it in any page a visitor is viewing, if that page is based on the template we’ve added this code in to.

    Partial included in Home Page template.

    Partial included in Home Page template.

    There. You’ve now added pagination to your Home Page. Visit your Home Page and refresh it to see the change. Scroll to the bottom then try out the Older Posts and then Newer Posts links.

    You may notice though that both links appear right next to one another and it all looks a bit cramped. That’s where CSS comes in.

    Our new pagination links are all jammed up together.

    Our new pagination links are all jammed up together.

    Style the pagination links to be centred across the page

    In the code above we assigned a class to the chunk of code that contains the links: extra-pagination. We can use that to make sure the links are centred across the page. In your Custom CSS file add this:

    /* Centre the pagination links /
    .extra-pagination { text-align: center; }
    

    Style the pagination links to move them apart

    The two links also each had a class: older and newer.

    One way to separate them is to add padding on the right or left.

    In your Custom CSS file add this:

    / pad out the older and newer pagination links */
    span.older { padding-right:2rem; border-right: solid #ffffff 4px; }
    span.newer { padding-left:2rem; border-left: solid #ffffff 4px; }
    

    What that does is to add a white (#ffffff) border that’s 4 pixels wide on one side. If your page background is white then that border will be invisible.

    It also adds some padding to push the links apart.

    You could change the colour, change the 4px border width, or change the 2rem padding to suit yourself.

    Save the Custom CSS file and then check your blog.

    Sometimes the hardest thing about all this is forcing your blog to refresh properly. While writing this tutorial I had to switch to a different browser and refresh there for the changed CSS to be picked up.

    The Pagination links have been separated by CSS.

    The Pagination links have been separated by CSS.

  • Link: Referencing photos in Hugo themes

    Manton Reece: Referencing photos in Hugo themes, June 26, 2019.

    This post provides the code you need to add metadata to the head of a blog post based on the images it contains:

    This looks at the photos on a post and takes the first one, adding its URL to a meta tag. If instead of the original photo you want to include a smaller thumbnail, you can use Micro.blog’s special photos.micro.blog resizing proxy.

List of Tutorials.

⌘ This site and the tutorials were created by Miraz Jordan. ⌘