Drupal 8 installation and configuration:
an example site

Editor Configuration

To insert contents, a simple visual editor is included: ckeditor; in the configuration page there is a menu entry to configure the editor.
A main concern, when designing a blog system, is to avoid that visitors, allowed to insert comments, embed in their text something that can harm the site: malicious javascripts, hacks for cross-site scripting or simply wrong HTML tags. To avoid all kind of nasty things you need an editor that force severe limits on allowed text; for this reason Drupal has four pre-defined editor modes: a "Full HTML" configuration, "Basic HTML", which allows for few HTML tag, a "restricted HTML", and a "Plain text" mode. The different modes can be assigned to user roles, to define what each one is allowed to do; more editor modes can also be defined.

In the site we are configuring, only known users insert text: so we give unrestricted access to all the editor configurations. We prefer "Full HTML", and we put this mode first; modes can be ordered by mouse, by dragging the cross icons at right of mode names.

Drupal editor configuration

Each editor mode can be configured by defining a set of filters which will be applied to the text for cleaning purpose. Also the order in which the filters are applied can be changed: filters can be used to change line break to paragraph (<p> tags), to correct wrong HTML, convert ULR into HTML links, limit allowed HTML tags, align images etc.

Drupal editor filters

You can also select the visible buttons in the editor window, all with an easy interface; in the following figure we have added a group of buttons with alignment options; we can also forbid or allow image loading, for each editor mode, and the size of uploaded images can be limited.

Drupal editor filters

The front page

As an example of editor usage, we now prepare the "front page" (or "home page") for our site: this is the first page that our visitors see.
By clicking the "Content" button of the horizontal bar menu, we reach the "Content" page. Our list of contents is empty: we click on the "Add content" button to insert a new content.

Drupal contents
We choose "basic page", we are not writing an article with a main picture and comments.
Drupal contents
In the following image we see how the editor is structured; we have to insert a title, then there is the "Body" field: a main space for our text with some buttons at top. We can also insert a short summary for our content, by clicking on: "Edit summary".

The meaning of most button in the "Body" space is clear: they are for bold or italic text, to insert subscript or special character, links, lists etc. If you move the mouse on the buttons a tooltip text appears explaining the button usage. Depending on our configuration, automatic filters helps with spacing and paragraphs, changing line breaks into HTML paragraphs.
The "Source" button show us the HTML of our page and in "source mode" we can insert HTML tags, also with style specifications.

At right there is a sidebar, with options to insert our page in menus, information on the author, and the section: "promotion options", to put the page at the top of lists or in the main site page.

The "URL alias", in the right sidebar, is an important field: in the database each page is identified by a number, as a consequence pages have URLs (internet addresses) like: "http://localhost/node/1/"; this is difficult to remember and not optimal for search engines, as Google.
For this reason you need to give to each page a meaningful, short name, and to plan carefully all the naming scheme of your site from the beginning. Here we write "/home" for our first page, and the page can be reached at the URL: "http://localhost/home".

At bottom a "published" checkbox, to decide if the page is ready to be seen by visitors.

Drupal contents

To insert pictures in the "Body", we have to click on the apposite button (the button with little mountains): a mask is shown in which we can choose and upload an image file. Images can moved and resized by mouse: in the image region there is an handle at bottom right to resize and an handler at top left to move.

Drupal contents

For media management there are also many options to set: in the "Media" section of the configuration page we have the "File system" options, to decide the path of uploaded images and files, and many additional options for images, which can have a "style", with filters and special effects, can be resized depending on the theme specifications ("responsive images") or managed by special tools.

Drupal media options