Author

Oct 30 2018
Oct 30

Entity Reference Views are a great way to make life easier for Drupal content creators.

Normally, when people create content on your site, each field is very plain. However, Entity Reference Views allows you to provide far more information. For example, instead of just showing a list of users, your content creators can browse through a list of names, photos and personal details.

Both Views and Entity Reference are now part of the Drupal 8 core. This made using Entity Reference Views in Drupal 8 much easier.

If you're a Drupal 7 user, read this version of the tutorial.

Step #1. Create a content view

  • Create a view of the content that you want content editors to choose from. In this example, I'm going to make a view by the name "List of Speakers":
Create a view of content in Drupal
  • At the top of the page, click "Add" then "Entity Reference":
Adding an entity reference view
  • Click "Add Fields":

add field

  • Set For to 'This entity_reference (override)
  • Add the fields you want to have displayed and searchable.

03 add field

  • Click "Settings" next to "Entity Reference list".
Click
  • Search fields: Choose the field(s) you want users to search by.
  • Click "Apply (this display)".
04
  • Check the preview to make sure your view is working:
The preview of our entity reference view

Step #2. Add a Field with the Entity Reference View

  • Go to Structure > Content types.
  • Add an "Entity Reference" field.
Adding an Entity Reference field in Drupal 8
  • Save and continue
  • Save field settings
06
  • Click "Add content" and the data entry for your field will use the View you created.
  • If you prefer a checkbox to autocomplete go to Administrator > Structure > Types > Manage > Speakers > Form-display and change the widget type.
07

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.
Apr 27 2017
Apr 27
Add Parallax Styled Blocks to Your Drupal 8 Theme

In this tutorial, I will explain how to use custom block types to create a Parallax effect in a Drupal 8 subtheme.

It would be preferable but not required for you to have a good understanding of Drupal 8 theming. You can click here to take the Drupal 8 Theming Class.

To be able to follow this tutorial, you need to install Bootstrap and create a subtheme from the CDN folder. You can follow our guide here in our earlier post.

Parallax effects are usually full width so you need to turn on Fluid container option from the theme menu.

  • Go to /admin/appearance Install and set the theme as default 
  • Enter settings and select the Container drop-down and tick the box and select save configuration.

01

  • Now you need to make some custom blocks for the display. By using custom blocks you can theme the blocks specifically.
  • Go to admin/structure/block/block-content/types and create a new block type called Parallax 

02

  • Label the custom block Parallax:

03

  • Now go to 'Add custom block' and create two blocks, one for each of the images you are using Parallax 1 and Parallax 2:

04

  • Set the region to content and save the blocks.

Now you need to use the custom basic blocks to display content between the images on the block layout page. Also, remove any blocks you have placed in the sidebars as this will prevent the width being 100%.

05

  • Now turn on debugging if you don't already have it enabled.
  • Go to sites/default and copy and rename default.services.yml to services.yml on line 58 change debug to true:

000

  • Now, to be able to see the theme suggestions, add this code to your subtheme.theme file:
/**
 * Implements hook_theme_suggestions_HOOK_alter() for form templates.
 * @param array $suggestions
 * I found this code on drupal.org https://www.drupal.org/node/2724333
 * @param array $variables
 */
function subtheme_theme_suggestions_block_alter(array &$suggestions, array $variables) {
    // Block suggestions for custom block bundles.
    if (isset($variables['elements']['content']['#block_content'])) {
        array_splice($suggestions, 1, 0, 'block__bundle__' . $variables['elements']['content']['#block_content']->bundle());
    }
}
  • The function name needs to match your theme name. Adding this to your theme file allows you to theme custom blocks.
  • Flush all caches and if you inspect the site now you should see theme suggestions.
  • In Google Chrome, right click on the region and select Inspect to access the inspector tool:

06

  • Add the template suggestion for parallax block in your templates theme folder subtheme/templates/block--bundle--parallax.html.twig
  • Add this code to the template file:
<div class="parallax parallax--{{ elements['#id'] }}">
    <div class="parallax__bg"></div>
    <div class="parallax__content">
        <h2{{ title_attributes }}>{{ label }}</h2>
        {{ content['body']['0']['#text'] | raw}}
    </div>
</div>

  • This code will style the parallax custom block you created. If you need to debug this you can use kint from the devel module.
  • Now you need to add the CSS to style the blocks. To do this, open your /css/style.css and add this code: 
.main-container,
.page-header {
   padding: 0px;
}

.block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 {
   text-align: center;
   padding: 10em;
   font-size: 20px;
   background-color: #204d74;
   color: #fff;
}

.parallax {
   text-align: center;
   position: relative;
   overflow: hidden;
   height: 500px;
}

.parallax__bg {
   position: absolute;
   width: 100%;
   height: 140%;
}

.parallax--parallax1 .parallax__bg {
   background: url('../images/yourimage');
}

.parallax--parallax2 .parallax__bg  {
   background: url('../images/yourimage');
}

.parallax__content {
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   color: #fff;
   h2 {
     margin: 0px;
     font-size: 30px;
   }
   p {
     font-size: 20px;
   }
}

You will need to update  .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 to match your block: 

007

This is the class assigned to your custom block.

  • And if you named your Parallax block differently, you will have to update .parallax--parallax1 and .parallax--parallax2. 
  • Now go to your theme and create a folder called images. This is where you will save the images for the parallax.
  • Add some Javascript to make the images move slightly. For this, you will use ScrollMagic. Download and extract the files from GitHub:

008

  • Now go to your theme and create a folder called js and move these files into the folder
    • animation.gsap.min.js
    • ScrollMagic.min.js
    • TweenMax.min.js
  • Now you need to add our custom js add parallax.js
  • You now need to tell the theme to load the js libraries. To do that, open ubtheme/subtheme.libraries.yml:
global-styling:
  css:
    theme:
      css/style.css: {}

  js:
    js/ScrollMagic.min.js: {}
    js/animation.gsap.min.js: {}
    js/TweenMax.min.js: {}
    js/parallax.js: {}
  dependencies:
    - core/drupal
    - core/jquery

  • And finally, add this code to your parallax.js file:
(function ($) {
    'use strict';
    Drupal.behaviors.myBehavior = {
        attach: function (context, settings) {

            var controller = new ScrollMagic.Controller();

            var blocks = [".parallax--parallax1", ".parallax--parallax2"];

            blocks.forEach(function (block, index) {

                var $bg = $(block).find('.parallax__bg');
                var $content = $(block).find('.parallax__content');

                var tl = new TimelineMax();
                tl
                    .from($bg, 2, {y: '-40%', ease: Power0.easeNone}, 0)
                    .from($content, 1, {autoAlpha: 0, ease: Power0.easeNone}, 0.4)
                ;

                var scene = new ScrollMagic.Scene({
                    triggerElement: block,
                    triggerHook: 1,
                    duration: "100%"
                })
                .setTween(tl)
                .addTo(controller);
            });
        }
    }
}(jQuery));
  • Make sure the images you are using are big enough for the max width you want to display. 
  • And now you should have a nice scrolling effect that you have applied only to our custom blocks:

Add Parallax Styled Blocks to Your Drupal 8 Theme

Congratulations now you know how to do the following in Drupal 8

  • How to add JS to your theme
  • Working with custom blocks
  • Applying CSS to your blocks

Finally, if you did use debugging you should disable it when the site goes live.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Apr 27 2017
Apr 27
Create a Drupal 8 Bootstrap subtheme using CDN

Using the Bootstrap CDN allows you to quickly add custom code that overrides the Bootstrap defaults. By doing so you can quickly make your own Drupal theme based on Bootstrap.

In this tutorial, we will demonstrate how to create a Drupal 8, Bootstrap subtheme that uses the "Bootstrap CDN".

  • Firstly, you will need to download, install and enable Bootstrap.
  • Now open the Bootstrap folder, enter the starterkits folder and copy the CDN folder and place it in the themes folder next to bootstrap:

001

  • Now rename the folder with the name you want to give your theme. For this tutorial, I will simply call it subtheme.
  • Now we need to replace THEMENAME with subtheme in the following files:
    • /config/install/THEMENAME.settings.yml
    • /config/schema/THEMENAME.schema.yml
    • /THEMENAME.libraries.yml
    • /THEMENAME.theme
  • The starterkit file is slightly different and needs to be renamed from /THEMENAME.starterkit.yml to /subtheme.info.yml
  • Now open subtheme/subtheme.info.yml in your editor of choice. I recommend Atom.
  • Again update the 'THEMETITLE' and description with the details of your theme.

002

  • Now open the schema file inside config and update the label

003

  • Now go back to Appearance and scroll down to the uninstalled themes section and we should see the theme subtheme.

004

Install and set as the default theme and you are ready to start customising your own theme.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Apr 25 2017
Apr 25
Drupal 8 Field Layout Alternative to the Display Suite

In Drupal 7 to create custom displays, you would probably use Display Suite.

Drupal 8 just added a potential alternative to the Display Suite in the core experimental modules. The Field Layout and Layout Discovery modules will allow you to assign a layout to specific content types.

In this tutorial you will learn how to customise the display of content on a content type level with the Field Layout and Layout Discovery modules.

  • Enable the module Field Layout, in this tutorial I use Drupal core 8.3.1

01

  • Install
  • You will be warned that layout discovery is also required and that experimental modules should only be used for testing at this time. 
  • Continue
  • Now we need to assign a layout to our content. For this example, will use the article content type that comes with Drupal core.
  • Structure
  • Content Type
  • Operations > Manage Display
  • Below the normal options, you will now see that 'layout settings' is available.
  • Select your preferred layout, I have chosen the 3 column option.

02

  • Save
  • You will now notice that under Field you see titles for the regions available from this layout as shown below.

03

  • To change the display, simply drag and drop the item to the location you wish to use and save the layout. Normally images load on the left for this demonstration I will move them to the right.

04

  • Save
  • Now if we view an article you should see that the changes.

05

This is a very fast and easy way to customise the display of content on a content type level. You can even add to it by making your own layouts.

It also works with the Paragraphs module allowing you to assign content to regions within the various paragraph types, once officially a part of core this will be a very powerful and fast way to apply layout changes to your Drupal content.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Mar 30 2017
Mar 30

Proposals to improve the Drupal contribution process have been heavily debated for the last few years. 

Until now, the only thing everyone could agree on was the current process was broken.

Currently, many submitted modules are hung out to dry, because very few people have time or energy to fight through the submission process. You are lucky if you get your module accepted within 6 months. Many developers have waited much longer.

We were astonished to learn that our theme, called Breeze, was the first theme project to complete the approval process in 2016. And it was published in September! There were no new theme contributors for the vast majority of 2016. 

Fortunately, big changes are finally about to come to the approval process for code on Drupal.org.

What changes are being suggested?

Contrib modules will now be passed through an automated code review process such as pareview. If the module passes, then it will be promoted to a full project on Drupal.org. There will no longer be a long, drawn-out process before approval is granted.

Instead, the Drupal community will move towards relying more on code reviews after publication. There will be automated tests, and also incentives for providing peer code review. Project pages will carry clear indicators of code quality, including both automated signals and the results of manual code reviews. Code quality signals will impact where projects appear on listings and search results.

The role of the Security Team will also change. All new projects can apply for Drupal Security Team coverage. Projects that do not have coverage will get a warning message on the project page and on the update status page for their sites.  Here's a current example of a module with security coverage:

green security

And here's an example of a module with no security coverage:

no security

However, this security coverage will require some work by the contributor. There will be a user role on Drupal.org called “Opt into security team coverage” role. To get accepted into this role, and to get your project covered by the Security team, you will need to pass through a detailed approval process for your module.

You can click here to read the entire discussion on the changes.

Conclusion

The new method will allow for the quick publication of projects. The new emphasis will be on strong follow-up process (involving the Security Team) instead of a strict approval process.

This shift in focus should help developers improve the modules they submit and move modules forward in a more encouraging manner.

An emphasis on security and stability will be needed to ensure that future modules are security vetted. The updated system for the security coverage will show which modules are deemed released and ready. This will push developers to mark their modules as officially releases. Why is this important? In Drupal 7, a module could often tagged as "beta", but still be in mass use. 

Overall, these are positive changes and they help the development process from "fighting against the system" to "being encouraged and helped with your contributed module." This is definitely a step in the right direction for Drupal contributions.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Mar 25 2017
Mar 25
Creating a Drupal 8 Private File System

An OSTraining member asked how they could set up Drupal 8 private file system.

In Drupal 7 you could do this from the configuration at Administrator > Configuration > Media > File System. In Drupal 8 we have to set the private path manually.

  • Create a directory for the private files to be saved in:

01

You may want to use a name that won't be considered important. For this tutorial, I have simply called it 'private'. 

  • Go to your sites/default/settings.php. On line 533 you should find the setting we need to edit hashed out:

02

  • Remove the hash and enter the path for your private directly. In my case, this is 'sites/default/files/private':

03

  • Save and close settings.php file
  • Flush the cache which you can find in Administration > Configuration > Development > Performance:

04

  • Go to the File System and see if Drupal is detecting the private file storage: Administrator > Configuration > Media > File system

05

  • Select the private directory and save this configuration.

Drupal should automatically include a new .htaccess file inside the folder.

Now you have a private directory to store your files in.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Mar 16 2017
Mar 16

An OSTraining member asked how to set up the Drupal 8 "Mollom" module.

In this tutorial, I'll show you how to go through the process of its installation and setting up.

If you are using Drupal 7 we have the How to use the Mollom Module in Drupal 7 class that covers how to do this in detail.

Let's get started.

  • First, install and enable the module.

01

  • Select Configure

02

If you haven't already, you will need to register with Mollom web site. Ssince this is a tutorial, I will walk you through the process of the registration. 

  • Once on Mollom web site, please click on the "Pricing & Sign-up"
  • Select an account type. For the purpose of this tutorial I'm going to select the "Molom Free" personal account. The level of account you need really will depend on the site and on how much support you will need.

03

Once registered, you will receive an email prompting you to finish the registration process.

  • Enter the URL you expect to use for the site once finished.
  • Select expected language for the site. This can be helpful to filter messages in other languages that you don't want.
  • Select the type of software your site is using, - "Drupal" in this case.
  • Tick the terms and condition chekbox and click on the "Next" green button.

04

Now we need to access the site manager and copy the keys into the Drupal configuration. In the top right corner you should see 'Manage sites' link.

  • Select "Manage sites"

05

  • Select "View"

Now you should see the information and statistics of the site.

06

  • Copy both the public and private keys into your Drupal configuration page.
  • Enabling testing mode here will allow you to check your forms. This is optional but I would advise you test your "Mollom" module before launching it on a production site.
  • Click on the "Save configuration" button.
  • Now that we have successfully set up our "Mollom" module, we need to tell it which forms data input to monitor. We can access our "Mollom" settings by going to "Reports" -> "Mollom Statistics" -> "Forms" tab and clicking on the "Add Form"

07

  • Once you have selected a form, the configuration options will appear to give you access to more specific details related to the type of your form. This allows us to be more strict on some of the forms and even the option to hold submissions for moderator approval. For this tutorial, I will just use the default settings applied to the sitewide contact form and click on the "Create protected Mollom Form" button.  

08

To verify the form, please visit the page and you should see the following message:

09

You can disable this notification message when you take your site live, - simply select the checkbox located on the module settings page.

Congratulations! You just learned how to install and configure "Mollom" module for Drupal 8 web site.

Are you new to Drupal? If Yes, then please watch our completely free "Drupal Beginner Class", which leads you step by step through the process of building a Drupal site.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Mar 13 2017
Mar 13
How to Build Drupal 8 Scrolling Text Slideshow

An OSTraining member asked us how to create a CNN / BBC-style news site, with a breaking news ticker. 

In this tutorial, I'll show you how to build a slideshow in Drupal 8 that uses text rather than images.

If you're using Drupal 7, we have a version of this tutorial for you.

Step #1. Getting set up with Views Slideshow

First, we need to install the modules and libraries needed for our slideshow:

Insatlling Views Slideshow modules Downloading jquery cycle library
  • Extract the folder you just downloaded.
  • Rename the folder to /jquery.cycle/
  • Upload the files to the /libraries/ folder in the root of your site. This is different from Drupal 7, so be careful.
  • When you're finished, your folder structure will look like this:
Uploading jquery cycle library to Drupal 8
  • Go to Structure > Content types.
  • Make sure you have a content type with an Image field attached:
A Drupal 8 content type with image field

Step #2. Create the view

Now we're going to use Views to create our slideshow:

  • Go to Structure > Views > Add new view.
  • Enter a "View name".
  • Click "Create a block".
  • For "Display format", choose "Slideshow".
  • Click "Save and edit".
Creating a Drupal 8 content type
  • Select Slideshow settings from the format section.
  • In Cycle Options change the Effect from fade to "scrollLeft".
  • Click "View Transition Advanced Options".
  • Update "Timer delay" and "Speed" to fit your needs. In this case, I will change both to 600.
  • Click Apply.

Changing settings for a Drupal 8 slideshow

  • Now select the number of items from the Pager display and set this to 0 items.

Changing the pager for a Drupal slideshow

  • Save the view.

You will notice that the preview inside Views does not work yet. Don't worry, everything should work correctly after the next step.

Step #3. Publish your slideshow block

Now let's publish our View so that people can see it:

  • Go to Structure > Block layout.
  • Click "Demonstrate block regions".
  • Choose the region you want to use for your slideshow. In my example, I'll use "Content":
Bartik block placement
  • Find the block region you want to use and click "Place block":
Placing a Drupal 8 block
  • Find the block that you just created and click "Place block":
Place block in Drupal 8

Under "Pages", choose which pages you want the slideshow to appear on:

Drupal 8 block visibility
  • Click "Save block".
  • If your chosen block region has multiple regions, make sure your block is correctly placed. In this case, I want it at the top:
Your new slideshow blocked placed in a region
  • Click "Save blocks".
  • Go and see your slideshow published on your site:
Your final Drupal 8 slideshow with ticker

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Mar 03 2017
Mar 03
how to make a complex webform in drupal 8

One of our OSTraining members asked us how to make a user input form using Drupal 8 Webform module. So, we thought what could be a more useful answer than a comprehensive, easy to follow lesson.

For the purpose of this tutorial we will use the Webform module. If you would like to use the "Webform Devel" option, you will also need the Devel module.

Once I downloaded the modules, I have enabled all the Webform options. You don't need to do this but if you would like to take a look at what is possible, you can see some of the example files. 

In the Extend menu, my Webform options looked like shown on the screenshot below:

01

Webform requires 10 libraries. In Reports > Status you can see all the files you will need. Following is a list of all the required files:

02

Once you have installed them, we will return to this page to make sure they are all being detected by Drupal correctly.

Now please download the following packages:

Webform library: CKEditor
Webform library: Code Mirror
Webform library: jQuery Geocoding and Places Autocomplete Plugin
Webform library: jQuery Input Mask
Webform library: jQuery Timepicker
Webform library: jQuery Toggles
Webform library: jQuery Word and character counter plug-in!
Webform library: RateIt 1.1.1
Webform library: Select2
Webform library: Signature Pad

Extract the files and place them inside /libraries/ folder. Rename the folders so that they match the naming convention, shown on the screenshot below:.

03

Now go back to Status > Status Reports, run a cron and check that Drupal sees and recognises all the plugins we just installed.

The only alert you should see at this stage is a warning about privacy. If you are collecting sensitive data, you should make sure you have configured Webform to use private files (for more information on how to properly use private files in Drupal, please read "Accessing Private Files" section of the Drupal oficial documentation).

Now, as we have fully installed Webform module, we can start building our own form. 

Under the "Structure Menu" you will be able to access the "Webforms". Here you can find a number of examples and see what Webform is capable of but we are just going to go ahead and start making our own form.

Select "Add webform". We need to give our form a title and an optional description, if you wish. 

Now we need to add the elements for the first page, at which we will collect the users information.

Select "Add element" and you will see a long list of preset options that will really help you get through your form construction fast.

04

"Name" already exists as a predefined field. So select it from the elements list and we can configure it to our needs. You have to give every element a title. We only want the First and Last name, so untick visibility for the other fields. You should also set this to be required.

Now, for the first page, we are going to add the following fields: Name, Address, Date (for date of birth), Email (I'd recommend to add also "Email confirm" as this provides two fields that check if the entered by the user values match), Telephone (for this field you would probably want to change the Form display so that it looks a little more obvious that it is a phone number field), Status (for the Status field we are going to use a select type field that allows us to add the values we want to be available for our user).

05

Good job! We just finished our first page, which we can rearrange and even set to required from the main webform edit page.

06

We have a lot of fields already, so let's add a second page to break this one up a little bit and make it look more professional. Select the "Add page'". This will create a page break in the form and add the navigation for it.

In Drupal 7 you only need to add a page break for subsequent pages to do this. In Drupal 8 you need to tell it which fields to put on which page, so we will also need to make a page for the first-page content.

indenting the fields will automatically add them to a specific page. You could create your entire form and then break it up into pages easily dragging the indentation arrows to arrange all the content quickly. 

07

At this point I will go and fill out the form so you can see what a filled out form would look like. You may want to add a custom element (for example if you wanted to combine several elements into one type, as jrockowitz explains here) but we won't be covering that in this tutorial.

Instead, for passengers I will simply allow "Add another option", which will still allow the data to be collected in a logical way. In Values, you could add the other fields you want to use for collecting user input but they will be limited to the field type selected. 

08

Now we have our multiple page form but it doesn't look very nice and we have some odd repeat behaviour. So let's fix that. First let's update the "Passenger" page to add a tick box to create more passengers and clone the "Name" and "Date of birth" fields.

09

Now we have to edit the "Name" and "Date Of Birth" fields so that when the checkbox is selected the fields become available. We do this by selecting "Edit", then going down to "Conditional logic" and below "Conditional logic" to both the "Name" and the "Date Of Birth" fields.

10

Now your page should look like this:

11

And when Add another is ticked:

12

If you would like to improve the layout of the fields without theming, you can use the "Flexbox" options. From the example below, you can see that it can be used to make forms look more compact and much cleaner. 

13

Drupal 8 "Webform" module is very powerful addition out of the box, offering you a lot of options to quickly create and configure rather complex web forms. 


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Feb 15 2017
Feb 15
Building Conditional Webforms in Drupal 7

One of our OSTraining members asked us how to configure webforms with conditions.

We prepared this tutorial to show you how you can do just that on your Drupal 7 sites.

Step #1. Installing the Webform modules

For this tutorial, you will need the following Drupal modules:

Once you downloaded them, please go to these modules are make sure you have enabled them.

You should have the following module options ticked:

  • Chaos tools
  • Form builder
  • Form builder Webform UI
  • Token
  • Options element
  • Views
  • Views UI.

Under Structure > Content types, you will see that you now have the "Webform" content type. Review the default settings of this content type. I personally removed the "Published By" but this is my own personal preference.

Step #2. Building the Webform

Now that we have everything installed, let's start building our webform.

  • Go to Content > Add Content and select "Webform".
  • Give this form a title. Also, for ease of access, I am also going to assign it a menu link.
Creating a user experience feedback form

Now, using the form builder GUI, you can easily drag and drop the configuration elements that we need for this webform.

Choosing elements for a Drupal webform

In this example, I have created a "User experience feedback form" that will be asking for user's Name, Email and to rate a service.

Choosing conditionals for a Drupal webform

We want to set up a condition, which will then trigger a feedback textarea if the 'Not Happy' option is selected. We want this textarea to display on the same page, so we will not use a page break for this form element. 

Creating conditionals for a Drupal webform

Step #3. Testing the Webform

As we now have configured our webform, let's make sure it works. While 'Very Happy' is set, you do not see the feedback textarea field:

Testing a Drupal webform

If, however, you select the 'Not happy option', then immediately the corresponding textarea field will show up.

Testing a Drupal webform conditional

As you have now learned in this tutorial, using conditionals in Drupal you can add many complex responses to your webforms, add some cool features to them and collect all the information you need.

Still have questions? Please submit them in the comments below.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Feb 09 2017
Feb 09
checking upgrade status of modules

Are you a Drupal 7 user who wants to migrate to Drupal 8.

You're not alone. "Can I rebuild my site in Drupal 8?" is a very common question in the Drupal community.

This tutorial will show you how to use the Upgrade Status module to see if you can rebuild your site in Drupal 8. 

Migration is a complex topic because every site is unique. The modules you use on your current site will have will determine whether you can update.

An easy way to keep an eye on the progress of the modules you need is by using the Upgrade Status module. This module adds an extra tab to the 'available updates' page that tells you the current releases for the version of Drupal you have selected.

Simply download and install Upgrade Status. Once enabled go to:

  • Login to your Drupal 7 site.
  • Go to Reports > Available updates. 
  • Select the Upgrade Status Tab:

The Upgrade Status tab in Drupal 7

  • Check that the right version of Drupal core is selected:

Choosing a target verion of Drupal

  • Select "Check manually".

Check for Drupal 8 module updates

Drupal will now check the modules you are using and provide a report page. You can see a report in the image below.

I would advise you to seek advice if dev modules are your only option. Preferably any module you decide to use should have been updated in the last 6 to 9 months.

The final module update report


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Feb 09 2017
Feb 09
drupal 8 responsive colorbox gallery with caption text

An OSTraining member asked how to make a gallery with Colorbox in Drupal 8.

We're going to walk you through the process of creating a beautiful Colorbox gallery with text overlaying the images.

Step #1. Install the Modules and Libraries

For this tutorial, you will need the following modules, themes and libraries

Step #2. Create the content for the gallery

  • Go to Structure > Content types. Create a new content type, specifically for this gallery

Creating a content type for a Drupal colorbox gallery

  • Create a Image field that is attached to your new content type.
  • Also, because this is just going to be a gallery, I removed the Body field from this content type.

Add fields for a Drupal colorbox gallery

Finally, create some content that you can use to test the gallery. You can enter some images manually, or use the "Generate Content" feature in the Devel module.

Step #3. Create the Image Style

  • Go to Configuration > Image styles

Create a Drupal image style

  • Create an image style with the Scale and crop effect. I choose 300 pixels wide and 300 high, but you can choose any size you want for your gallery.

Create a Drupal image style with scale and crop

Step #4. Create the view

  • Go to Structure > Views > Add new view.
  • Select your new content type and choose the "Gallery" type.
  • Choose you output your block as a view, not page.
  • Choose an 'unformatted list' of 9 'Items per block'

Creating a Drupal view

  • Add the Field for the image.
  • In "Format settings" add this to the "Row class", as in the image below: 'col-sm-4'. This comes from the Bootstrap theme.

Adding CSS style to a Drupal view

  • Now in "Advanced Settings" for the view add a CSS class 'container-fluid'.

Adding CSS to a Drupal view

  • Save the View.

Step #5. Place the block

  • Go to Structure > Block layout.
  • Click "Place block" and choose your new view/block.

At the moment the view won't look very good. However, we're going to apply CSS to the view, and it's not possible to see that inside the Views preview. We need to see the view live on the site.

Step #6. Edit the view

  • Go back to edit your view.
  • Select the "Content: title" field.
  • In the "Rewrite results" area, add the title tag as {{ title }}. This will allow us to style and move the title text.

Rewrite results for a Drupal field

  • Select the "Content: Image" field.
  • Update the "Formatter" to be "Colorbox".
  • Update "Image Style for content" to use the style you created in Step 2.

Adding an image style to a Drupal field

Step #7. Add the CSS

Now because I called the view 'Gallery Block', if we add CSS to .view-gallery-block it will apply the CSS only to that view. I added some CSS that will allow the title to be displayed over the image as a caption. The image below shows the gallery grid:

images inside a Drupal Colorbox gallery

This next image shows an individual image inside a Colorbox pop-up:

The image inside a Colorbox pop-up

Here is the CSS I used:

 .view-gallery-block {
margin-top: 1em;
} 

.view-gallery-block img {
width: 100%;
border: 3px solid #337ab7;
padding: 3px;
border-radius: 10px;
} 

.view-gallery-block img:hover {
border-color: #ddd;
} 

.view-gallery-block a {
color: ##28df35;
text-decoration: none;
} 

.view-gallery-block p {
margin: 0 0 10px;
display: inline;
position: relative;
bottom: 60px;
left: 6px;
background: rgba(17, 17, 17, .5);
color: #fff;
padding: 0.4em;
border-radius: 10px;
} 

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Feb 01 2017
Feb 01
Show Drupal Content in Tabs, Using Views

One of our OSTraining members asked how best to make a tabbed view of content in Drupal 8. We already have a whole class on tabs in Drupal 7, but D8 works differently.

For this tutorial, I used 2 content types: "Article" and "News". We are going to show the Articles in one tab, and the News in a second tab.

In Drupal 8, you can make tabs without using any extra modules at all.

As a tip, I used the Devel module to create some dummy content for this exercise. You don't have to do this, but Devel always make it easy to test content-heavy tasks.

Once we have our content, we can go ahead and make our view.

  • Go to Structure > Views > Add a new view. and set the view settings.

Logically you would be tempted here to select "Create a page or Create a block", but I found doing so created an issue. So skip these and we will explain how to make these from the view.

  • Enter a "View name" and click "Save and edit".

Creating a new view

Now we need to add a page display. When we do this the default Master will become hidden. 

  • Click "Add" and choose "Page".

2

  • Update the display name. This is going to display our Article entries, so I am going to rename it to "Articles". 
  • Update the Menu from 'No menu' to  'Default menu tab'. Be sure to add a 'Menu link title' and save. On the next page 'Already exists' should be selected by default. Select "apply".
  • We also need to set a Path as doing it this way does not generate a path to start with. The path will bring up this first page, which for us will be using Articles.

I've updated the fields and tweaked the display. See below if you want your view to look exactly the same.

3

  • Now we need to duplicate the page display. This will create the second tab.

4

Update the following settings

  • Display Name
  • Path
  • Menu

5

  • Now update the "Filter Criteria" so that it only displays the News content. Be sure to set that it only applies to this display:

6

Now if you click on articles and news you should see that the content changes. 

Save the view and go to the path we designated for the primary view - in my case drupal/example - and you should see the same as I have below.

7

Now that works, but I want the Title to display above the body. To achieve this, we need to take a couple of steps. First, I'm going to hide the 'Body' and 'Title' fields.

8

Next, I'm going to display the Body and Title fields, but in the way I want. I'm going to add a "Global: Custom text" field, with a rewrite rule that places the 'Title' above the 'Body' content for display.

9

And that should give you a final display like this:

10


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Jan 26 2017
Jan 26
How to Build Drupal 8 Triple Display Slideshow Using Slick

One of our OSTraining members asked how it was possible to make multiple displays for Drupal 8 slideshows.

In this tutorial, I will show you how to build a slideshow that uses your article content type to make a slideshow with a teaser.

First, we need to install the modules and libraries needed for our slideshow.

Install and enable the modules listed below. I would recommend drush for installation "drush -y en slick slick_views slick_extras blazy" or manually:

Now your "Extend menu" should look like this:

1 enabled modules

Next we need to install the library for slick

2

  • Extract the folder you just downloaded.
  • Rename the folder to /slick/
  • Upload the files to the /libraries/ folder in the root of your site. This is different from Drupal 7, so be careful.
  • When you're finished, your folder structure will look like this:

3

3.5

Now we're going to use Views to create our slideshow:

  • Go to Structure > Views > Add new view.
  • Enter a "View name".
  • Click "Create a block".
  • For "Display format", choose "Slick carousel" of "fields".
  • Click "Save and edit".

4

In the fields section, add the other fields we want to use. In this case we will be adding image, body and "Global: custom text".

5

For the image field, select "link image to" and set it to content. Clicking on the image will now take us back to the content.

6

For the body field, select "Formatter" and set it to Slick Text.

7

Go down to "Rewrite Results" and set the "Trim". In this example, I am going to use 300. This is how long the body text will be under the slideshow.

8

Now set the "title", "image", and "body" to be excluded from display. Because of the way Slick handles displays, we are going to use the "Global: custom text" to determine the order of our content.

9

Now set the "custom text". Add:

 {{ title }}

{{ body }}

10

Now we need to configure Slick.

11

12

13

14

15

Now that we have finished configuring Slick, we need to alter the default pager options. Change the number of "items" to "0" because again this is all handled by Slick.

16

Now we have a slideshow that displays 3 articles at a time with a teaser of content that links back to our full content. Let's add our block to the Block layout.

  • Go to Structure > Block layout.
  • Choose the region you want to use for your slideshow. In my example, I'll use "Content":

17

18

Now make sure to save the block layouts.

19

Now that we have our slideshow working, let's optimise the images so it is more consistent. You could now create an image style specifically for your slideshow which is explained here in our slideshow tutorial.

Or simply apply one of the predefined styles. Since we already have it documented, I will simply select one of the predefined styles.

Open the view to edit.

Select the image field and update the "image style":

20

Now all the images should be restricted to a 220x220 display making the slideshow a lot cleaner. 

21


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Jan 18 2017
Jan 18
Using Panels to Build Page Layouts in Drupal 8

One of our OSTraining members asked about the current state of the Panels module in Drupal 8. They already had experience with Panels in Drupal 7.

Panels is one of the most popular ways to create page layouts in Drupal.

In this quick tutorial, we will show you have to create your Panel in Drupal 8. The process is definitely different when compared to Drupal 7, although many similarities remain.

For this tutorial, you do not need to have experience with Panels.

First, we need to install and enable the required modules to use Panels:

Although these next four modules are not essential, I'm also going to ensure I have the following modules installed, because I rely on them heavily for site-building.

Inside your Drupal site, go to the "Extend" tab and enable the modules:

Enabling Panels modules in Drupal 8

Now we need to create our Panel.

  • Go to Structure > Pages.
  • Click "Add page":

Adding a Panel page in Drupal 8

  • Choose an "Administrative title".
  • Create a path for your panel.
  • Make sure that "Variant type" is set to "Panels".
  • Click "Next" when you're finished.

Selecting a variant type in Drupal 8

  • Give the Panel layout a "Label". 
  • Click "Next" when you're finished.

Choosing a Panels builder in Drupal 8

  • Select a "Layout" for the Panel.
  • Click "Next" when you're finished.

Choosing a Panels layout in Drupal 8

  • Enter a "Page title".
  • Now you can add blocks to your layout in the exact same manner as adding normal blocks. Use the "Add new block" button to select the blocks you want to place in the panels for display.
  • Once you've placed your blocks, click "Finish".

Placing blocks in a Panel in Drupal 8

  • On the next screen, select "Update and save".

Panels configuration screens in Drupal 8

If you want to do more advanced things with Panels, such as have different layouts for different user roles, you would create that from the "Selection criteria" area.

Panels selection criteria screens in Drupal 8

Now if you go to Configuration > Basic site settings, you can update the "Front Page" link to match the URL of your panel. Your panel will now be your site's homepage.

Frontpage screen in Drupal 8

And now we have a 2 column, responsive Panel, as in the image below:

A completed panel in Drupal 8


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Jan 12 2017
Jan 12
Contribute Your Code on Drupal.org, Part 6: Review Process

Previously we talked about connecting and checking that you are connected to your sandbox project, uploading your project and checking it against Paraview. 

Now, in Part 6, we're going to look at getting your theme reviewed. This is perhaps the trickiest and slowest part of the whole contribution process, so pay close attention. We're going to help you do everything possible to ensure a speedy and successful application submission. 

Once you are certain that your module or theme is in good order, you can submit it to Drupal.org for approval.

This approval process is a one-time deal. Once you have been granted approval for a project you need not go through the approval process again for future projects. Experienced developers can approve their own projects.

Because of the nature of the system, reviews can drag on which you should endeavor to avoid. No one is paid to review projects so they can take some time. When someone does come across your project and attempt to review it you should make it as easy for them as possible in order to ensure a swift result. 

Once you have submitted the project for a review you will get a message from the "PA Robot" which will make some suggestions for you:

Drupals PA Robot

The Drupal review process has some elements that will seem strange to newcomers. For example, one of the best ways to promote your project to the front of the line is to do the review bonuses.

The review process bonus helps you to understand what is required of a project. As you identify potential issues in other users projects, you gain knowledge that could also help you improve your project.

To receive the bonus you must complete at least 3 adequate reviews of other people's work.

Once you have completed these reviews, you can add links to these reviews onto your project application. You can also add the "review bonus" tag to your project, as in the image below: 

Drupal issue metadata

Once you have successfully completed these steps you should find your Project on this review list

You can also ask for people to look at your project. I would recommend. When we were trying to get approved, we didn't realize how pro-active we needed to be.

Try and find a channel on IRC or Slack that will have Drupal developers capable of assisting you with your review, and politely ask for assistance. 

In our next post, we will talk about the obstacles we faced during review. We'll talk about those obstacles, how we handled them and what was suggested. This was by the far the most painful part of the process, so stay tuned for Part 7.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Jan 11 2017
Jan 11

Previously we talked about the different ways in which you can contribute to Drupal, setting up your project, configuring git and connecting and checking that you are connected to your sandbox project. 

Now we are going to upload our project and check the project meets Drupal's standards.

 First, we need to CD into the folder that contains our theme in this case. For my system this was:

cd /srv/http/breeze/2710867/breeze

Executing a "git status" will tell you if everything is okay. How we need to tell git to copy our files to Drupal's sandbox for the project.

git add -A (will commit all the files that are different from the destination)

git commit -m "original project upload" (this is a message assigned to our project to let people know what has changed between commits it is a good idea and always recommended that you attach a message to the commit)

git push -u origin 8.x-1.x

If you have not set up your SSHKey you will have to do so now to be able to upload your project and if you have not configured it so that you do not need to provide your password you will also need to provide your Drupal.org password for the upload.

Now that we have uploaded our project we should check the git status to verify, run a "git status" like we did earlier, this should return: "nothing to commit, working tree clean" message which means that everything has been copied to the Sandbox.

"nothing to commit, working tree clean" 

A message which means that everything has been copied to the Sandbox successfully. 

The first we should do now that we have our project setup as a Sandbox should be to check it against pareview.sh go to 

https://pareview.sh/

1

and enter the URL for the git repository you want to check. 

http://git.drupal.org/sandbox/[email protected]/YourProjectID.git

If you are lucky it will return that everything is okay. If not you will get a list of suggestions to change. Below is an example of what happened when I first submitted breeze to Drupal's pareview check. 

2

If you have not already you should consult Drupal's Project application checklist

Next, we will look at added all the details of our project to the project page and the review process. 


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Dec 26 2016
Dec 26
Contribute Your Code on Drupal.org, Part 4: Connecting to the Sandbox

Welcome to Part 4 of this series that shows how to start contributing modules and themes to Drupal.org.

In previous parts of this series, we talked about the different ways in which you can contribute to Drupal, setting up your project and configuring Git. 

Now we need to connect to our sandbox and test that it is working properly. To do this you need an SSH Key. If you're unsure about this, watch our class on SSH Keys

  • Go to Drupal.org and visit your account page.
  • Under the "Profile" submenu, you will see an option for "SSH Keys". Here you can see any existing keys and a link to Drupal's official help for setting up SSHKeys should you need extra support.

2 but 1

  • Go to Dashboard > Profile > Your Projects. You will see a list of your current Drupal.org projects.

1

Now move from the View page to the version control page and you should see instructions for using Git.

You should note that this page will change once you have successfully setup the project. Here are the commands I needed for the Breeze Project.

mkdir breeze 
cd breeze 
git init 
checkout -b 8.x-1.x 
echo "name = breeze " > breeze.info 
git add breeze.info git 
commit -m "Initial commit." git 
remote add origin [email protected]:sandbox/ YOURNAMEATDRUPAL/PROJECTNUMBER.git 
git push origin 8.x-1.x

Please note that you need to make the required changes to the above code to make it match your user and project so for clarity I will explain these commands.

  • mkdir breeze = This makes a folder for the project. In this case, the folder is called breeze
  • cd breeze = enter the folder
  • git init = initialize Git
  • git checkout -b 8.x-1.x = Create a branch. This is set to 7 by default, so if you want to do a Drupal 8 module you must change the branch name.
  • echo "name = breeze " > breeze.info = Create demo file called breeze.info.
  • git add breeze.info = Add the demo file to the queue to be adding to the project.
  • commit -m "Initial commit." = Add information regarding the change. This will be expected with all changes because it is a good idea to tell users what the update refers to.
  • remote add origin = Add the changes.
  • git push origin 8.x-1.x = Apply the changes to the repository at Drupal.org

If the above fails you do not have your Git setup correctly and it is likely a problem with the SSH Key.

If you have tried to add a key previously you may experience key lock. You can fix this by running the following command in your terminal.

export GIT_SSH_COMMAND="ssh -oKexAlgorithms=+diffie-hellman-group1-sha1"

Now refresh the version control page and you should see it has updated. A new range of Git instructions and advice has appeared.

3

Now we have successfully connected git to Drupal's Git repository you can start building your module If you want to verify the files from a different machine:

  • Install and configure Git
  • Run the Git access clone commands from the Sandbox Project page. This was the command for
  • This was the command for the Breeze project as an example for what you should be looking for "Git clone http://git.drupal.org/sandbox/ikit-claw/2710867.git breeze". The addition of the Breeze will download the file into a new folder called Breeze.
  • Locate the file on your local drive. For me, it was under C:\Users\ using windows.

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Dec 21 2016
Dec 21

Previously we talked about the different ways in which you can contribute to Drupal and setting up your project basics.

In this article, we'll get started with the git setup...

To follow this guide you will have to have a good understanding of git and how git works. Drupal.org prefers users to submit projects via git. They want you to build up a change log over time to show commitment and progress while working on a module for drupal.org.

Go to View Profile and select edit:

1

In the submenu, go to git access:

2

You must accept the access agreements with drupal.org in order to proceed:

3

Now we need to setup git. This will require the use of a command line terminal. I'm going to assume you know about git and have a working terminal if not git setup already. As I previously advised making sure you were familiar with Git. We have classes for it here.

In your terminal enter the following:

or if you prefer not to give your email:

We need to make some basic recommended git changes. Below is a list of commands that sets colors. This will make files in different stages show up in different colors to differentiate them.

  • git config --global user.name "your name"
  • git config --global color.status auto
  • git config --global color.branch auto
  • git config --global color.interactive auto
  • git config --global color.diff auto
  • git config --global push.default tracking
  • git config --list

config --list, should show all the configuration options you have set. You can also run git status to check everything is working fine. I recommend you do this now as you will not be able to proceed if git is not working.

Now if we go back to your Profile, Your Projects, you should see the Sandbox projects you have active. You will see below that we have made a Project called "Breeze a drupal 8 theme":

BreezeSandboxPreview


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Dec 20 2016
Dec 20

Recently, we wrote a guide on using Xampp with Drupal 8 for local development.

After reading the guide, one of our users asked,

How do you fix the cURL 60 SSL error that I keep getting?

The cURL SSL 60 error occurs when you're trying to install Drupal module by copying the FTP link from drupal.org into the "Add modules" screen.

1edited

This error is caused by the default SSL certificate provided by Xampp. 

We need to visit https://curl.haxx.se/ca/cacert.pem copy the page and save it as cacert.pem

Now we need to put this in our developer setup and tell Xampp where it is. We just need to add a line to our PHP.ini file so that it can locate the file. In PHP.ini : curl.cainfo = "D:\xampp\cacert.pem"

2

I will add it to the very bottom of the file.

3

Stop and then start the Apache service on Xammp. This should reload the PHP and you will now be able to install modules by copying the source link.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Dec 07 2016
Dec 07
Install Drupal with XAMPP on Windows

An OSTraining member asked how to setup Drupal with XAMPP so that they could work with multiple Drupal sites.

This tutorial will show you how, step-by-step.

Download XAMPP from Apache Friends.

Select the version you want to use:

01

Install it to a location of your choice. I have chosen "D:" for my installation.

Now that we have XAMPP installed, we need to configure it. Launch the application and go to config:

02

From here you should check that the:

  • Editor selected is the one you want to use. I use atom so you can see that I have selected atom.
  • Browser if left empty will use your default browser.

03

If you have another service installed that is using port 80, you will need to make a few changes to the "Service and Port Settings":

04

In order to use the service, update the Apache Main Port and, if you use Mercury, change Port 1.

Since I already have Port 80 in use, I have set the port to 8088:

05

Now XAMPP is configured but we also need to configure Apache to use the same settings.

Selecting Config:

06

We want to check the httpd.conf:

07

This will open the file in our editor.

We need to update lines 58 and 221, changing 80 to 8088.

Save and close the file.

Now you will need to close XAMPP and reopen it. 

Start Apache and MySQL

If you have successfully started the service(s), it should appear in green. If you get an error, it should be explained in the box below.

09

Now if we go to http://localhost:8088/ , you should see the default load screen for XAMPP:

10

Now check that PHPMyAdmin is also working -;http://localhost:8088/phpmyadmin/  

We need to make the empty database for the Drupal site.

Open the htdocs folder inside XAMPP either from your browser or use the Explorer button from the XAMPP control panel.

Drop your files into a new folder. In this case, I have made a new site and put it in a folder called Drupal8. To access this we need to go to http://localhost:8088/drupal8/core/install.php and the installation process will begin. To create a database you only need to give it a name and use root as the user. By default XAMPP does not set a password for PHPMyAdmin.

Drupal needs some PHP tweaks to run effectively. Go to the config button for Apache and select the PHP (php.ini) 

11

Update lines 368, 378, 389, 656, 1922

  • max_execution_time=600
  • max_input_time=600
  • memory_limit=512M
  • post_max_size=64M
  • upload_max_filesize=64M
  • mysql.connect_timeout=600

12


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Dec 02 2016
Dec 02
Beginners Guide to Contributing to Drupal : Prerequisites

Welcome to the second part of our series about how to contribute to Drupal.

Previously we covered signing up to Drupal and setting up our account, this time we will guide you in the creation of a new sandbox project. Let's start...

  • Go to drupal.org and login
  • Find "Your projects" tab, where you can add new projects such as modules and themes.

1

If you have existing Sandbox projects (modules or themes that are waiting to be approved) or Full Projects (already approved), you will see the "Add a new project" below them.

  • Click on "Add a new project" to create a sandbox project. 

2

  • Then choose what type of project we are going to make.

3

The next screens will ask for required information:

  • Name of the project
  • Maintenance status
  • Development status
  • Type a short description of the project

4

At this point we have the basic details of our sandbox project, and later we can connect to Git.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Nov 30 2016
Nov 30
Using Drupal Message Notifications

An OSTraining member asked us how to set up message notifications in Drupal. This allows you to control the messages sent to your site's users.

These messages are used for everything from letting authors know about comments on their articles, to notifying customers about purchases in Drupal Commerce.

Once you install the required modules, you will notice a working notification example already exists, making the setup process easier. 

For this tutorial, you will need to download, install and enable the following modules:

Go to modules and be sure to enable the "message notify example" as well:

1

  • Navigate back to the site. You should see in the Navigation tools a new option labeled as "message notify example".
  • Click on there to view the messages.

2

  • Let's add some content, so we can confirm is working.
  • Add a comment to the content.

3

You can view here the messages log.

4

Let's look at how it works. In your admin area, under "Structure" you can see a new tab called message types.

5

Here we can create message types, edit, or clone the existing example.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Nov 18 2016
Nov 18
Add static Google Maps to Drupal 8

In this tutorial, I will explain how to use the Drupal 8 Simple Google Maps module to add a map to your website.

Google has made some the recent changes to the API requests and this tutorial will clarify the process.

1

Now that we have the Simple Google Maps module installed, we need to add a field to the content. In this example, I will use the Article content type, but you can go ahead and use any content type.

  • Go to Structure > Content types > Article > Manage fields.
  • Add a field from the dropdown for new fields. Select the "Text (plain)" option.
  • Give a "Label" to the field.

2

On the manage display for the content type, we need to set the field format from Plain text to Google Map from single one line address.

3

Now we need to edit the default settings for the format. Select Include embedded static map 

4

To get a Google Map API key we need to go https://developers.google.com/maps/documentation/static-maps/ 

5

Create a project that the API will be attached to.

6

7

After you have Enabled the API, you will be given the code to paste into your Drupal Simple Google Maps module. Enter the API key and update the field settings, Save the content type.

Now that we have a key for Google Maps and the content type, we need to test that it works.

  • Go to Content > Add content > Article.
  • Add an address to the google address field we created.

8

  • Save the article.
  • You should see that the map is displayed as below.

9


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Nov 16 2016
Nov 16
Beginners Guide to Contributing to Drupal : Prerequisites

Welcome to the first part of our new series about contributing to Drupal for beginners.

We recently published our first theme to Drupal.org. That theme is called Breeze.

However, you don't have to be a designer or developer to contribute to Drupal. Here is a list of the many different ways you can contribute to Drupal:

We can't hope to cover all aspects of contributing at this time, so in this series, we will focus on the development aspect of contributing a Drupal theme. In general, the best way to give back is simply to share your knowledge of what you have learned and help others who are trying to achieve similar goals to your own. Network with like-minded Drupalers and you will benefit from the experience and knowledge they possess.

Creating an account on Drupal.org

Very little happens in the Drupal community that doesn't touch Drupal.org in some way. So let's get started by signing up at Drupal.org.

First, we need to open an account on Drupal.org, familiarize yourself with the tools you will need to make a module, and apply to have it hosted as a project on drupal.org.

  • Click "Create account":

1

  • Fill in the required details:

2

3.1

Now that we have opened an account, there are more profile details to complete.

  • Go to the "My Account" link in the top-right corner.
  • Click the "Profile" tab, then "View", then click "Edit".
  • Now you can expand your profile. It's important to Drupal that you provide information about yourself to verify your intent. If possible make sure to fill in the tabbed sections also:
    • Personal information
    • Drupal
    • Work

Getting Ready: Git, SSH Keys and a Code Editor

Before contributing code to Drupal.org, I would recommend that you familiarize yourself with Git and SSH keys.

Drupal uses its own Git system to manage the Drupal projects. So we will need to setup SSH Key and configure a Git client for use with Drupal.org.

I recommend our Git class if you are new to using Git, and we have a class on SSH Keys also.

We will also need a code editor - I recommend Atom. It is 100% free and comes with some useful tools that we can use to save time when working with our module. Atom is available for Linux, Mac, and Windows.

In Part 2 we will look at starting our project. We will be setting up our Git access to Drupal.org so we can start to use the Drupal Git system.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Nov 10 2016
Nov 10
How to Use the Drupal 8 Video Embed module

In this tutorial, I will explain how to use the Drupal 8 Video Embed module so that you can easily add YouTube videos to your Drupal 8 site.

1

Now we have the Video Embed module installed, we need to add a field to the content. In this example, I will use the Article content type, but you can go ahead and use any content type you like.

  • Go to Structure > Content types > Article > Manage fields.
  • Add a field from the dropdown for new fields. Select the "Video Embed" option. 
  • Give a "Label" to the field.

2

On the next couple of screens, you can choose field settings. I'm just going to skip of those settings and leave the default choices in place. When you finish saving, your field will show, as in the image below:

3

Now we need to test that the field is working.

  • Go to Content > Add content > Article.
  • Add the URL for a YouTube video.

4

  • Save the article.
  • You should see that the video is displayed as below.

5

If for some reason you can not get the YouTube to load that you have selected, it may be that the video has display and load restrictions set from YouTube. You can confirm this by testing other videos inside your article.

Video on using the Video Embed module

This video is taken from our "How to Build Drupal 8 Sites" class:

[embedded content]

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Nov 01 2016
Nov 01
Reusable Images and Files with Media Bundles in Drupal

This week, an OSTraining member asked us how they could re-use media in Drupal 8.

Using the Drupal media modules, I will explain how you can upload PDFs, images and other media that can be re-used on your site.

In this tutorial, we're going to rely on the Media module. 

Step #1. Install the modules

In order to get started, you must download, install and enable the following modules: 

Step #2. Create a media bundle

  • Go to Structure > Media Bundles > Add Media Bundle.
  • Give the bundle a name.
  • Leave the "Type provider" as "Generic media". This will allow us to work with any file type we choose.

1

Now we have created the bundle we need to add a field to it.

  • Edit the new bundle you created.
  • Go to Manage Fields > add field
  • Under reference, choose "File". 
  • Enter a label for your field and click "Save and continue"

2

  • Make sure "Enable Display field" is checked.
  • Make sure "Files displayed by default" is checked.
  • Set "Allowed number of values" to "Unlimited".

3

Now we can define which file types we want to be usable with this field. In the example, below the default is "text" and I have added PDF and JPG. 

4

Step #3. Attach the media bundle to a content type

We have a media bundle, we need to attach it to a content type. For this tutorial, I will add the bundle to the Basic page content type.

  • Go to Structure > Content types > Basic page > Manage fields
  • Click "Add field"
  • Under "Reference" choose "Other..."
  • Enter a label for your field and click "Save and continue"

5

  • On the next page, under "Type of item to reference", choose "Media"
  • Set "Allowed number of values" to "Unlimited".

8

  • Under "Bundles", select the media bundle that you created.

9

Step #4. Configure the media display

Now we need to configure the form display for the media.

  • Go to the "Manage Display" for Basic page.
  • Change the widget to "Inline entity form - Complex".
  • Select "Allow users to add new media entities".
  • Set "Entity browser" to "Test entity browser for files" select update.

12

Step #5. Create content

  • Go to Content > Add content > Basic page.
  • You can now see your new media field. You can choose "Add media" to upload new media or click "Select entities" to select existing media.

13

  • If you choose "Select entities", you will be able to browse through previously uploaded files.
  • Save and publish your content. Your chosen media will be attached to your content!

14


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Oct 24 2016
Oct 24
Upload PDF, Excel, Word Files to Drupal Content

An OSTraining member asked how he could attach files such as PDFs, Excel Documents, Word Documents to his content. 

There are many ways to do this in Drupal, but the easiest approach is to use the "File" field.

  • Login to your Drupal site.
  • Go to Structure > Content types.
  • You either add the field to an existing content type, or you can create a new one for specifically adding the files:

A Drupal content type for files

Now you add a field to the content type.

  • Click the blue "Add field" button.

Adding a Drupal field button

  • For the field type, choose "File".
  • Give the field a meaningful label such as "attached file".

Creating a Drupal file field

  • In the field settings, make sure the "Enable Display field" and "Fields displayed by default" options are selected:

Allowed file extensions in Drupal

It is important to make sure that you have added all the required file formats. In this example I will only be using PDF, but you can add as many file extensions you wish here. 

5

When it comes to the size of file uploads, the maximum upload size is controlled by your server. Often, servers do not allow file uploads larger than 8MB. You will need to check your PHP settings if you want to increase the size of files that can be uploaded.

Now you have configured the content type, you can upload the files.

  • Go to Content > Add content.
  • Upload a file using the field that you created.
  • Your file will show on the front of the site:

A file displayed on a Drupal site

You can also change the display of the file:

  • Go to Structure > Content types > Manage display.

Changing the display settings for a Drupal file


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Oct 18 2016
Oct 18
Drupal 8 Private Online Development

An OSTraining member asked us how to develop their Drupal 8 site online and also stop bots from crawling that site.

In this tutorial, I'm going to show you how to create a private, online Drupal 8 development environment. We're going to use 3 modules to secure our environment: RobotsTxt, Required Login and Shield.

#1. The RobotsTxt module

The module allows us to easily edit the robots.txt file, which controls where search engines access our site.

  • Download and enable RobotsTxt module
  • Select configure from the "Extend" menu, or you can configure RobotsTxt from the "Search and metadata" section.

config robots.txt

The configuration area gives us direct access to the Robots.txt file, and we can edit it here. If you want to disallow any crawling by search engines, we can either comment out the lines or remove them entirely. I have removed them for this example. 

configured2

Click the link at the top of the configuration page and it will take you to your robots.txt file. Here you can verify that the changes have been saved.

If the file does not match what you have saved, then you do not have sufficient permissions for Drupal to edit the original file. If this happens, you will have to manually delete or rename the original file so that the new one can be saved in its place.

You can verify with Google that your robots.txt by following these instructions.

#2. The Require Login module

Next, we'll set up the Require Login module to make sure no-one can access our site, even if they find it.

  • Download and enable Require Login module.
  • Go to Configuration > Require Login.
  • On this page, you can set the message that visitors will see. By default, the message is "You must login to use this site."
  • Click the "Save configuration" button.

require3

Open another window and visit your site. You should be automatically forced to go to the sign-in page.

verify require 4

Please note: that any links that lead to resources not contained within your site will still be clickable. If you really want to prevent anything from being visible, try the next module in our list ...

#3. The Shield Module

Now that we have configured RobotsTXT and Require Login, we will setup our third module: Shield. This module will block anyone from even seeing the site, let alone trying to login.

  • Download and enable Shield. This module requires Apache to be installed on the server.
  • Click "Configure" next to the module, as in the image below:

4.5

  • Select a username and password for access. 
  • Save the configuration.

shield5

  • Now when you visit your site, you'll see a login screen before you are even able to login.

7


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Oct 14 2016
Oct 14
Use the Drupal Hacked! module for peace of mind

Hacked! Is an extremely powerful Drupal module available in both Drupal 7 and 8. Hacked! allows you to check Drupal's modules and core against Drupal.org stored versions to make sure they have not been tampered with.

This module is a great way to ensure that the modules are safe and have not been modified.

It's worth noting that Hacked! will not check any code that does not exist on Drupal.org. However, as Aimee Maree points out, Hacked! can be very useful for finding when an errant developer has modified a module's code.

Here's how to get started:

configuring the Hacked module in Drupal

Next, you need to make sure you have the "Update Manager" module enabled as well.

Hacked! does have some very basic configuration options. You can include or exclude line ends, although I recommend leaving the setting as "Ignore line ends".

Drupal Hacked Module settings

How that we have Hacked! set up and configured we need to run Hacked! and make sure all the files match the files on Drupal.org

  • Go to Reports > Hacked.
  • Visiting this page will automatically run the check. 

image3

As you can see below I have a module that does not match the Drupal.org version. This is because I have manually tweaked the module files.

image4.1

One thing to note: if you are using a custom environment, you might also notice that Drupal core is flagged as changed. This is a false positive because of the way some virtual machines work. 

image4.2


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Sep 30 2016
Sep 30
The "Be Sure" Module Checks Drupal SEO

This week, an OSTraining member asked us about optimizing their Drupal 8 site. 

We have recommended some modules before, including the SEO Checklist module. However, there's an interesting option in Drupal 8, called the "Be Sure" module.

I'm going to explain how you can use Be Sure.

In order to get started, you must download, install and enable the Be Sure module. The core module will only give you the report page, so be sure to select the extra sub-module.

In this example, we'll select and install at least the SEO sub-module.

Enable the Be Sure module

  • Go to Reports > Be Sure.
  • You will see your SEO completion score being calculated automatically.

seoreport3

  • Select the SEO tab.
  • You will see that it is broken down into 4 categories. By default we are looking at the breakdown for page structure. 

seocategories4

  • There will be several recommended SEO modules. Each page links to the recommended project page.

before5

A note on Be Sure's recommendations

The module does have some useful advice, but some recommendations are out-of-date. This could be because the module was ported from Drupal 7. For example, the Page Title is no longer used on Drupal 8, and you would use Metatag instead.

However, you can easily edit the modules listed and create a checklist for your Drupal 8 site. 

Open the bs_seo.module and bs_seo.page_structure.inc files. To update the checklist, simply update the 3 references of it to another module

bs_seo.page_structure.inc line 12

 return Drupal::moduleHandler()->moduleExists('page_title'); 

bs_seo.module line 62 

 '!module' => Drupal::l('Page Title', Url::fromUri('https://www.drupal.org/project/page_title')), 

If you wanted to remove this entry we just have to delete the following lines of code:

bs_seo.page_structure.inc ... lines 7-13 
bs_seo.module ... lines 57-64

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Sep 30 2016
Sep 30

hosting recommendation

At OSTraining we often get asked to help our clients make the right choice for Drupal hosting.

You may often hear that Drupal hosting is expensive, but there are some very reliable and affordable options available.

We're going to give you an overview of the essential and recommended features to look for in a Drupal host.

Drupal 8 essential requirements

The server needs to meet these minium requirements:

  • PHP 5.5.9+ 
  • More than 64MB of memory.

When it comes to the database, you need one of these five choices:

  • MySQL 5.5.3
  • MariaDB 5.5.20
  • Percona Server 5.5.8 or higher with PDO and an InnoDB-compatible primary storage engine
  • PostgreSQL 9.1.2 or higher with PDO
  • SQLite 3.7.11 or higher

We have seen people use Drupal with other database, but often the result has been a lot of headaches and technical glitches.

Here are the official requirements on Drupal.org.

Drupal 8 recommended requirements

  • PHP 7. While it is true that it can run on lower versions, Drupal 8 definitely does run faster on PHP7
  • The ability to add and have access to Composer, Drush and Drupal Console.
  • Full access to the database for imports and exports. 
  • Command line access.
  • Git support or an alternative form of version control.
  • Staging is preferable so you can quickly and easily go from Dev to Testing and then Production environments.
  • Automated backup tools. This should be a core feature provided by the host.
  • 24/7 support. You need access to a team that knows Drupal well.

For these reasons, we find it hard to recommend hosting services such as Amazon and Azure. They are cheap, but lack the support and tools needed to provide a great Drupal hosting experience.

Here at OSTraining, we recommend Rochen, Inmotion, Pantheon and Acquia:

See our recommended Drupal hosts


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Sep 16 2016
Sep 16
How to Add Audio Files to Drupal 8 Sites

This week, an OSTraining member asked us about adding audio files to their Drupal 8 site.

Using the Drupal AudioField module, I will explain how you can display a simple HTML5 player for your site's audio files.

In order to get started, you must download, install and enable the AudioField module.

Adding AudioField to a content type

  • Go to Structure > Content type

Here we can add or modify an existing content type to add the Audio Field. 

  • Select +Add Field.

newcontenttype1

Configure the audio field.

  • In the "Add a new field" section, select "file".
  • Give the audio an appropriate label.
  • Select "save and continue".

addingtheaudiofield2

Configure the audio field settings.

  • On the field settings screen, you can specify the number of files you can attach. I'm going to leave this as its default.

audioconfig3

Setting the file types

We need to make sure that we define the file extensions we are going to use. This can be done in the allowed file extensions area. 

For my site, I removed the "txt" entry and added "mp3", because there is no need to allow text files to be uploaded to an audio attachment. 

Now we can edit the field. It's important to note here that PHP will directly affect the file size limit you can use. While Drupal can set a maximum size, that does not override your server's PHP setting that states how big the file can be.

audiofieldconfig4

Create the content

Now that we have created our new content type with audio field, we need to add the content and make sure it works.

You will notice that the first image doesn't work. In fact, it create an error because the file size was marginally too big, thus exceeding the filesize limit. The second image is how it should look if it is added successfully.

# Image 1, Error 500 the file was too large.

addingtheaudiocontent5

# Image 2, Note the blue audio title indicating that it has uploaded successfully. 

addingtheaudiocontent6

Enabling the HTML5 Audio Player

Now we have our content but still no audio player. To display the audioplayer that comes with the audiofield module, you need to go back to:

  • Structure > content types
  • Using the dropdown for the content type, select "Manage display"
  • Under "formats", change it from generic file to audio player. This will enable a widget for the field. By default an HTML5 player should be selected. You can check by clicking on the gear on the far right and should see this. 

checkingthehtml5playerisactive7

Save the display and go back to the content. You should have a nice clean audio player with a duration and volume controller.

final8


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Aug 19 2016
Aug 19
How to Use the Drupal Group Module

Group is an extremely powerful Drupal 8 module that allows you to create groups of users with shared content and permissions. 

It's easy to imagine that this module will replace Organic Groups, and become the default choice for social sites in Drupal 8.

In this tutorial, I'm going to explain how you can use the new Group module to organize your site's users.

Step #1. Setting up Groups

Here's how to get started:

  • Download and enable the Group module. Enable all 3 submodules.
  • You will see a message asking you to rebuild the permissions because Group does change the way that the permissions work. Click this link and rebuild the permissions.

rebuild permissions

Now we can start to set up our groups. One key thing to know about Group is that it has a group type feature. This is very similar to the relationship between content types and nodes.

  • Click the Groups icon in the admin menu.
  • Select the Group types tab:

Overview of the group types

In this example, we're going to be building a news site with different editor levels. We will be making one group for each team. 

  • Click "Add group type" and set up the groups, as in the image below:

groups-module

As with content types, you can create fields for the group types. For example, you could use these fields to create a profile of each team with its logo, location and more.

Step #2. Connect the group types to content

Now we're going to connect our groups to content types. This will allow us to use the Group module for extra permissions. In this example, I'm going to connect the Basic Pages content type to our groups.

  • From the Group Types page, go to the "Manage fields" dropdown and choose "Set available content": 

available-content

  • Click "Install" for "Group node (Basic page)".
  • You will now see a confirmation screen. Click "Install plugin".

plugin

Step #3. Add the groups

Now we can start to add the groups.

  • Go to Groups > Add group
  • Choose one of the group types you have set up.

content group type

  • Give the group a name. In this case, I'll call the group "Basic Page Writers".
  • Save the page and this will take you to the group summary page. From here you can view the group's details, members, and content.

setting up a basic page writers group

From this page, you can add some members to test the groups:

  • Click the "Members" tab.

The members tab in groups

  • Click "Add member".
  • You can now add existing users to this group:

add members to groups

You can also add some content from this main group page.

  • Click the "Node" tab.
  • Because we choose "Group node (Basic page)" in Step 2, you can now add basic page content to this group by clicking "Create node".

add nodes to groups

Find out more

This presentation on the Group module from DrupalCamp London is excellent:

[embedded content]

Summary

We've only just scratched the surface of the Group module in this tutorial. It's already one of the best modules I've seen for Drupal 8 and it's clearly a very strong option for anyone wanting group functionality. If you have any requests for further Group tutorials, please let us know in the comments.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Aug 03 2016
Aug 03
How to Validate Field Submissions in Drupal

As OSTraining member asked us how to validate fields in Drupal 8.

In this particular example, they wanted to make sure that every entry in a text field was unique. 

For this tutorial, you will need to download, install and enable the following modules.

Once those modules are enabled, here's how to set up the validation:

  • Go to Structure > Content types > Manage fields
  • Add a field. In the image below, we're using a Text (formatted) field:

Add a field in Drupal 8

Once you have saved the field, you can now add validation.

  • Go to Structure > Field validation.
  • Click "Add field validation rules".
  • Select the entity type and then content type with your field.
  • Click "Create new field validation rule set".

Add a field validation rule set in Drupal 8

  • Choose the field that you have created.
  • Choose your validation rules.

Add a field validation rule in Drupal 8

  • Add and update the field validation rules set.
  • I would advise you to also run cron on your site.
  • Now you can test the validation rule:

Testing your validated field in Drupal 8


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Aug 02 2016
Aug 02
How to Use Entity Print in Drupal 8

An OSTraining member asked us how to configure the Entity Print module with Drupal 8.

This module allows you to make a PDF version of your nodes

I would recommend that you install Entity Print using Drush, because you will need to install also need to install a composer package. This package contains the library to create PDFs.

Here are the Drush commands to use:

  • drush dl entity_print
  • drush en entity_print

This will install and enable the module for you. However, you will still need to install the Composer files.

You should note here that I already have Composer installed. You can check for Composer by using this command:

  • composer diagnose

This will tell you if you have Composer setup correctly and what steps to take if anything is out of place. For more help, check here

Now that we have verified that Composer is set up correctly, we can proceed. 

  • Go to Configuration > Entity Print.

entitycomposer

As you can see above, you 2 choices for which composer package to install. In this example, I'll choose dompdf. imply copy the line to your command line and the files should install automatically. 

  • Simply copy the Dompdf line to your command line and the files should install automatically. 
  • Refresh the page and you see the warning Yellow text has disappeared. You can install both options or a single one. 
  • Make sure the PDF Engine you installed is selected.
  • Save the configuration.

afterinstallation

Now let's make the Print feature accessible via the site: 

  • Go to Structure > Content type 
  • Select your content type dropdown and load the "Manage display" tab.
  • You should now see the disabled Entity Print field, as in the image below:

managedisplay

  • Drag the Entity Print field to the desired location in the layout.
  • Save your changes.
  • View the page and you should see something like this:

final

Congratulations, you have now installed Entity Print. Clicking the link should automatically start a PDF download.

Note: at this point, I did encounter an error because I was using PHP7. Everything worked correctly on PHP5.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Jul 26 2016
Jul 26
Access Readme Files in Drupal 8

In this tutorial, we will add a module that makes site maintainers' lives easier.

With Drupal 8 setups you are encouraged to use Composer, DrupalConsole and Drush because this is a faster and more effective way of adding components to your site. However, if you use those solutions, you can't access the readme file directly to read information about the module.

We will show you how to use the README module to access readme files directly from the Drupal 8 admin area.

  • Download, install and enable the README module.
  • Now return to the Extend page. Then expand the details of the module to see the Readme button next to Configure for the Readme module.

readme

  • Selecting the Readme option will open up the readme file within Drupal.

example

If you want to allow external access to the file you can go into configuration and set a security token to enable this feature.

All modules should contain a readme.txt or readme.md if you find yourself using a module that does not have a readme.md I am sure if you put in a request for it, then they will add it to the module.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Jul 22 2016
Jul 22
Drupal & Bitnami Multiple Environments

An OSTraining member asked how to setup a Bitnami environment that supports PHP 5.4.

The Bitnami Wamp stacks are available in 3 versions here:

  • 5.5.37
  • 5.6.23
  • 7.0.8

Each of these provides an environment that is preconfigured with a different version of PHP.

5.5.37 comes with PHP 5.5, which you should also use for 5.4 setups. The reason 5.4 is no longer available is because the changes between 5.5 and 5.4 are minimal. You can read more about the changes on the official change log here.

To install the Wamp stack, follow our installation guide.

If you already have a Bitnami Lamp setup, you can install it again. Just be sure to use a different directory location to your original installation. All Bitnami files are contained within these containers, so you can simply install the stack as many times as you like. 

When installing your second stack, you will have to use different ports for Apache, SSL and MySQL:

apache port

Once the installation is complete, you should see this screen:

installed

In this older version of the Bitnami stack, the environment doesn't include Drupal. So we will have to install Drupal now.

Download or copy your drupal site to Bitnami\wampstack-5.5.37-1\apache2\htdocs\drupal

Navigate to http://127.0.0.1:8080/drupal/ 

If you are doing a fresh install, you will see this screen:

drupal install

 You can access PHPMyAdmin from http://localhost:8080/phpmyadmin/


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Jul 18 2016
Jul 18
drupal bitnami

Bitnami is a software that allows you to install website applications such as Joomla, WordPress and of course Drupal.

In this tutorial, we will show you how to install Bitnami on Windows to create a Drupal 7 site.

Download and install Bitnami

  • As the first step, we need to download the Bitnami file from this page.
  • Once the download finished, execute the file by double-clicking.

Note: be sure to type everything in lowercase during the installation.

setup 1

You can skip the mail options or useGmailail address, and you will be able to get email alerts for your sites.

Your Drupal site is ready!

Once installation is complete, you can go to http://127.0.0.1/drupal to reach a working Drupal 7 site; http://127.0.0.1 is equivalent to your localhost address.

installed bitnami 2

Now we have the site all setup we can login to the Drupal site with the details we stated during installation.

For phpmyadmin, the defaults are root and the same password as you set for your Drupal installation.

About Drush

Drush comes pre installed from the windows menu, you will find an option to launch straight into your drush setup.

drush

To import an existing site you can simply go to this sub folder in the installation apps\drupal\htdocs and replace the folder content with your site.

Open up http://127.0.0.1/phpmyadmin/ and import your database into phpmyadmin.

Check the settings.php details are correct and that you have made any users that you require for the database.

Open up drush cd into apps\drupal\htdocs and use the drush status to confirm the installation.

final


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Jul 08 2016
Jul 08
Adding PDFs to Drupal

An OSTraining member asked us about attaching PDFs to a Drupal site.

It is possible to use the default File field and allow people to download the PDF. However, this member wanted visitors to read the PDF directly on the site.

Step #1. Install the PDF Reader module

For this tutorial, you will need the PDF Reader module.

Step #2. Add the field

Now that we have installed the module, we are going to add it to the Basic Page content type. You can add this to any content type following the same steps:

  • Go to Structure > Content types
  • Select "edit" next to Basic page

edit basic page

  • Select the manage fields tab
  • Give the new field a name. For simplicity, I am simply calling mine "PDF".
  • In Field Type column, select File.
  • Widget should then display File. Don't worry about this, we'll define the PDF in a moment.

adding the field

  • Save the changes.

Step #3. Configure the field

Now we need to configure the settings for our new field.

  • I'm going to check both options, so that you have the file displayed by default.
  • Save the settings.

Now we have to configure the manage field settings. We have to make one important change to this page. By default, the only file types allowed are txt files. We need to add PDF as an option.

  • Allowed file extensions

allowed file extentions

  • Go to manage display and update the PDF format from generic file to PDF Reader 
  • You will now see a cog with more advanced options if you want to tweak the display of the PDF. But for this I am just going to use the default display.
  • Save the changes to the managed display.

Step #4. Select the PDF

Now we have a basic page content type. It has an additional field option to add a PDF and display it with a PDF reader.

  • Create your content. Or edit it if you have added this to an existing content type.
  • Under body, you will see a PDF section just like below.

PDF selection

  • Select your file, press upload, and wait for the upload to finish.
  • Once uploaded scroll to the bottom and select Save.

Check the end result

You should now see your content with the PDF displayed. By default, the scroll option is to scroll down to continue reading. But, you can adjust that by returning to display settings and changing the cog options.

Below you see my working demo displaying Acquia Drupal 8 guide. 

final


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

View the discussion thread.

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web