Drupal is the most structured CMS (Content Management System). Wordpress is very popular and easy, Joomla has some usefull tools, but Drupal is the best. The new Drupal 8 release will become the standard for CMS.

We provide tutorials (drupal8.support) and test hostings to make the exercises

This site contains the 15 exercises to produce a professional webshop from scratch. The exercises and hosting are free. For support (with movies) you need to be member.

Step 1

  • keywords: hosting, domainname, responsive, adaptive, fluid, theme, SEO,...
  • Why Drupal?
  • install Drupal 8
  • maintain the site (control panel and manually)
  • Drupal 8 structure
  • blocks, menus, themes
  • site settings
  • account settings
  • install Admin toolbar
  • confuguration of the Bartik theme
  • content types and fields
  • fields, fields forms, field display settings
  • body-, image- and taxonomy fields and settings
  • configuration CKEditor
  • home page content
  • Pathauto installation and purpose
  • Taxonomy vocabulary and items
  • Paintings content type and fields
  • Default and teaser mode
  • Adding content to the paintings content type
  • Making menu items
  • image styles
  • focal point module (crop module)
  • Making of a simple view with a menulink

Step 2

  • Drupal 8 Zymphonies theme
  • theme settings (social media, contact...)
  • changing banner picture with FTP
  • views slide show
  • third party installation
  • slideshow with focal point
  • taxonomy menu
  • blocks on certain pages
  • @font-your-face
  • Asset injector
  • CSS classes
  • use of responsive tables filter module
  • views table with responsive colums
  • adding CSS on view fields
  • use of min-width CSS (to correct the Chrome display)

Step 3

In this exercise we work with the content type of 'Painters'

  • install the modules field formatter class, image widget crop, chosen (third party) and colorbox (third party)
  • make the content type with the fields
    • body
    • image (multiple)
    • country (list of all countries)
    • date of birth with prefix
    • date of death with prefix
  • add content using the image widget crop for the images
  • use field formatter class to make the text floating
  • make a view of the painters using the unformatted list
  • make it floating
  • set the colorbox on the pictures
  • filter on title, country (use chosen module) and an extended filter on birthyear
  • set the filters in a block
  • set a table in the body (Picasso) and make it responsible with the already installed Responsive tables filter.

Step 4

In this session we are focussing on the 'Museums' content type. Only one node is filled with content: Louvre

We need: Juicebox, IMCE,Video embed, field collection, field group, image field zoom.

The content type has

  • body
  • images (display with Juicebox)
  • closing days (date)
  • opening hours (field collection)
  • video (youtube)
  • link
  • documentation (file upload in pdf)
  • ancient art (image with image field zoom)
  • location (gmap display)

All of these fields are grouped into tabs with the field group module

The document link and the video are also implemented in the body for didactical reasons. We use 2 modules for that.

Step 5

To install above the modules already installed: Draggable views, Views Flipped Table, Views field formatter, Views Split, Fotorama Gallery and PrevNext

Add the nodes to the museums content type that correspond with the paintings. Title and picture are needed, the rest is optional.

Make a view in table display like this using relations for the images of the painter and museum.

Drupal8_001969.png

Sort with a draggable view.

Make the same view but now flipped (Flipped tables are not responsive). Put some CSS on it to get the pictures displayed properly.

Drupal8_001971.png

Create a slideshow with the museums images. Paging with the thumbnails. Filter contextual on the node ID. Put some CSS on the thumbnails. Integrate into the content type as a field.

Drupal8_001973.png

Make a display mode 'big teaser'. Set 2 fields in this mode. Use this big teaser in a view only for the first item. The rest is common teaser mode. Use the summary for showing other content.

Drupal8_001974.png

Put the fotorama Gallery on the image field. Allow navigating with a previous, next link for the nodes.

Step 6

Modules extra to install: Display suite, Bootstrap layouts.

Set the 'welcome' page as homepage.

Make a view with the estimated value of the paintings with on top the sum of all works. Use an attachement. Add this view to the view of the paintings;

Drupal8_001975.png

With Display  Suite you change the look of the display of the paintings content type.

At the top you see something like that.. Add CSS to have a similar result.

Drupal8_001976.png

At the bottom a view with the other paintings is shown. You can not see the thumbnail of the node you are looking at of course...

Drupal8_001978.png

Add a comment field to the content type. Allow comments on the comment. Don't give access to anonymous visitors.

Drupal8_001979.png

Step 7

Installation of the image effects, Background images formatter, Responsive theme preview, EVA module,  the Weborm, mail system and Honeypot module

Set a background to the painter nodes. Select their most famous painting as background. Use image effects to set tranparency to the picture.

painters

Set a background to the painters view also with a random image.

painters view

Set no background on small devices. Use the Responsive theme preview module to check.

Use the built in glossary view an set some CSS on it:

glossary

Make an EVA field connecting the paintings to the painters. What is the difference between EVA and the viewfield module? Try out.

eva field

Forms

There are 3 ways of collecting information.

  1. Using the contact form.
  2. Setting a content type accessible to the public or verified accounts.
  3. Using a webform

We will do all of them in this step.

1. We will extend the contact form with some other fields.

2. We will set open the paintings contact form for verified users and test it.

3. We will set up a quiz about pintings and painters... See the tutorial on drupal8.support. (http://drupal8.support/en/modules/webform)

  • The webform module is a huge one.. More than 20 video's will teach you the possibilities...
  • The webform will send mails with the post content and we will make export possible with csv. Look for the Quiz link.
  • Conditions, handlers, settings...
  • Honeypot wil protect our forms against spam bots.
  • Mail system will mail to the subscribers of the form.

Step 8

This step is about the looks..

The theme has many blocks on the front page, in order to make a one page site. We will do both. The home page shall be turned into a onepage theme. The rest wil stay as it is.

Use the coffee module to turn to the CSS pages.

Explore the possibilities first and reproduce them.

We have blur effects:

Drupal8_002001.png

Hover effects (painter shows up on hovering)


Drupal8_002002.png

Transition effects


Drupal8_002003.png

Rotating effects.


Drupal8_002004.png

Step 9

You need to install: Paragraphs, Workbench, Workbench Moderation en Workbench Email

This step deals with Paragraphes, Workbenches , translation and permissions.

First we make a some paragraph types , so content can be created in a dynamic way.

Drupal8_002061.png

We implement this in a content type 'recommendations'. We suppose that team members can reccomend us some content to be put on the site.

Drupal8_002060.png

After setting the display with DS it could look like this.

Drupal8_002062.png
Drupal8_002063.png
Drupal8_002064.png

We had the choise of these fields.. do you recognize them?


Drupal8_002065.png

One of the editors proposed a contribution of Rene Margritte.


Drupal8_002066.png

We set up the workbench for this content type. He/She made it first in a draft, and promoted it to 'needs review'.
Drupal8_002067.png

We made a mail template that alerts the administrator when content hes to be reviewed.

Drupal8_002074.png

Now we shall make it translatable.. Make all the settings. Look close to these 2 pictures. Find the differences...


Drupal8_002068.png

The translation..


Drupal8_002069.png

The view that shows these reccomendations is also translated.
Drupal8_002070.png

As well as the link..


Drupal8_002071.png

We make a role 'translator' in order to translate the museum content.. Do the settings.


Drupal8_002072.png


Finally... Adapt the content view so that you can see in which language the content is made.

Drupal8_002075.png

Step 10

A lot to do in this step... first contact with composer... first install calendar, views templates, geofield location, simplenews, simplenews scheduler, swift mailer, address, entity print (PDF!)...

We we let team members to add interesting expositions.

We shall use the address module (composer needed)  to gather the information of the informer. Then we shall use a starting date of the exposition, in order to make a calendar and at last we shall make a newsletter to inform our subscribers that there is an interesting exposition. the location of the exposition will be shown with the geolocate module.

The address module has some 200 countries listed... Look at the Brasilian provinces...

Drupal8_002085.png

Install putty on your computer. Log in

Go to your root.  Copy paste this code

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '55d6ead61b29c7bdee5cccfb50076874187bd9f21f65d8991d46ec5cc90518f447387fb9f76ebae1fbbacf329e583e30') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

From now on every command needs to start with php composer.phar. 

config repositories.drupal composer https://packages.drupal.org/8

and

require "drupal/address ~1.0"

Make the content type in order to achieve this..

 Drupal8_002081.png

A part of the calendar... Use some CSS to set it to your wishes..
Drupal8_002082.png

A view of the geolocation map. It has more possibillities than the simplemap module. You can make views with it too... Do it.


Drupal8_002083.png

For the module you need a Google Maps API key..

Drupal8_002087.png

Our newsletter will be sent in HTML, including pictures and CSS using the Swiftmailer module. (Composer needed)

require swiftmailer/swiftmailer

Drupal8_002084.png

We will create different types of newsletters.

Drupal8_002086.png

The HTML will be provided with swiftmailer.

Drupal8_002088.png

Visitors can subscribe to one ore more newsletters.
Drupal8_002089.png

Newsletters can be sceduled..


Drupal8_002090.png

Step 11

This step deals with Panels, Masonry, patches and SEO

Needed: Panels, Page Manager, Panilizer, Masonry, Masonry Views, Metatag, XML SiteMap


We will turn the Museum content type into a Panels display. We will show the Page Manager and the Panilizer method to do so.
Drupal8_002115.png

The Panilizer method is easy...
Drupal8_002116.png

We choose a layout.


Drupal8_002117.png

Set the regions...


Drupal8_002118.png

Set the configuration of the display. Here we use a colorbox display with only one image visible.
Drupal8_002119.png

Masonry is a css/javascript module that fits in all the images in a grid. It is a heavy third party module. Use te new available dependencies

Drupal8_002113.png

When changing the screen width the pictures rearrange automatically and with a javascript transition. Cool...

Drupal8_002114.png

Unfortunally some themes (like ours) do not show the masonry correctly. In the preview no problem (Seven), but in several themes it fails. This is the ideal moment for learning how to patch.

Look at the issue: https://www.drupal.org/node/2716399

Delete all - and add all +. There are 2 files to be changed. Use the patch in the link above.

Drupal8_002120.png

Now we are setting the SEO. Search engine optimalization.

Teh meta tag module sets descriptions an tags for the search engines. You add this on every page you want.

Drupal8_002122.png

A second module we shall use is sitemap XML. It makes an index of your content like you wish. You can even upload them to Bing and Google.

Drupal8_002121.png

Step 12

Bootstrap themes: Tweme and Breeze

Bootstrap Bricks and Bootstrap Paragraphs

Step 13

webshop part 1: products and variations

Needed: commerce module and dependencies (do it  with composer), views field view

  • Product types
  • Product variations
  • Example payment method
  • Display of product type and variations
  • Views display (2 kinds according variations)
  • Show the available variations
  • CSS on the views
  • Cart

Drupal8_002151.png
Drupal8_002152.png
Drupal8_002153.png

Drupal8_002154.png

 

Step 14 

Study of automatically populated content: https://drupal8.support/en/contribution/automatically-populate-content

TO DO

Step 15 Rules, Feeds, Features, Node export, backups, updates, site migration, making of distributions