Build it with Drupal 8

Comprehensive guide for building common websites in

Drupal 8. No programming knowledge required!

Antonio Torres
This book is for sale at http://leanpub.com/drupal-8-book

This version was published on 2015-01-07

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.

©2013 - 2015 Antonio Torres

Tweet This Book!
Please help Antonio Torres by spreading the word about this book on Twitter!
The suggested hashtag for this book is #drupal8book.
Find out what other people are saying about the book by clicking on this link to search for this
hashtag on Twitter:
https://twitter.com/search?q=#drupal8book
Contents

Installing Drupal 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Minimum Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Downloading Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Setting up a Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Creating a settings.php file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Running The Installation Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Understanding Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Content Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Taxonomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Regions & Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Creating a Business Brochure site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
What you need for this project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Creating a products page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
New Content Type: Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Creating the Product Content Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Adding fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Adding our first product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Jumping into Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Creating a Blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Adding a Comments Field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Applying Restrictions to the Comment Field . . . . . . . . . . . . . . . . . . . . . . . . . 19
Bringing it all together with Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
CONTENTS

Creating a Portfolio Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Creating an Image Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Creating the Portfolio Content Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Adding Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Creating our View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Installing Drupal 8
Before we start can start working, we need a working Drupal 8 instance. You may skip this if you’re
already familiar with the process of setting up a Drupal site. You can use a local installation using
MAMP (Mac OS X) or XAMPP (Windows). You can get hosting for a few dollars a month if you
prefer. For additional information on this visit the Installation Guide on Drupal.org¹.

Minimum Requirements
The very first thing you need to get Drupal 8 running is the right environment. This includes the
software that Drupal needs in order to operate correctly. Drupal 8 has different requirements from
6 and 7, so it is important to be familiar with them in order to minimize problems.
The minimum requirements for Drupal 8 are:

• Web Server Running Apache, Nginx, or Microsoft IIS

• PHP 5.3.10 or higher
• MySQL 5.0.15 or higher with PDO, PostgreSQL 8.3 or higher with PDO, SQLite 3.3.7 or higher

Downloading Drupal
To download Drupal go to the Drupal project page² and download the latest stable version of Drupal
8. You can use your favorite download utility for that. If you are logged in to your server you can use
wget or curl, and extract the file onto your website’s folder, which is generally /var/www on most
Apache servers, for example. You can also download through the browser, then upload it to your
server using an FTP/SFTP program of your choosing.

Setting up a Database
Before installing, you must create a database and a database user, then assign the database user
rights to use the database). Note: Drupal 8 is able to create a database itself if the user has enough
privileges, so you may skip creating the database if this is the case.
¹https://drupal.org/documentation/install
²https://drupal.org/project/drupal
Installing Drupal 8 2

If you’re using shared hosting, most providers will provide you with a browser based option
usually called phpMyAdmin. If you go into the Control Panel of your hosting account and access
phpMyAdmin, you’ll be able to create a database and add a user to it which you can use.
If you’re using something like MAMP, the software GUI usually has a button that will launch
phpMyAdmin for you, which then allows you to create the database and user.
The more advanced way of doing this is if you have root access to a server and you need to do it
from the command line. Here’s what the Drupal.org Install Page³ instructs us to do:
For information on installing and configuring MySQL see http://dev.mysql.com/doc/refman/5.7/en/index.html
In the following examples, ‘username’ is an example MySQL user who will have the CREATE and
GRANT privileges and ‘databasename’ is the name of the new database Use the appropriate names
for your system.
Create a new database for your site (change the username and databasename):
mysql -u username -p -e "CREATE DATABASE databasename CHARACTER SET utf8 COLLATE
utf8_general_ci;"
MySQL prompts for the ‘username’ database password, and creates the initial database files.
Log in and set the access database rights:
mysql -u username -p
MySQL prompts for the ‘username’ database password.
At the MySQL prompt, set the permissions using the following command:
GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER, CREATE TEMPORARY
TABLES ON databasename.* TO 'username'@'localhost' IDENTIFIED BY 'password';
In this case:
‘databasename’ is the name of your database
‘username’ is the username of your MySQL user account
‘localhost’ is the host where Drupal is installed
‘password’ is the password required for that username
Be sure to use backticks ( ‘ ) around the database name if you used a MySQL escape character (_ or
%) in your database name.
For example, because the underscore character is a wildcard, drupal_test_account.* should be
drupal\_test\_account.* for security. Otherwise the underscores would match any character and
could accidentally give access to other similarly named databases.
Note: Unless the database user/host combination for your Drupal installation has all of the privileges
listed above (except possibly CREATE TEMPORARY TABLES, which is currently only used by
Drupal core automated tests and some contributed modules), you will not be able to install or run
Drupal.
³https://www.drupal.org/documentation/install/create-database#mysql_commands
Installing Drupal 8 3

For further information on the GRANT statement see http://dev.mysql.com/doc/refman/5.0/en/grant.html

If successful, MySQL will reply with:
Query OK, 0 rows affected

Now exit the MYSQL prompt by typing:

exit
The server will answer by saying
Bye

And you’re done, you can use your credentials on the installation page.

Creating a settings.php file

In your Drupal 8 files, browse to sites/default/files and copy default.settings.php and
rename it to settings.php, copy default.services.yaml and rename it to services.yam, then create
a files directory and give both files and the directory full read, write, and execute permissions as
follows:
chmod 777 settings.php
chmod 777 files/

If you’re using an FTP program, the way to do this might be differ, you might have to right click
and find a way to modify a file’s attributes.

Running The Installation Script

Visit the url for your Drupal 8 instance on your browser, you will be taken through the installation
process where you will enter your database information and respective site information. After this
is complete, your Drupal 8 website will be ready for use.
Once you’re done, set the permissions of settings.php and service.yaml to 644 as Drupal is done
making modifications to them, so we should lock those files down.
Understanding Drupal
Using Drupal is a lot like playing with Legos, it is simple enough to use without having any
programming knowledge, yet powerful enough to compete with most frameworks out there. The
building blocks that comprise Drupal have all been made, and tested extensively, all that is left to
do is to have an idea, and put it together. I’m personally very fond of this, as I don’t particularly like
to reinvent the wheel very often, only sometimes.
Drupal operates with the understanding that most websites share many fundamental similarities. If
you have a website with Static Pages, Blog Posts, Event Listings, and so on, they are permutations
of the same fundamental concept, like an “entry” of sorts, which in Drupal is called a Node. This
way it is up to you to decide how each Node Type gets entered, displayed, and processed by your
users on the site.

Content Types
Imagine you have a paper notebook in front of you, and you’re writing down journal entries, every
day you enter similar information, let’s say you add a date, a title, and the entry itself. Every day
you would repeat this process in the blank sheet of paper. With that same notebook you can enter
a list of friends that show up to play cards once a week, then record the winners and the losers.
A Content Type is in some ways analogous to this sheet of paper where you use them for a given
purpose. A Content type let’s collect any information you want, let’s say you want have a classified
ad content type, you would collect a name, some information, some pictures, perhaps even a price,
a location, and a phone number. It only differs from other Content Types in it’s purpose.
A Content Type is referred to is a method in which you can enter many different types of information
into the database and interact with it in many different ways, to serve many different needs. For
example, you can take your classified content type, and then you can display this content to your
users by location, or by category, in a list, a table, or even Email it to them, it’s that simple! This will
become more clear as we move forward, just hang tight.

Views
A View is a listing of Content. For Example, if you have a Blog Content Type, you can create a View
which displays the last 10 most recent Blogs. You can display it in a Table, a List, etc. All without
writing any code. All you have to do is add a new View and walk through the configuration process.
This helps your website be very dynamic, as you add new content, the features built with views will
display the content in the way in which you configured. Perhaps the newest blog entries, organized
by date, or maybe the one with the most comments, and so on.
Understanding Drupal 5

Users
Drupal comes with user functionality bundled in, allowing you to manage users. This means that
if you want to turn your small blog into a large operation, you can create many users and grant
different levels of access to your writers, turning a small blog into a professional publishing platform
in a few minutes.

Themes
A theme consists of a few files containing PHP, HTML, and CSS to render your site’s overall look.
You may find predesigned themes available at https://drupal.org/project/project_theme

Modules
A bundle of software that extends Drupal functionality. Modules that are contained within a fresh
installation of Drupal are known as ‘Core Modules’ and modules that are developed by a team or
an individual that is released on drupal.org are known as ‘Contributed Modules’.
Let’s say you want to display your Classifieds in a Map, or your events in a Calendar. There are
Contributed Modules on Drupal.org that make this much easier for you.

Taxonomy
You may want to categorize your content, whatever the category may be, the Taxonomy module can
help you there. Let’s say you want to add a category to your Classifieds content, you can add a list
of categories (e.g. Auto, Jobs, etc). And if you need to, you can add as many levels of subcategories
as you want to (e.g. Auto > Honda, Ford, Toyota, etc). Then Honda can be broken down into Models.
This is very helpful when you want to allow a user to browse your content, allowing them to filter
and search as they please.
Drupal contains a module known as ‘Taxonomy’ which gives you the power of defining your own
vocabularies. Each vocabulary can contain ‘Terms’ which in then can be grouped and attributed
to a content type, or multiple content types. And a Content Type can have as many vocabularies
attached to it as you need (e.g. Category, State, Status, etc).

Regions & Blocks

Your Drupal site is laid out in what is known as ‘Regions’. This includes your header, main content
area, footer and sidebars (Some themes may vary.) Blocks are “boxes” containing data either created
Understanding Drupal 6

by a module (e.g. ‘Recent Comments’ from the ‘Comment’ module.) or created by you (e.g. A block
of static text welcoming a user). A block may be displayed anywhere that the site’s layout allows.
You can access the blocks area by navigating through Administration » Structure » Block Layout,
there you can browse the modules you already have as well as create new ones.

Paths
The part of a URL after your initial site address is known as a path. (e.g. http://yourwebsite.com/contact-
us) Paths may be defined by the user at the bottom of a content’s edit page under ‘URL Path Settings.’

Menus
A Menu is a collection of links to other parts of your website, as well as other websites. By default
Drupal comes equipped with a few pre-made menus, ‘Administration’, ‘Footer’, ‘Main navigation’,
‘Tools’, and ‘User account menu’. Custom menu’s may also be created by clicking the ‘+ Add Menu’
button at the top, from here you’ll be able to supply the title of the menu item as well as the ‘Path’ it
should be taken to upon click. You can access the menu area by navigating through Administration
» Structure » Menus.

Going Forward
These concepts are extremely simplified and are only here to familiarize you with the most
important aspects of Drupal that we will cover in this book. As we walk through the steps of creating
a site, you’ll quickly start connecting these ideas together.
Creating a Business Brochure site.
The brochure site is easily the most common type of website built, it is a collection of informational
pages that usually have information about a business or a person’s services, as well as a contact page
at the end with a form and some information.
Once Drupal 8 is set up, we’ll be able to get started right away. The first thing we want to do is to
navigate to our fresh installation of Drupal 8.

Overview
We’re going to create an imaginary business owned by Amy, which we will use throughout the
remainder of this book to build the projects, in this case we’re going to build Amy’s Cake Store’s
brochure website. The goal of this website is to show people more information about the business,
then hopefully get them to call or e-mail Amy to request information about her product.
Since this is the first tutorial, we’ll make it the easiest. We’re going to make a few pages, create a
contact form and make sure that everything looks good. For resources and help on how to change
the look of your site, see the Resources chapter.

What you need for this project

• Fresh Drupal 8 Install
• Captcha Module⁴

Getting Started
The first thing we want to do is set up the front page to our new website. Let’s create this page by
clicking on Content on the Toolbar above your site, then clicking Add Content. The type of content
we can to create is “Basic Page”.
Before we continue, let’s familiarize ourselves with the content addition page. Let’s have a look:
⁴https://drupal.org/captcha
Creating a Business Brochure site. 8

Page node creation form

The page we’ll be creating is pretty straight forward page, You give it a title, put your content in,
give it a URL, put it on a menu, then save, voila!. Let’s dig a little deeper.
Let’s call this page “Welcome”, type that into the Title field. In this page we’re going to include
information that introduces our visitors to our business in the Body field. Generally, this is overview
level information with what is referred to as a call to action. In our case we’re going to add “Order
online and save 10%”.
Next, we’ll click on URL Path Settings, here can set the URL for this specific page, we’ll do home
one this one. This means that we’ll be able to access this page at example.com/home.
Go ahead and save your work. In the end it should look something like this.
Creating a Business Brochure site. 9

Our newly created page

Our new homepage is set up, but it isn’t set to be the front page of our site, so when somebody
browses to our website directly (amyscakestore.com, for example) they will not see what we just
created first, we’re going to fix that. On the admin menu up top, on the very top left, there’s a
manage button, click it and then you’ll see a configure button like this:

Configure button

On the right you will see this link, click into it.
Creating a Business Brochure site. 10

Site Information

In this page, we’re going to switch the front page url to our newly created home URL, as such:

In the future, if you ever want to set your front page to another page, if you have a promotion for
example, you can come back to this page and set it to that, Drupal will seamlessly point any visitors
that go to your page to it, once the promotion is done, you can set it back to your other page, it’s
really quite convenient.
Bearing in mind that we’re just using the theme that Drupal 8 comes with by default, and that
we’re not focusing so much on graphic design, it’s worth noting that there are plenty of resources
and people willing to help you with the design aspects of your site, be it creating banners, a whole
theme, and so on. Our goal in this book is to help you navigate many of the content creations that
Drupal 8 offers, to give you an idea of the power that it comes with out of the box, and to point you
in the right direction for you to create a website that will promote your idea successfully, now onto
the next section.
Creating a Business Brochure site. 11

Creating a products page

Let’s create a products page, here we will display our best cakes to give our visitors an idea of what
they can order. For this section we’re going to venture into creating a new content type, and setting
up a view, it’s going to be fun, so let’s get started!

New Content Type: Product

Right now we only have the Basic Page and the Article content types, our new Product type doesn’t
exist and we’re going to create it. The reason we create a new content type is because it needs to
have some extra information, in this case we will refer to them as fields. A Field in drupal is a small
piece of content that can be collected and be added to your content, some examples are addresses,
names, images, dates, etc. In our Product node we’re going to add an image so we can display a nice
picture of a cake for each item. Other tentative fields are price, ingredients, ordering information,
and so on.

Creating the Product Content Type

On the admin tool bar, head over to Manage and click on Structure, on the following page we will
select Content Types.

Content Type Management Page

We’re going to select Add Content Type, this will bring us to the Content Type creation Page. There’s
a few things to familiarize ourselves with. The first field is the Name fields, we’re going to enter
Product into that field, you can enter a description under it giving a little information about the
type of product we’re entering here, in this case it’s pretty self explanatory here, but with enough
content types and people working together, it can be very helpful.
There’s a few tabs under the previous section, the first one being Submission form settings, here
we’re going to change the Title field label to Product Name, the rest we can skip and go down to
Creating a Business Brochure site. 12

Display Settings and uncheck Display author and date information, this is important for a blog
post, but not on this one. Next up we have Menu Information, we want to uncheck all available
menus, as this will only show up on our Products view, and not on any menus.
Go ahead and save your work.

Adding fields
After you’ve saved your work, you’re gonna land on the Manage Fields page, this is where we’re
gonna be able to add all that extra information for the product, and honestly where Drupal starts to
shine as a content publishing platform. In this situation, we’re only going to add an Image upload
field so we can show people what our company has to offer.
To save us some time, I’ll show you how the form is supposed to look when you add the field.

Make sure you set the field type to image

Go ahead and click Save. We’re going to also click save on the next page and leave it as is, which
means we’ll want to upload just one image per product.
On the next page, we want to make the field required, that way we can ensure that even if we
delegate the task of adding the products to someone else, that the content will be consistent and
complete. The rest of the options are pretty self-explanatory, but we don’t need to worry about
them right now, go ahead and click save.

Adding our first product

Our content type is ready, let’s go ahead and create our first one. The process is identical to creating
a page, so head over to Shortcuts on the admin menu > Add Content > Product. Voila! Just like
Creating a Business Brochure site. 13

when we created our page, we’re going to create a Product. I added some dummy text, a picture of
a beautiful cake and saved the page. Your page should look something like this as well.

Our first Product page

It’s not the most charming in the layout in the world right now, but not to worry, Drupal offers a
handful of really easy and powerful ways to change this, and we’ll visit some of them throughout
this book, right now we want to focus on creating a view to display our product.

Jumping into Views

Views is possibly the most versatile and useful aspect of Drupal. You can create just about any listing
of your content you can think of. If you want to make a blog, you can easily create it with views by
displaying your Blog content and sorting it by creation date, you can also make a block displaying
the 5 most recent blog posts throughout your site. In our scenario, we’re going to create a listing of
our cake products, sorted alphabetically.
To get started, go to the admin menu and click on Manage > Structure, and on the following page,
click Views. On this page, you can probably get a better idea of the type of things you can display
with views by looking at some the ones that Drupal 8 comes with by default. We’re going to create
a new one by clicking Add new view, let’s analyze this page a little bit.
Creating a Business Brochure site. 14

Our products view

First we have Views basic information, this information is solely administrative, which means this
name will be displayed in the list of views we saw previously. It’s good to keep our names explicit
and easy to identify for future reference.
Next up, we have View settings. This page gives is a pretty good head start, as we can specify the
type of content we want to display, and how we want to sort it. We want to show product content
here.
Page settings allows us to specify the address of the page, how many items we want to display, and
how we want to display them when the page is loaded. Feel free to follow along with what I’ve
specified in the image above.
Let’s go ahead and save and edit this view.
Creating a Blog
Now that you know how to create a new content type, let’s go ahead and start a blog, and for that
we need blog posts. As a first step, a new content type has to be created. The steps to create a new
content type and fields are discussed in the previous chapter. You can name the content type Blog
Post and add a field called Tags. The tags are usually keywords which are usually associated with a
web link which leads to an index page which lists all the blogs associated with the tags.
On the admin toolbar at the top, go to Manage and select Content. Then on the following page, select
Add Content.

add content

This brings us to the Add Content page, which enables us to add a variety of content such as an
article, blog, or a basic page with some static content.
Creating a Blog 16

In order to create a blog post, select the Blog Post option. This takes us to the Create Blog Post page.

create blog post

This is a pretty straight forward page, where you are going to provide a title for your blog, write the
content of the blog and then publish it.
So let us call this blog post “My first blog”. Enter the name of the blog in the Title field and the
content of the blog goes into the Body field. Now your blog is ready and is just a click away from
being published. All you have to do is click the Save and Publish button, and your blog should appear
in the homepage like this.
Creating a Blog 17

blog homepage

Now a blog wouldn’t be complete without a comments section, everybody likes to be able to
contribute to the discussion, thankfully that is very easy to do with Drupal.

Adding a Comments Field

Go over to Manage and select Structure. From this page, select Content Types and this should display
the page with the list of available content types.

add content type

Since we are going to add a comment field to the Blog Post content type, you can click the
corresponding Manage fields dropdown list and select the Edit option.
Creating a Blog 18

manage fields

The Edit option allows you to add additional fields or make any modifications to the existing ones.
So to add the additional “Comment” field we are going to edit the content type and it should look
something like this.

blog post content type

Go to the Manage fields tab and this is where all the existing fields available in the content type are
listed.
Creating a Blog 19

Manage Fields Content Type

Now enter the name of the field that we are going to add, which is Comment in the Add new field
and select a corresponding field type, which typically should be Comments. Once done, you can
save the changes. This takes you to the Comment field settings page.

Comment Field Settings

Applying Restrictions to the Comment Field

Now that the comment field is added to your blog post, but you want to apply certain restrictions
on the way the comments are being posted. These settings can be made by going to the Edit tab and
the page should look similar to this.
Creating a Blog 20

Blog Restrictions

Here you can restrict the way the comments are displayed on the page. You can prevent the users
from commenting on the blog or you can hide the comment altogether. You can also set the limit
for the number of comments to be displayed per page, and also alter the way the comments are
displayed, such as displaying replies, and threading options. Once the required settings are made,
you can save the settings for it take effect and the page with the comment section should look like
this.
Creating a Blog 21

Blog Restrictions Homepage

Bringing it all together with Views

Hopefully you’re starting to get into the groove of things. Creating your content, setting up it’s
individual attribute, then using views to choose how you’re going to display groupings of this
content. Let’s get started.
Go over to Manage and select Structure. From this page, select Views and this should display the
page with the list of available Views.
Creating a Blog 22

view page

Now select the Add new view button and this should take you to the Add new view page, which
looks like this.
Creating a Blog 23

add view

Here you can define a new view name and also define the basic, page and block settings for the
views. Let us look each section in detail, which helps understand the hows works a bit better. Let’s
first concentrate on the View Settings section.
The View Settings section provides basic settings for the views. Here you can select the item (e.g.,
Content) that you want to display in the view from the Show dropdown list. The next is selecting
the type of content. You can select the content type (e.g., Blog Posts) from the type of dropdown list.
The next thing would be to group your contents based on keywords. These keywords can be entered
(e.g., php, mysql) in the tagged with field. Next would be to sort the content and you can do this by
selecting option (e.g., Newest first) from the Sorted by dropdown list. Now your basic settings are
done.
Next, let’s take a look at what Page settings are and why we need them. Creating a Page view lets
you create a section that can be accessed through a URL. This URL can be linked directly and the
view appears in the main content area. Now, select the Create a page checkbox. This opens up a
section like this.
Creating a Blog 24

create a page view

The first thing that you would do is to enter a name for the Path. By default, the Page title field
and the Path field are populated based on the name entered in the View name field. For example, if
we provide the view name as Blog List, then by default the Page title appears as Blog List and the
Path appears as blog-list. This is the URL that will be used to access the View. Next is defining the
pagination. You can set the number of items to be displayed in single page (e.g., 10) by entering the
value from the Items to display field.
If you want to allow users to view more than one page of items, select the Use a Pager option. If
this option is not selected, users will only be able to view the number of items that you specify in
the Items to Display field. Accessing the views from the menu is always helpful. To make the view
available from a menu, select the Create a Menu Link option. Once you select this option, you can
now choose the menu and a link text for it from the Menu and the Link text field. If you wish to
provide the view as an RSS feed, enable the Include an RSS Feed option. Once you select this option,
you are required to specify the Feed Path and, based on other options, select a Feed Row Style.
Creating a Blog 25

creating a page view

You can define the way you want the Views to be displayed. You can select any one of the options
(Grid, HTML List, or Unformatted List) and the type of information regarding the blog to be
displayed (teasers, full post, title, or full post) along with or without any links. To explain this better,
let us try and display the blogs in a Grid format with teasers. This can be done by selecting a few
options in the Page display settings section. Select Grid from the Display format dropdown list and
teasers from the of field. This represents that our blogs are going to be displayed in a Grid format
along with teasers. You can also specify if you want to display links that allows the users to comment
on the blogs and also specify the number of items that you want to display in the page. Once the
settings are defined, you can select Save and edit. This should take us to the UI page of the view
along with the preview as shown.
Creating a Blog 26

page view settings

This is the screen to finalize our display settings. Here you can modify the display settings if required.
All you have to do to modify the information is to just click on the hyperlinked content in the
required sections and make your changes. Once your changes are made, you can then select Save.
Creating a Blog 27

Your View is ready and you can view it by entering the URL (http://d8.edukay.com/blog-list) and
this is how our Grid view appears.

homepage of page view

Let us now move on the next section – Block Settings. Views help you to create listings of the data
(blogs) on your site as blocks. These blocks can be placed in your website. Let us configure the
settings for Block. Select the Create a block and it should display fields similar to this.
Creating a Blog 28

view create block

As with any other form creation, provide a name for the page block in the Block title field (e.g.,
Blocks). The next step would be to define the display format of the block. You can select one of
the available display options (Grid, HTML List, Table or Unformatted list) from the Display format
dropdown and the information that you want to display (teasers, full posts, titles, titles (linked),
fields). Let us select Grid as our display option and select teasers as our display format. Once the
display format is set, you can define the number (e.g., 5) of items to be displayed per block in the
Items per block field. If you want to allow users to view more than one page of items, select the Use
a Pager option.
On defining the settings, select the Save and edit. This takes you to the editing interface of Views.
Creating a Blog 29

view create block settings

This is the UI interface of the Views. Here you can modify the information if required. Information
related to Page view or Block view can be modified. All you have to do to modify the information is
to just click on the hyperlinked content in the required sections and make your changes. Once your
changes are made, you can then select Save. Your View is ready.
Creating a Blog 30

Let us now place the block view in the website. In order to do this, go to Structure and select Block
Layout. This takes us to the Block Layout page as shown.

block layout

From the Lists (Views) section, select the view that you want to display on the homepage. This opens
the following window as shown.
Creating a Blog 31

block settings

Now select the location (for e.g., sidebar) from the Region dropdown list and select Save block. Go
back to the homepage to see the block that you have just created.
Creating a Blog 32

block homepage
Creating a Portfolio Website
You or someone you know has had to showcase your past work at some point. A portfolio website is
created to showcase it in a clean and digestible manner, usually accompanied by contact information,
in the end the goal is to gain additional work. Let’s jump into it.

Creating an Image Style

As a first step, let us define a style for the images that we are going to use in our Portfolio. Go over
to Configuration and select Image Styles from the Media section. A page similar to this is displayed.

image style

Now select the Add Image Style button and this takes you to the page shown below, in this page you
can enter the identifying information for the style.
Creating a Portfolio Website 34

add image style

Let’s name our style portfolio_image. Once the name is specified, the machine name for this style is
automatically generated for us. Once you enter the name, select the Create new style button. This
should take you to the following page:

portfolio style

Now we have to select an effect for this style from the dropdown list in the Effect section. In this
case let us select the Scale and crop effect. This effect will take just about any image you throw at
it and resize it as best as it can, and then crop the edges off so it conforms to the dimensions we
specify, then it saves that that version of the image on the server. This helps the image look great
at it’s new size, load quickly, and saves us the computing power it takes to resize the image every
time it loads. Once selected, click the Add button. This takes you to the page which has the fields to
define the Width and the Height of the image.
Creating a Portfolio Website 35

scaling and cropping

Now enter the value for the width (e.g., 250) and the height (e.g., 300) of the image in the respective
fields. Once done, select the Add effect button and we have created our image style successfully.
This should take you to the page as shown.

scaling

Now select Update Style button. If you wish to apply a different style and want to remove this style,
you can select the Delete link. Also note that you can add more than one image style to an image.

Creating the Portfolio Content Type

Now that we have created the style that we would like to apply to our portfolio image, let’s move
on to the next step – designing a content type. Go over to Structure and select Content types.
Creating a Portfolio Website 36

portfolio content type

Now select the Add content type button as such.

add portfolio content type

Now enter the name of the content type (e.g., showcase_content) that we are creating in the Name
field. You can provide a description about the content type that you are creating in the Description
field if you wish, this is to help you or people working with you to differentiate between all the
different content types you may have in the end, which can be quite a bit. Next, select Menu Settings
tab.
Creating a Portfolio Website 37

menu settings

In this page, ensure the “Main Navigation” checkbox is selected. Next, select the Save and manage
fields button at the bottom of the page.

portfolio manage fields

Adding Fields
Now let’s add the fields that will hold the images in our portfolio items. To do this, enter the name
of the field (e.g., showcase_image) in the “Add new field” text box and select “Image” as the field
type. This will change our field from a regular text field to an upload field made just for images,
Drupal takes care of all the heavy lifting for us. Once done, hit the “Save” button.
Creating a Portfolio Website 38

portfolio field settings

Now we get to choose the default settings for our image field, when we’re done select the Save field
settings button. This takes us to the next page which has more fields to make the default settings as
shown.

portfolio extensions

Now enter the required values and select “Save settings” button.
Creating a Portfolio Website 39

portfolio manage fields

We’ve created our field, now we need to combine our image display rule with our newly created
field. Go ahead and select the Manage display tab. On this tab we’ll control how our fields are
displayed to our visitors.

portfolio manage display

Now move over to “Teaser” tab at the top of the page and ensure the field (showcase_image) is
enabled. This puts our image rule into effect. We should be all set on this page and we’re ready to
move on, select the Manage form display tab.
Creating a Portfolio Website 40

portfolio manage form display

Creating our View

By now it should all start making sense, create your content type, decide what information you want
it to have, and display it all in the end with Views. Mastering this workflow is key.
Make sure the field (showcase_image) we created in the Manage display tab is enabled. Now save
the form. Let’s create a view organize the content we want to display. You can refer to the Views
section for more information on what views are and how to create one. Let’s add a new view and
call it view_showcase and configure a Block to display the view. Once the basic settings are defined,
your page should look something like this
Creating a Portfolio Website 41

portfolio display settings

In the Format section, set the format to Grid. You can do this by clicking on the existing format. We
want our images to display nice and even to our visitors.

portfolio view

Select the Grid option and select Apply to select the format. Here you can choose how many images
you want to display per row, as well as grouping options which we’ll cover later on. You can preview
Creating a Portfolio Website 42

the format in the preview section at the bottom of the page. To display the images, we need a add
an image field. To do this, select the Add button in the Fields section.

portfolio add fields

In the search field, enter the keyword image and select the required field from the search results.
Next select Add and configure fields. Once done configure the image field and save it.
Now that we have configured all the settings, let’s add some content to our portfolio. Go over to
Content and select Add content link and select the view that we created showcase. The following
page is displayed.
Creating a Portfolio Website 43

portfolio content

Enter the name of the file in the Title field and select the required file to attach. Next select Save and
publish. Now add more files to create a portfolio.