Publii Tips And Tricks

screenshot


I have what is called a “static” website. In the old days we just called it a website. I use a program called Publii for content management and templating. I like the program and the template I use, but it’s not perfect. Below are a few changes I’ve made to make it better fit my needs. 

Remember to document the changes you make. They will get overwritten if the theme is updated.

broken files file

So suddenly while syncing my website, instead of 80 or so files it uploaded over 1000. It this for every update. After some investigation I found that the files.publii,json file was corrupted.

I ftp’d the file and that fixed the too many files problem, but created a new problem. That day’s updates were already listed in the online file, so Publii would not upload them. I worked around this by renaming the updated files.

The other option would be to delete the online files.publii.json. This will cause Publii to re-upload every file listed in the local copy of the jason file. This will take some time and bandwidth though. 

video template

I post a new video almost every week. The problem is that without much text the featured image in the post is not needed because it usually matches the image of the video. Also it creates confusion as to what the user should click on to view the video.

Warning: After making the changes below in the folder: 
 [PATH]/publii/sites/[SITE NAME]/input/themes/[THEME NAME/
you will need to copy your changes to the folder:
 [PATH]/publii/themes/[THEME NAME]

1. Create Template

This was easy. I copied the post.hbs to post-video.hbs.

2. Tell the system where the template is

I added this code to the file config.json:
    "postTemplates": {
        "video": "video template"
     },

3. Restart and confirm

When editing or creating a new post the template now appears under “Other options → Post template.

4. Modify the template

This is a matter of commenting out the code that displays the featured image in the post-video.hbs file. In the theme I use the featured image code was surrounded by these tags so it was easy to identify.

            {{#featuredImage}}

            {{/featuredImage}}

Do not delete the code until you have tested the output.

5. Sync your website

The changes you made will not update any existing pages, unless you edit them in Publii, select the new template, and resync your website.

accessibility issues

 more buttons – By default, the buttons all said “Read More.” That means there are nine links on the page with the same text. That’s bad. I added the title to the button text to make the link texts unique.

<li>
<!-- <a href="{{url}}" class="button">{{ translate 'common.learnMore' }}</a> -->
          <a href="{{url}}" class="button">Read More: {{title}}</a>
</li>

headline and image links

The theme template by default used the Headline, the Featured Image and the More button to link to the article. That’s excessive. It’s best if there is a single link to each story on the page. So I removed the links from the headline and the featured image.

In the file index.hbs I made these changes and removed the reference to the logo image:
<h1>
<!-- <a href="{{url}}">{{title}}</a> -->
{{title}}
</h1>

Contrast

The copyright notice was tiny and unreadable due to poor contrast. In the main.css file I changed the copyright class color to black and increased the font size to 1EM.