What's a website without content? In the Posts section of Publii you can create articles that will make up the bulk of the content on your site. In this section we'll look at how to add, remove or edit your site content.
Adding a Post
To add a post in Publii, click on the Posts option in the left sidebar, then click on the green Add new post button; this will in the center section of the screen if you don't have any posts, or at the top-right if you do.
You'll see the Create New Post page, where you'll be doing all your writing and editing. The text editor included with Publii includes all the options that you'd expect, including the ability to insert tables and pictures or embed media from online video websites like Dailymotion. These options are all listed at the top of the editor screen. Before continuing, remember to add a Post Title in the field provided; until this is done you will not be able to save any changes to the post.
As well as the text editor there are a number of additional options that allow for finer control of your post. These options are all included in the right sidebar, separated into tabs for easy sorting. Thew following options available (note that not all options are available for all themes):
- Feature this post in listings - If enabled, then the post will be highlighted on listing pages such as tag pages, so that more visitors will notice it.
- Hide this post in listings - Enabling this option will stop the post from appearing on listing pages, such as author or tag pages.
- Featured Image - The featured image usually appears at the top of the post and is also used as the post-preview picture. To add a featured image to your post you can either drag and drop an image onto the Featured Image box, or click on the Choose File button to open a file explorer window to select a photo from your computer.
- Alternative Text - This option is only available if you have a featured image set. Here, you can add text that will be displayed if the image cannot load, or read by a screen-reader used by visually-impaired users to describe the photo.
- Caption - Another featured-image-only option, text added here will be added as a caption under the photo.
- Credits - Name or other text added here will appear as a credit, letting people know who took the picture or owns the copyright if it is not your own.
- Tags - This field sets which tags (categories) the post should be attached to, so users will see it when browsing posts by tags.
- Post Slug - The post slug is a URL-friendly version of the post title, without spaces or special characters. If left blank Publii will automatically generate this, so it can be ignored if you're not sure what to do!
- Page Title/Meta Description - These two fields provide the meta-data for the post; this data is used by search engines and may be displayed in search results, but can be ignored if preferred.
- Meta Robots Index - This option decides what permissions search engine 'robots', which log webpage data and generate search results, have. Index will allow the search engines to include your page in search results, while Follow will allow the search engine robots to follow links on the post to provide more nuanced results. If you're not familiar with this setting you can leave it at the default.
- Post Template - If available, this option will let you choose a post layout; whether additional layouts are available depends on the theme you are using.
- Display X (where X is an element from the post page) - The display options allow you to enable or disable individual post elements, such as share buttons, author bio etc...The global options are defined in the Theme Settings; options here are to override the global settings for a single post.
- Navigation Color - Defines whether navigation buttons to move between posts on the tag are dark or light colored; this should be set depending on the coloring of your hero image e.g. an image with a dark background should use light navigation colors.
Once your post is ready you have the option of either making the post available straight away, or saving it as a draft to publish on a later date. Both of these options are at the very top-right of the screen.
Editing a Post
You can make changes to a post at any time, even after publishing. You only need to click on the post you want to edit in the Posts screen and you'll be taken to the Edit Post page, where you can make and save your changes just like when creating a new post.
The Post Editor
Like almost any other CMS, Publii uses a WYSIWYG (What You See Is What You Get) editor for content creation. This editor allows users to write text, insert pictures and other elements much like you would in a standard word processor like Microsoft Word, and converts it to browser-friendly HTML for you. As such, you'll find writing content to be easy even if you've never built a website before, but there's a few additional options it's worth knowing about, which we'll look at here.
The TinyMCE Editor in Publii does not currently include a full markdown editor, but it does have support for the most common shortcuts, which will help you create your post content faster. The available shortcuts are:
- ## - Two hashes before a sentence sets the text as an H2, or Heading 2, HTML element.
- ### - Three hashes before a sentence creates an H3, or Heading 3, HTML element.
- #### - Four hashes create an H4, or Heading 4, element.
- ##### - Five hashes create an H5, or Heading 5, element.
- ###### - Six hashes create an H6, or Heading 6, element.
- 1. - The number '1' and a full-stop followed by a space creates an OL, or Ordered List, HTML element.
- - , * - A star or hyphen (otherwise known as a dash) followed by a space creates a UL, or Unordered List, HTML element.
- *text* - Inserting stars before and after a block of text will turn that text italic.
- **text** - Inserting two starts before and after a block of text will turn that text bold.
Inserting Headings with Markdown
The heading elements in HTML (H1-H6) are used to create titles for your content. Each heading 'level' is used to show where a particular title is in the post hierarchy; for example, the main title of a page or article will use the H1 heading, while each subsection of the article will use an H2 heading. If each section has its own subsections, then they will usually use the next heading down; a subsection under a H2 heading will use a H3 heading, and so one. This creates a structure to your content that is easily understandable to both people and computers! In Publii, the main H1 title is created by the 'Title' field in the post editor, and the other headings may be added manually as you create your content. With markdown shortcuts, this can be done very quickly and easily.
To insert a heading using markdown, you add hashes (#) corresponding to the heading you want to insert before your title. So, to insert a Heading 2 element (H2), you would write:
##My heading 2 title
...then hit enter. The Post Editor will automatically convert this to a Heading 2 element in HTML. If you want to insert a Heading 3 (H3) element, just add three hashes before the title, and so on.
Inserting Lists with Markdown
There are two types of lists that are common in HTML, and in writing in general; ordered lists, or lists with numbered items, and unordered lists, which use bulletpoints instead of numbers for each item. Inserting them using markdown is extremely fast and easy. For an unordered list, type a star (*) or a hyphen/dash (-) followed by a space before the first item's text in a list. When you hit enter, the text will automatically change to a bulletpoint item. For example, typing:
* The first item in my unordered list.
...and hitting the enter key will add a bulletpoint before the text, and automatically create a second bulletpoint for your new line of text, so you can add the next item. Simply add your next item, then hit enter again to create a third item etc...Once you've added all the items you want, pressing enter on a blank item will end the list.
Inserting ordered lists works in exactly the same way, but instead of using a star or hyphen, you can just start to write the list using "1. ". The item will automatically be formatted into a list. Once you've added enough items, just hit enter on a blank item to end the list.
Adding Bold or Italic Text with Markdown
Markdown can automatically change your text to be bold or italic by wrapping the text in the appropriate symbol, in this case a star (*) for italics, and two stars (**) for bold. To make a sentence bold, you should add two stars before and after the text. For italic, add one star before and after the text:
**This text will be bold**.
*This text will be italic*.
This text will be unchanged.
The Post Editor will change the text as soon as you press space after adding the last star, so you'll know immediately that is has worked.
For ease of formatting your text content, the Post Editor includes an inline text editor; highlight any piece of text in the editor and a small version of the main toolbar containing the more commonly-used options such as bolding or underlining text and inserting links will appear. Within this toolbar you may also switch the tags around the text to headers, code or blockquotes, or switch to theme-specific formatting such as highlights or information blocks.
Advanced Link Insert
The inline editor provides a more robust link inserter tool which includes additional options to fine-tune link behavior. Access it by highlighting the text you want to change to a link in the post editor, then clicking the chain icon in the inline editor toolbar that appears above the text. A popup will appear with the following options:
- Select link type - Set whether you want to link to a post, tag or author page, the frontpage of your site, or an external URL in this drop-down list.
- Post, Tag or Author name - This option is only available when the Post, Tag or Author page is selected in the previous section. All available items on your Publii site will be shown when clicking the drop-down list, but you can use the search box at the top of the list to filter items if you have a lot of content on your site.
- External link - Sets the link URL. Only appears when the External link link type is selected.
- Link target - Sets whether the link redirects the user's current browser window (The Same window option), or opens in a new tab (The New window option).
- Link label - Sets the text that should be displayed as a link in the content; if you highlighted text beforehand this will be automatically added to this field.
- Link Anchor - Sets the target to an anchor that is on the same page as the link, allowing users to jump to a specific section quickly. The drop-down list will display any anchors that have been added to the page for selection.
- Link title attribute - Sets the HTML title attribute for the link element. Text entered here will appear as a tooltip when the user hovers over the link on the published website.
Anchors provide an easy way for users to jump between different sections of a page. Imagine if you've written an extensive guide to something in a single article; by using anchors, rather than the user needing to scroll down the page manually to the section they need, they can click a link and their browser will quickly jump to the appropriate section. The TinyMCE editor in Publii includes an option for quickly inserting anchors into your content.
To use anchors on a page, you will need to add to things; the anchor, which is where you want readers to be able to jump to, and a link to the anchor that the user can click to make the jump.
- First, we need to create an anchor point; the place where users will jump too if they click the link. On the page, click on the part of the text where you want to insert the anchor (it must be before, after or within the text; clicking on an area that does not have any content will not insert the anchor), then click the Anchor icon in the editor toolbar; it's the icon that looks like a tag or label to the right of the Remove link broken-chain icon.
- This will open a pop-up box with a single field, Id. Here, you can enter a name for the anchor. This label won't be displayed in the content, but it's still a good idea to keep the Id logical e.g. if you're linking to a chapter in the story, then use "chapterX" where 'X' is the chapter number. Once you've entered an Id, click the Ok button.
- The anchor is now added, so now we need to create a link for a user to click on to jump to the defined section. Click on the area of the content where you want to insert this link, such as at the top of the page, then click the Insert Link icon in the toolbar (the icon that looks like a chain) to open the Insert Link pop-up.
- There are a few options here, but you only need one of them; the Anchor option. Click on the drop-down list to see all the anchors that have been added to the current post; click on the one you want to use and the rest of the options will automatically fill out. By default the link will display the name of the anchor, but you can change this in the Text to display field i.e. if your anchor is 'chapter2' but you want it to appear normally in the link, you can change the Text to display field to 'Chapter 2'.
- Once the changes are made, click the Ok button to create the link.
Publii includes an autosave feature to protect your post from any unexpected closure such as power loss, or from a simple change of mind after closing a post. The autosave occurs every 10 seconds when editing a new post; if you then close the post screen, whether intentionally or due to an external factor, a draft of the autosaved post will be saved and held for 30 minutes, allowing you to restore any lost changes. To restore a draft, after reopening the edit post screen, click on the Restore Last Draft button that appears on the right of the editor toolbar; it has an icon that looks like a rewinding clock. Once done, the drafted text will instantly appear in the editor, ready to edit.
There are two ways to add images to your posts. The first, and easiest, is to simply drag and drop the image you wish to use onto the editor area; the image will be automatically uploaded and inserted to the currently-selected cursor position. However, this method only inserts the image with default settings. If you would like more fine-tune control over the images appearance, you should instead use the Insert/Edit Image button, which is at the top-right of the editor's toolbar.
Clicking it will open the Insert/Edit Image boxout, where you will see a set of five options which will allow you to make changes to the image's appearance. These options are:
- Source - Displays the path to the image that will be inserted into the post. Click on the icon to the right of the field to open the file browser, then select the image you wish to insert from your computer. Alternatively, if the image you wish to use is located online, then you can enter the URL to the image in this field; remember to ensure you have the necessary permission to post an image if you do not own the rights to it!
- Image Description - Add a description to the image; this will be displayed should the image fail to load, or read by a screen reader to provide information on the picture for the visually-impaired.
- Dimensions - Sets the width and height of the picture in pixels; when an image is selected the actual dimensions will be automatically populated in these fields, though you can change them to resize the image if needed.
- Constrain Proportions - When this option is enabled the aspect ratio of the chosen image will be preserved when resizing, ensuring that the image doesn't appear too stretched. Once enabled, entering a width into the Dimensions field will automatically populate the height field with the appropriate size.
- Class - This option allows you to modify the appearance of the image in the post. Choose from Full Image, which sizes the image to fit the entire text column, Wide Image, which stretches the image to the edges of the page, or a Left, Right or Center-Aligned Image, which places a smaller version of the image to the left, right or center of the screen to mimic a newspaper layout.
- Caption - When this option is enabled a caption box will be added underneath the inserted image in the editor, where you can enter caption text for the picture.
Note: If you are encountering issues when uploading, modifying or generating images, try switching from the default Sharp image engine to the included JIMP engine, which may be more stable for you. You may change which engine is used for modifying images in the Global Settings section.
Galleries in Publii are powered by Photoswipe, a lightweight solution that creates touch-friendly image galleries with minimal effort.
Creating a Gallery
- To add a gallery to a post, click on the icon that displays multiple images (to the right of the standard Insert Image icon). A section representing the gallery will be added to the post body defined by an outline, with an Add images to gallery button in the center.
- Click on the Add images button to open an Edit gallery popup; if this is a new gallery a file explorer window will also open, where you can select any images to add to your gallery.
- Double-click on an image to add it to your gallery; once it is added, you may add alt text and an image caption to it via the fields provided.
- To add more photos, click on the Add images button at the bottom-right of the edit window.
- Once all your images have been added, select the number of columns for the gallery using the drop-down box at the bottom-left of the edit window, then click the Ok button to save changes.
Editing a Gallery
To edit a gallery, open the post containing the gallery you wish to edit, then click on it in the WYSIWYG editor; this will re-open the Edit gallery pop-up so you can add or remove photos, edit the alt text or captions, and change the number of columns.
Customizing Your Gallery
You can customize the style of your galleries to help them fit with your site aesthetic, and set which controls users will be able to access. Each of these options is applied globally to all galleries on your site, and may be found by clicking the Theme option in the left-sidebar, then clicking the Gallery tab in the Custom Settings section of the Theme Settings page. The available options are:
- Item spacing - Sets the amount of white space between each gallery image, which is defaulted to 0.5 REM; REM values are recommended to maintain relative spacing on different screen sizes (basically, the size of the space between the different photos stays relatively the same on all screen sizes, so no massive gaps on small screens), but others such as px and vw may be used.
- Lightbox style - Define whether the lightbox (the background shown around a photo when you click on it in the gallery) is light or dark colored, to fit your site aesthetic.
- Lightbox overlay transparency - Sets the transparency of the lightbox when viewing a single photo; a setting of 0 will be fully-transparent, while a 1 will be totally opaque.
- Advanced lightbox settings - When enabled, additional options for controlling your lightbox will be shown.
If advanced lightbox settings are enabled, the following additional options will be available that provide further controls in the lightbox in addition to the standard touch controls:
- Current slide/total number - If enabled, the total number of images in the gallery as well as the number of the currently-viewed photo will be displayed in the lightbox.
- Zoom in/out button - Controls whether a separate button for zooming in and out is added to the lightbox; users can also zoom in or out by clicking or tapping the image.
- Toggle fullscreen button - Adds a button to make an image full-screen for more detailed viewing.
- Share button - Enables a share button so that users can share your photos via social media.
- Close button - Displays a button to close the lightbox when viewing a single photo.
- Next/Previous arrows - Enables buttons for scrolling between photos in a gallery.
- Preloader - Enables a preloader animation that will kick in whenever images take longer than 1s to load.
- Close gallery on page scroll - If enabled, the gallery lightbox will be closed when the user scrolls down the page (note that this option only applies to devices that do not support touch, such as desktops).
- Keyboard navigation - Allows desktop or laptop users to use their keyboard to navigate between images in the gallery.
Editing an Existing Image
If you've previously inserted an image to your post and wish to modify some of its settings, you may do so by first clicking on the image you wish to modify in the editor, then clicking the Insert/Edit Image button. This will reopen the pop-up boxout containing the image options, which you can then modify accordingly.
Online video provided via Youtube, Dailymotion and the like is a popular way to provide and consume content, so Publii includes support for embedding these videos to your posts. To insert a video, just like when inserting an image, place your cursor in the editor where you want the video to be inserted, then click on the Insert/Edit Video option at the top-right of the editor toolbar; this will open the pop-up boxout with the video-specific options, which are:
- Source - The source URL of the video you wish to embed; simply copy the full URL (for example, http://www.youtube.com/watch?v=11a11a11a11) and add it into this field; the embed code needed will be automatically generated. Alternatively, you can copy the provided embed code directly from the video's page and insert the full code into the Embed tab, available by clicking the Embed text at the top of the boxout.
- Alternative Source - If you have an alternative location that Publii may use should the first source not work, enter it here.
- Poster - Set the thumbnail for the video as it will be displayed on the blog.
- Dimensions - Set the width and height of the video as you want it to appear in the post, in pixels.
- Constrain Proportions - As when inserting images, enabling this option will ensure that the aspect ratio of the video is preserved when resized; once enabled, entering a width into the Dimensions field will automatically populate the height in order to match the original aspect ratio.
Editing a Video's Settings
If you've already inserted a video and wish to change the settings later, click on the video in the editor, then click on the Add/Edit Video button to open the boxout containing the specific settings for the selected video, where you will be able to make your required changes.
Source Code Editor
If you're comfortable with using HTML, or you'd like to do some more advanced edits such as adding CSS classes to your post content, you can do so by switching to the Source Code Editor. Click on the HTML tag symbol in the editor toolbar to switch to the source code. The functions of the TinyMCE editor are not available when working with source code, but you can search for specific content using the search bar, accessible by clicking CTRL + F.
Deleting a Post
Deleting a post is quite a bit easier than writing one! On the Posts screen you'll see a list of your created posts; just add a check to the left of the post you want to delete, and click the red Move To Trash button that appears; this will move the post to the Trash section where it may be deleted permanently later, or restored.
Restoring/Permanently Deleting a Post
When a post is first deleted it is not totally removed from the Publii app; instead, it is moved to separate Trash category from where it may be permanently deleted or restored if you change your mind. To view deleted posts, click on the Trashed filter listed at the top of the Posts screen, under the search bar:
This will display a list of deleted posts. To select a post, click on the checkbox to the left of the name; you will now see two new options at the top of the post list to permanently Delete the post, or Restore it to its original category. Click your chosen button and the post will be moved accordingly. Bear in mind that once a post is deleted from the trash section it will no longer be available or restorable.
Duplicating a Post
If you wish to duplicate a post to reuse its layout, settings etc...then you can easily do so. When on the Posts screen, in the list of posts find the one(s) that you wish to duplicate and click the box to the left of its name to add a checkmark to it; a new set of options will appear at the top of the list, including a Duplicate button; click on this to automatically create a duplicate post named postName Copy.