Feb 23 2016
Feb 23

By Valentin Garcia 23 February 2016

Create URL Redirections in Drupal 7

Websites change frequently and you often need to move or change URLs. Whenever you make a change, you'll need to safely redirect the old URLs to the new URLs.

In this tutorial, I'm going to show you how to create 301 and 302 redirects for your Drupal site. 

Step #1. Install and enable Redirect module

Download the Redirect module from this page.

drupal redirections

  • Install and enable the module.

Step #2. Create an internal redirect

  • Go to Configuration
  • Look in the Search and metadata section for "URL redirects".

drupal redirections

  • Click "Add redirect".

drupal redirections

Fill in the settings:

  • Enter the old URL into the From field
  • Enter the new URL into the To field
  • Leave the Enabled as checked.

drupal redirections

Optionally, inside "Advanced options", change the redirect status according to your needs.

The most common are:

  • Default (301): for permanent redirects. For SEO purposes, to tell Google to index the new URL.
  • 302 Found: for temporary redirects

drupal redirections

  • Click "Save" when you're done.

Step #4. Create an external redirect

You can also create redirects pointing outside your site.

For example, I want to use the link www.mysite.any/go-out to redirect to www.google.com with the settings below:

drupal redirections

Step #5. Test the redirect

Go to your www.mysite.any/old-url to confirm is indeed redirecting to www.mysite.any/new-url.

Step #6. Number of times a redirect is being used

You can track the number of times a redirect is being used, by checking the statistics in "Count" column from the URL redirects list:

drupal redirections


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Feb 22 2016
Feb 22
Using Entity Reference Fields in Drupal Views

An OSTraining member came to us with a question. The member had two content types that were linked by an Entity Reference field. They wanted to use Views to automatically show import from one content type to another.

In this tutorial, I'm going to show you how to use Entity Reference fields inside Views.

The Entity Reference set-up

Here's the set up we're going to use, with two content types:

2 Drupal content types

Here we have the Animal content type:

A Drupal content type that is targeted with an Entity Reference

And here we have an example of the People content type. "Favorite Animal" is an Entity Reference field linking to the Animal content type:

A Drupal content type that is using an Entity Reference field

Creating the View

  • Go to Structure > Views > Add new view.
  • Create a View to show Content of the type People. We choose People because that is the key content on display - the favorite animal is a secondary piece of information.
Creating a view using Entity Reference fields
  • Under the Advanced tab, click "Add" next to Relationships:
Adding an Entity Reference Relationship in Views
  • Choose "Entity Reference: Referenced Entity".
  • Click Apply (All displays) twice.
Choosing Entity Reference: Referenced Entity Relationships
  • On the left-hand side of the screen, click "Add" next to Fields:
Adding an Entity Reference field in Views
  • You should see that all the field from the Animal content type are now available. For example, here's the Image that is attached to the Animal content type:
Choosing an Entity Reference field in Views
  • Choose the Relationship that you created earlier in this process:
Choosing an Relationship inside an Entity Reference field in Views

Save your view and you'll see that you are automatically pulling in data, via Entity Reference, from the other content type:

A Drupal view using an Entity Reference field

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


View the discussion thread.

blog comments powered by DISQUS back to top
Feb 19 2016
Feb 19

By Valentin Garcia 19 February 2016

Use Firebug Console to Catch Errors

We've regularly written about the Firebug add-on for Firebox because it is a great way to troubleshoot CSS issues.

Did you know that Firebug can also help to detect Javascript errors that may break your site?

In this post, I'll share with you how to catch errors by using Firebug's console feature. 

Step #1. Install Firebug

We have a tutorial to help you to install Firebug addon in Firefox browser.

Step #2. Activate Firebug console

  • Go to your website.
  • Activate Firebug by clicking the "bug" icon.

The Firebug icon in Firefox

  • Click the "Console" tab (mine says "Consola", as I'm using the Spanish version)

The console tab in Firebug in Firefox

Step #2. Catch errors

  • Reload the page by clicking the "refresh" icon in the address bar:

Refreshing a page in Firefox

  • Wait until the page finishes loading, and see if any errors come up in the Console area.

The results showing in the Firebug Console

By default, the console will display a lot of information, and not all of the results will be errors. You may see process details, log details, warnings and errors.

Pay special attention to the information that is marked red. You can filter down and only see errors by doing click the "Errors" tab.

The error tab in the Firebug Console

Step #3. Fix the errors.

Firefox Console will work with WordPress, Drupal, Joomla or any other software you use. The errors you found in the previous step will be very helpful to debug problems in your website.

Report the errors to your developer in order to get them fixed.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Feb 18 2016
Feb 18
Columns with CSS using column-count

In previous tutorials, we've explained that it can be dangerous to used HTML widths for your layout.

Fortunately, CSS is powerful enough to mimic any old-fashioned HTML. For example, you can easily create columns in CSS using the column-count property. This can be very useful for whole site layouts, but also to split long texts into columns.

In this short tutorial, I'll show you how to create columns using column-count.

Step #1. The HTML

Create an HTML layout using the code below. Replace "Your text goes here" with your text. This could go into a Drupal node, a WordPress post, a Joomla article or anywhere else you need it.

<div class="content"> 
    Your text goes here
</div>

Note: I'm using the class "content" in the div. We'll use this to create the CSS selector in the next step.

Step #2. The CSS

In your CSS file, add the following code. This code will split the text into 2 columns:

.content {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2; 
}

The prefixes in the CSS above are designed to add support for specific browsers:

  • -webkit- for Chrome, Safari and Opera
  • -moz- for Firefox

Step #3. Gap between columns

You can define the spacing between your columns by adding the "column-gap" property.

.content {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2; 
    column-gap: 60px;
    -moz-column-gap: 60px;
    -webkit-column-gap: 60px;
}

Change 60px to customize the separation.

Step #4. The end result

This is how our text will look:

css columns

Click here to see our example in action

Supported browsers

See which browsers support column-count.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Feb 18 2016
Feb 18

By Steve Burge 17 February 2016

Join the Support Team at OSTraining

Come and join the Support team here at OSTraining

As our company grows, we have an increasing demand for support.

If you're a kind-hearted, helpful person and know your way around WordPress and Drupal, we'd love to hear from you.

Here's an overview of what we can offer you and what we're looking for in a support team member:

What we offer

  • A competitive salary plus benefits.
  • A great team to work with. You'll be working alongside friendly, talented and experienced developers.
  • Limited working hours. We almost never ask our guys to work more than 40 hours per week.

What we're looking for

  • You have a broad experience in WordPress, Drupal. Knowledge of other platforms such as Joomla and Magento is helpful, but we have those covered by other team members.
  • You have a warm and understanding attitude when dealing with customers.
  • Reliability. We have specific support hours for our customers, from about 9 to 5, New York time..
  • You have good English skills and can write blog posts for customers.

Some things you don't need

  • For this role, you don't need to be an expert immediately. After all, we can teach you.
  • You don't need to have been in support before. Again, we can help you get up to speed.
  • You don't have live in the USA, or be a native English speaker. We have strong Spanish and Portuguese-speaking team.

How to apply

We'd love to have you join our support team. Please tell us a little more about you ...


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Feb 17 2016
Feb 17
How to Change the Main Language of a Drupal site

One OSTraining member had set up a site in English and wanted to move everything over to their native language.

In this tutorial, I'll show you how to completely change the main language of a Drupal 7 site.

I'm going to use the example of an English-language site that needs to be changed to Spanish.

First, go to "Modules" and enable the Locale module:

Enable the Locale module in Drupal
  • Go to Configuration > Languages.
  • You'll see the main language which is currently enabled on the site.
Add a language to a Drupal site
  • Click the "Add language" link.
  • Choose your language from "Language name".
  • Click the "Add language" button.
Adding Spanish language to a Drupal site

You'll now see your Language has been added:

English and Spanish on a Drupal site
  • Check the "Default" button next to your new language.
  • Click "Save configuration".
Change the default language on a Drupal site
  • Go to https://localize.drupal.org to find a translation package to download. I want the Spanish version of Drupal 7 so I'll visit this URL.
  • Click to download the language file you need. I've highlighted the Drupal 7 download:
Downloading the translation files for a Drupal site
  • Back in your Drupal site, go to Configuration > Translate interface.
  • Click "Choose File" and import the file you just downloaded from Drupal.org.
  • Make sure to choose the correct "Import into" option:
Importing the translation files for a Drupal site
  • You will get a message saying that your import was successful:
A success message after importing a Drupal translation
  • Refresh your page and your entire site has been translated:
Your Drupal site, now in Spanish

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


View the discussion thread.

blog comments powered by DISQUS back to top
Feb 15 2016
Feb 15

By Steve Burge 15 February 2016

Drupal 8: Internal Page Cache and Internal Dynamic Page Cache

Drupal 8 offers major advances over Drupal 7 in many areas, including caching. 

In Drupal 8, there are now two cache modules: Internal Page Cache and Internal Dynamic Page Cache. Do those two names sound confusingly similar? In that case, this blog post is for you.

In these three videos, Robert introduces us to how Drupal 8's core caching systems work.

Drupal 8 core caching modules

  • The Internal Page Cache module: this caches pages for anonymous users in the database. Pages requested by anonymous users are stored the first time they are requested and then are reused for future visitors.
  • The Internal Dynamic Page Cache module: This is a key feature that Drupal 7 did not have. Unlike the Internal Page module, the Dynamic Page module aims to speed up the site for both anonymous and logged-in users. Wim Leers has a great overview of how and why the Dynamic Page module works.

[embedded content]

Drupal 8 Performance settings

In this video, Robert explains the performance settings in Drupal 8's configuration:

  • Caching: this controls the lifetime of the Internal Page Cache module.
  • Bandwidth optimization: this controls the aggregation of your CSS and Javascript files.

[embedded content]

How to disable the Drupal 8 cache

If you're working on the development of a site, and particularly if you're working on a theme or module, caching can become a pain. In this video, you'll see how to disable the cache for development sites.

[embedded content]


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Feb 12 2016
Feb 12

By Steve Burge 12 February 2016

Show Drupal Content Inside a Pop-up Window

One OSTraining member wanted to create a series of disclaimers for external links.

They wanted a text disclaimer to appear inside a pop-up after a visitor clicked a link.

In this tutorial, I'm going to show you how to make that happen ...

  • Install Colorbox as explained in our Colorbox tutorial.
  • Install the Colorbox Node module.
  • Go to Configuration > Colorbox and choose your settings. Make sure the first two boxes are checked:
Drupal colorbox admin settings

I'm going to use two content types her:

  • "Article" will contain the information with external links.
  • "Disclaimer" will contain the disclaimers!
Content types for use with colorbox pop-ups

First, I set up the disclaimer. This is going to be a very basic warning message.

One thing to note: after saving this disclaimer, be sure to record the URL.

Creating content to put inside a colorbox pop-up

Now I create the Article. Here's an example of the content in the image below. I use class="colorbox-node" to create the pop-up. I can also set the height and width using width=500&height=500.

Creating a colorbox pop-up link

The next image shows the end result of the content above:

A link that will show a Colorbox pop-up

And if I click the link, I will see Drupal content inside a pop-up box:

A colorbox pop-up window in action

Possible improvements

In the pop-up shown above, the "Disclaimer" title is clickable. You can hide it using the Exclude Node Title module.

if you use the approach shown above, you may want to stop the disclaimers from appearing in your site's search results. You can use the Search Restrict module. Use a module like Node noindex to hide it from Google search results.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Feb 12 2016
Feb 12

By Valentin Garcia 12 February 2016

How to Get the Link to a Tab in Drupal

One OSTraining member asked for a way to get the direct link to a tab while using the Quick Tabs module for Drupal.

He wanted to figure out the URL to open the page so that his selected tab always shows first.

In this short tutorial, I'll tell you how to do it.

Step #1. Get the link of the tab

In my example, I want to find out the direct link of the second tab with the label, "Education".

  • Right click on the tab.
  • Click "Copy link address".
1

The copied link will look like this:

http://www.yoursite.any/something#tabs-0-64074600-1455291916-2

In this example, "#tabs-0-64074600-1455291916-2" works as selector for this particular tab.

Step #2. Use the link

  • Test the link by pasting it into a new browser tab.
  • Press the "Enter" key.
2

The page will load with the selected tab open.

3

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Feb 11 2016
Feb 11
CSS Selectors to Customize Your Site's Design

Many OSTraining members want to update elements of their site's design and need to use custom CSS.

The key is the CSS selector, which allows you to target specific elements such as a link, an image or a div.

In this tutorial, I'm going to show you which type of selectors to use, and how to find them with Firebug.

What is a CSS selector?

In CSS, a selector is a pattern to target specific elements from the HTML. Once we have defined a specific element, we can than add CSS properties such as color, font-family, height and width.

In short, CSS selectors allow us to define the design for every HTML element on a website.

I'm going explain how to customize your website using these:

  • class
  • id
  • tag name
  • compound

Learn how to use Firebug or Web Developer

It will really help you if you learn how to use the Firebug addon for Firefox, or another similar tool such as Web Developer. These are invaluable tools for debugging CSS issues.

We have a tutorial to help you get started with Firebug. We also have a complete videos class on the Web Developer browser add-on.

Use a class as selector to customize an element

Class selectors uses a dot (.) at the beginning: .some-class-name

Let's show you a use case. In the example below, I want to change the font-size and line spacing for this text. This is a Joomla site, but the techniques I'll show you will work on WordPress, Drupal or another software.

css selectors firebug

With Firebug, I look into the HTML to find out which classes are used for this text. In my example I find more than one class added. I will use one of them: "uk-heading-large".

css selectors firebug

On the right side, I can experiment with the CSS properties. I can change font-size and line-height to make the text smaller and reduce the spacing between lines.

css selectors firebug

… and this is how the element would change on the screen:

css selectors firebug
.uk-heading-large {
    font-size: 28px;
    line-height: 30px;
}

I upload the code above into one of my site's CSS files to make the changes live.

Remember that playing with Firebug give us only a preview of our customizations; it doesn't actually save those changes.

Use an id as selector to customize an element

Id selectors uses a hashtag (#) at the beginning, as in this example: #some-id-name

In the image below, I want to change the background image of the cute couple, and replace it with a solid color:

css selectors firebug

I look into the HTML to find out which ID the container is using. In my example, the ID is "slideshow-home".

css selectors firebug

I play with the CSS properties through Firebug to set my custom background:

css selectors firebug

… and this is how the element would look after that:

css selectors firebug
#slideshow-home {
    background: #ed8034 none repeat scroll 0 0;
}

I upload the code above into one of my site's CSS files to make the changes live.

Note, I only added the CSS property that I customized, which is background. I did not include height.

Use a tag as selector to customize an element

Tag selectors can be any HTML tag, such as body, a, p, div, section or span.

In this example, I need to underline all the blue links:

css selectors firebug

I play with the CSS properties to define the text-decoration property for the a tag, which is in charge of links.

css selectors firebug

… and this is how the element would look after that change:

css selectors firebug
a {
    text-decoration: underline;
}

I upload the code into one of my site's CSS files.

Note, I only added the CSS property I customized and I skipped the rest.

Use a compound selector to customize an element

A compound selector can mix the previous 3 types using more than one class, ID and/or tag. What’s the advantage of it? This type of selector has a higher priority than the other methods.

A few examples:

  • #some-id .some-class has higher priority over .some-class
  • #some-id .some-class div has higher priority over .some-class div

I want to set a different spacing and background for a block of content, without messing with the others that have a similar structure:

css selectors firebug

Build the compound selector by checking the HTML structure that wraps the element you want to customize:

css selectors firebug

In the image above, you can see I point to two classes: "tm-block-black" and "block-one". I want to customize the element that owns "block-one".

This is my compound selector:

.tm-block-black .block-one

Adding "tm-block-black" to the selector will increase the changes to override the design due it's more specific than just using "block-one" class.

This is how the element would look after the change:

css selectors firebug
.tm-block-black .block-one {
    padding: 20px;
    background: rgba(0,0,0,0.3);
}

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Feb 10 2016
Feb 10

By Steve Burge 10 February 2016

Colorbox Drupal

One thing that all site builders need to think about is image size.

The size of your images can have an enormous impact on your site's speed and it's performance on mobile devices. Fortunately, the Drupal 8 core provides tools for controlling and optimizing the size of your images.

In these two videos, Robert shows you how to use Drupal 8 image styles and image settings.

In this first video, we take a look at image styles in Drupal 8. Robert explains Scale, Crop, Resize and other tools that you can use to create images that are consistent, stylish and fast-loading.

In this second video, we show you how to control the size of your uploaded images. Did you know that Drupal ships with image manipulation options that allow you to control the quality of your images?


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Feb 08 2016
Feb 08

This week marks six years since we launched online training here at OSTraining. And, it's now nearly ten years since we started training people to use open source software.

It's humbling to think that some of you have been keeping us in business since 2006.

If you're a business owner, you've seen both crazy years and quiet years. 2015 was a crazy year for us and filled with major turning points. So many in fact, that it took me until February to write this report!

Here's a look back at OSTraining in 2015 and a look forward to 2016.

Turning point #1: The end of live training

In April, we made one of the biggest changes in our company's history. It was also one of the most inevitable. We decided to end our live, public classes.

We started holding live classes by accident in 2008. Seven years later, we had run nearly 1,000 courses from Alaska to England and from California to Austria. Beginning in 2010, we added online training, but even in 2014, live classes were 50% of our revenues.

Many of you still love to learn in the classroom, but I'm afraid, the writing is on the wall for most in-person training. Everyone has become far more comfortable learning online. Video streaming technology is faster and more reliable than a few years ago. And, there's no denying the economics: live events cost hundreds of dollars to attend, whereas online training often costs $15 to $50 per month.

  • A big thank you: Rod, our Director of Training, worked his Canadian-American-Australian butt off in 2015 to increase our video production. 
  • Looking forward: We still do private classes for large organizations, and training at conferences like DrupalCon, Joomla Day Florida, and Drupal Camp Florida, but we're an online company now. 

Turning point #2: Rebuilding all our major software

Another hard decision we made in 2015 was to pay down a lot of technical debt. Our current site has been running in one form or another for almost ten years. Every time we tried to innovate, we risked breaking old software.

In March, we rebuilt our billing and subscription system and then released it as the open source project, Simple Renew.

OSCampus logo

This weekend, we'll hopefully relaunch our learning management system. The project has taken about ten months, but we've completely re-written the software that powers our videos, lessons, quizzes and certificates. This new software is called "OSCampus", and we're going to open source it also. OSCampus is a Learning Management System that is designed specifically for video training.

As an OSTraining member, you won't notice many changes this weekend, but over the next few weeks, the new software will allow us to aggressively roll out a whole host of new features.

  • A big thank you: Our lead developer, Bill, brilliantly led the re-write of both our subscription and learning systems.
  • Looking forward: We aim to roll out a ton of improvements to OSTraining, including a redesign and many new features.

Turning point #3: Partnerships

In April, we launched a Kickstarter to fund free Drupal 8 videos. We ended up raising over $27,000 thanks to individual supporters, plus partner organizations such as Acquia, InMotion Hosting, Glowhost, Commercial Progression, and the Drupal Association.

This decision frightened our team more than any other in 2015. Were we crazy to give away 200 Drupal videos for free, including some of our most popular classes?

In the end, it worked out well. The Drupal 8 Beginner class has over 140,000 views on YouTube in the past two months, and it's increasing in popularity every week as more people realize it's available. You may have noticed that many recent Drupal classes have Acquia's logo. That's the result of a more comprehensive partnership with Acquia that has allowed both of us to ramp up our production of Drupal training.

  • A big thank you: Nancy and Eddie, who made a great case for OSTraining to people who mattered.
  • Looking forward: We'll release a lot more Drupal training thanks to our partnerships. Also, look out for more partnerships, starting early this year.

[embedded content]

Turning point #4: Live Chat support

You always have to judge your prices and service against the market leader. If you're in e-commerce, everyone compares you to Amazon. If you're in online training, everyone compares you to Lynda, especially now that they have access to Linkedin's spamming email marketing juggernaut.

So, we sat down and asked ourselves, "how can we stand out from Lynda?".

Our answer was to provide even better support. The number one reason that people leave us for Lynda is the quantity of the training on offer over there. The number one reason that people leave Lynda for us is the support. If you get stuck watching Lynda videos, you have nowhere to turn. 

So in July, our Pro members gained access to Live Chat support. You can log in and ask anything about WordPress, Drupal, and Joomla. Our members who use it, love it.

One obstacle was that Live Chat is potentially a lot more work than providing help via support tickets. Plus, many start-ups try to avoid providing support because it's just not cheap or efficient. Sometimes, it's worth doing things that don't scale.

  • A big thank you: Nick and Valentin led our support team and did an outstanding job.
  • Looking forward: We hope to get even more personal in 2016, with even better support, plus opportunities for internships and career development.
live chat at OSTraining

Turning point #5: A new product business

For a long time, we had several Joomla code projects hanging around OSTraining. At the end of 2014, we moved them all to Alledia.com and started building a product business there.

In retrospect, we could have picked a less busy year to tackle this challenge! We ended the year with 12 Joomla extensions at Alledia, including four new releases:

Growth was not quick or easy, but it started to accelerate in the second half of the year. The image below shows revenues at Alledia.com. They were six times greater than revenues in January 2016 than in January 2015.

  • A big thank you: Anderson, our lead developer at Alledia, juggled 12 extensions on top of an already heavy workload, always without losing his cool and his smile.
  • Looking forward: We plan to add two more major Joomla extensions and also enter the WordPress plugin market. 
alledia revenue

Thanks

Thanks to you also. Thank you for reading our annual report all the way to the end. Thank you, whether you've been a customer since 2006, or have just started following us recently. Your support allows us to keep this kick-ass team together and we aim to repay your faith in 2016 by producing more training and products that you love.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Feb 08 2016
Feb 08

By Steve Burge 08 February 2016

New Video Class: Drupal 7 Module Development

This week's new video class is "Drupal 7 Module Development".

This massive new course is 57 videos long and covers everything you need to know when starting to create Drupal modules.

This class was created in partnership with Acquia, and you'll learn all the best practices from Drupal's top company. 

You'll learn how to leverage Drupal's API to create custom modules. You'll learn by developing several modules and using step-by-step instructions to hook into Drupal's existing functionality.

Start a free trial!

Intro Video for Drupal 7 Module Development

Outline of the Drupal 7 Module Development Class

Intro

  • Introduction to Module Development
  • What You'll Need
  • Dev Desktop
  • Drush
  • Resources

Drupal Framework

  • Modules and the Drupal Framework
  • Introducing Hooks
  • The Hook System

First Module

  • Creating Your First Module
  • Creating My Module, Part 1
  • Creating My Module, Part 2
  • Add a Page with Menu Hook
  • Page Callbacks
  • Hook Form Alter
  • Hook Form Alter in Action
  • My Module Summary

Red Link Module

  • Creating the Red Link Module
  • Set up the Red Link Module
  • Building Arrays
  • Final Red Link Features
  • Coding Standards

Mailfish Module

  • ntroduction to the Mailfish Module
  • Set up the Mailfish Module

Setting up the Form

  • Creating the Subscribe Tab
  • Drupal Form API
  • Email Submission Form
  • Update Callback in the Menu
  • Form Validation
  • Validation Handler
  • Form Submission
  • Form Submission Handler

Database Functionality

  • The Install File
  • Creating the Install File
  • Add Signups to the Database
  • Check for Previous Signups

Permissions

  • Permissions
  • Implementing Permissions

The Block System

  • Block and Theme Systems
  • Placing Mailfish in a Block
  • Passing Node ID to the Block
  • Theming the Block Display
  • Creating a Template

Administration Pages

  • Mailfish Administrative Pages
  • Admin Hook Menu
  • Mailfish.admin.inc File
  • Reporting Results
  • Signups Report

Altering Node Form

  • Altering Node Form
  • Altering the Node Edit Form
  • Database Wrapper Functions
  • Creating Database Functions
  • Node Operations
  • Node Operations Code
  • Conditional Display

Testing

  • Simpletest: Automated Testing
  • Setting up Automated Testing
  • Summary

How to Take the Drupal 7 Module Development Class

If you're already an OSTraining member, you can click here to take the Drupal 7 Module Development Class.

Start a free trial!

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Feb 08 2016
Feb 08

By Steve Burge 08 February 2016

Update Drupal CoreThis week's Drupal class is essential for anyone who manages a Drupal website.

In this class, Robert demonstrates how to properly update Drupal 8.

Since there is no one click update for the Drupal core, it is essential that anyone who manages a Drupal site learns to make the updates with confidence. We'll also show you how to successfully update Drupal 8 themes and modules.

Start a free trial!

Intro Video for Updating Drupal 8 Sites

Outline of the Updating Drupal 8 Sites Class

  • Introduction & Setup 
  • Automatic Updates  
  • Manually Updating Modules 
  • Manually Updating Themes  
  • Updating Drupal Core
  • Updating Drupal 8 Quiz

How to Take the Updating Drupal 8 Sites Class

If you're already an OSTraining member, you can click here to take the Updating Drupal 8 Sites Class.

Start a free trial!

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Feb 03 2016
Feb 03

By Steve Burge 02 February 2016

Drupal Security Review Module

There are two really useful checklist modules in Drupal:

In this video, taken from our Drupal 7 Security class, Robert introduces the Security Review module. He shows you how to fix some of the most common errors found by the module, such as "Base URL is not set in settings.php" and "Some files and directories in your install are writable". Even if you think your site is safe, give the Security Review module and you may well find something you missed.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Feb 02 2016
Feb 02

By Steve Burge 01 February 2016

students testimonial

When you give personalized, hand-holding mentoring and support, you get to know some of your students really well. I remember when Doug Beale came to OSTraining in 2012 and I started helping him with his first sites. Anyone could have seen that Doug was getting the most out of our training because he was working hard to master his web design skills.

When Doug contacted me in late 2015 to proudly tell me that thanks to our training, he was now able to live from the revenue his online businesses generate, I felt so proud of him. He literally came to us not knowing the first thing about web design and now he was proof that one can change careers in life and become a successful web entrepreneur.

We felt Doug's story is so transformational, that we created this infographic to help tell his story so that others can also become inspired by him.

infographic from Doug, a Joomla and Drupal student

Jan 30 2016
Jan 30
Backup and Restore a Drupal 8 Site

Drupal 8 is here and ready to use right now.

However, not all of the contributed modules are available yet. That includes the Backup and Migrate module, which was the most popular way to backup and restore Drupal 7 sites.

These four videos, sponsored by the excellent team at InMotion Hosting, offer a backup and restore solution that you can use with Drupal 8 today.

Step 1. Backup the Drupal 8 Files

[embedded content]

Step 2. Backup the Drupal 8 Database

[embedded content]

Step 3. Backup Storage

[embedded content]

Step 4. Restoring your Drupal 8 Site

[embedded content]


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


View the discussion thread.

blog comments powered by DISQUS back to top
Jan 27 2016
Jan 27

By Steve Burge 26 January 2016

Drupal 7 Layout and Theming

This week's new video class is "Drupal 7 Layout and Theming".

This massive new class is 56 videos long and covers everything you need to know when starting to design Drupal sites.

This class was created in partnership with Acquia, and you'll learn all the best practices from Drupal's top company. You'll learn a variety of approaches to make dynamic layouts in Drupal, and how to choose the right approach for your site. You'll also learn how to get more control over the look and feel by creating a custom theme in Drupal.

By the end of the class, you'll know how to create and configure Drupal sites that are responsive and beautiful.

Start a free trial!

Intro Video for Drupal 7 Layout and Theming

Outline of the Drupal 7 Layout and Theming Class

Introduction

  • Welcome
  • What You Need
  • Your Learning Environment
  • Your Site for This Class

Fundamentals

  • Drupal Theming Fundamentals
  • Types of Themes
  • Finding and Evaluating Themes
  • Installing New Themes
  • Making a Simple Theme
  • Adding Screenshots
  • Declaring Regions
  • Adding Features to Your Theme
  • Adding CSS
  • Adding Javascript
  • Adding CSS and Images
  • Anatomy of a Drupal Page

Customizing

  • Customizing Your Theme
  • Coding Standards
  • Template File Overrides
  • Overriding the Core node.tpl.php
  • Theme Developer Module
  • Overrides by ID and Content Type
  • Adding Custom Regions
  • Overriding the Maintenance Page
  • Basic Structures in PHP
  • Conditional Statements
  • Overriding Theme Functions
  • Adding a Variable Introduction to Arrays

Subthemes

  • Base Themes and Subtheming
  • Best Practices for Subtheming
  • Using a Zen Subtheme
  • Project Pages on Drupal.org
  • Importing a Distribution
  • Creating a Zen Subtheme
  • Theme Settings
  • Generating Test Content
  • Creating Custom CSS Files
  • Markup and Styles
  • Custom Homepage Layout
  • Challenging Designs
  • Adapting CSS for a Design

Responsive

  • Introduction to Responsive Drupal
  • Responsive Menus Module
  • Responsive Views
  • Responsive Slideshows
  • Responsive Images
  • Responsive Videos

Configuration

  • Layout via Configuration
  • Site Building Tips
  • Contributed Modules for Layout
  • Display Suite
  • Panels and Custom Layouts
  • Context
  • Final Exercise

How to Take the Drupal 7 Layout and Theming Class

If you're already an OSTraining member, you can click here to take the Drupal 7 Layout and Theming Class.

Start a free trial!

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 27 2016
Jan 27

By Steve Burge 26 January 2016

Video: Train Your Staff for Drupal 8

In mid-January we held a webinar with Acquia, explaining how to train your team on Drupal 8.

This was an interesting webinar to run because it ended up being pretty different from our planning. 

First, we were able to make a very cool surprise announcement. Watch to the end of the webinar for the big reveal.

Second when scheduling the webinar, we intended to explain many of Drupal 8 training resources available. However, by mid-January, many contributed Drupal 8 modules didn't have stable releases and so most D8 training wasn't ready. So, in the webinar, we explained when Drupal 8 training would be available.

From the webinar, here's an overview of when several important modules will be stable:

  • Calendar: Next release on January 25. Aiming for a stable release in Q1.
  • Views Slideshow: Alpha release.
  • Webform: No release. Possibly replaced by Contact in core.
  • Rules: Pre-release. Funded by Acquia and aiming for a February release.
  • Media: Lots of sprints and the goal is a Q1 release.
  • Workbench: A Beta version due on January 25.
  • Pathauto: Aiming for a stable release on February 15.
  • Token: Aiming for a stable release in Q1.
  • Search API: Aiming for a stable release on March 7.
  • Scheduler: Aiming for a stable release on January 27.
  • Panels: Beta. Aiming for a stable release on February 16.
  • Panelizer: In progress. Aiming for a stable release on February 16.
  • Display Suite: Ready!
  • Context: Possibly replaced by the Block Visibility Groups module.

Here's a link to our current Drupal 8 training plans. We aim to create the best and most comprehensive D8 training anywhere.

And finally, here's a video of the webinar:

[embedded content]


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 26 2016
Jan 26
Easy Flip Effects with jQuery Flip Plugin

Have you seen websites where photos of the staff members flip over? You hover your mouse over the picture of the staff member and the image flips over to reveal the staff member's name.

Sounds difficult? Thanks to the jQuery Flip plugin and a bit of CSS, this effect is easy to achieve.

To create a flip animation with HTML, you need to create two containers: the front (visible) and the back (hidden), then apply a little CSS and Javascript.

Step #1. Download jQuery Flip plugin

Go to jQuery Flip plugin's repository and click the "Download ZIP" button.

jQuery Flip Plugin
  • Decompress the file.
  • Look for the jquery.flip.min.js file.
  • Upload the file to your site.
jQuery Flip Plugin

Step #2. The HTML

Use the example code below:

<div class="flip"> 
    <div class="front"> 
        <img src="http://feedproxy.google.com/path/to/image.jpg" alt="" />
    </div> 
    <div class="back">
        <h3>Some Text in the Back!</h3>
    </div> 
</div>

In the code above we defined these elements:

  • flip container class. The class that we will call later in step 4.
  • front container class. The image to display by default.
  • back container class. The content to display when the flip happens.

Step #3. The CSS

Add the following CSS code to your site, in order to create up the end result:

.flip {
    height: 199px;
    width: 300px;
    margin: 0 auto;
}
.flip img {
    width: 300px;
    height: auto;
}
.flip .back {
    background: #2184cd;
    color: #fff;
    text-align: center;
}

Set custom width and height properties depending to your image size.

Step #4. The Javascript

Inside the head tag, load the code below in exactly the order below. Any such CMS such as WordPress, Joomla or Drupal will have plugins or modules that allow you to load additional scripts in the head of your page, often a page-specific basis.

jQuery:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery Flip plugin:

<script src="http://feedproxy.google.com/path/to/jquery.flip.min.js"></script>

Execute the plugin by giving a 'hover' value to the trigger option:

<script>
$(function(){
    $(".flip").flip({
        trigger: 'hover'
    });
});
</script>

Open your site in a browser to see the end result. Put the cursor over the image to preview the horizontal flip effect.

jQuery Flip Plugin

To get a vertical flip effect, change the axis option to have an 'x' value.

<script>
$(function(){
    $(".flip").flip({
        trigger: 'hover',
        axis: 'x'
    });
});
</script>
jQuery Flip Plugin

To make the flip effect with a click, instead of a hover event, set the trigger values to 'click'.

Step #5. The end result

Check out the demo here


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Jan 22 2016
Jan 22

By Valentin Garcia 21 January 2016

Custom Layouts for Webforms with Webform Layout Module for Drupal 7

One of our users asked for a way to customize the layout of his Drupal 7 webforms.

Webform Layout is a module that extends Webform's features by providing more control over the design.

In this post, I'll share with you how to use Webform Layout module. Let's start...

Step #1. Build your webform

Create your webform. If you’re new to Webform module, we have a tutorial that will help you get started.

In this example, I built a simple form with 4 components:

  • Name
  • Email
  • Subject
  • Message
Creating a webform in Drupal 7
  • By default, this is how the webform looks for the public. Every field is displayed in its own row:
A completed Drupal 7 webform

Step #2. Install and enable Webform layout module

Download the Webform Layout Module

Install Webform layout module:

  • Go to Modules.
  • Click "Install new module" and upload the file you just downloaded.
  • After the installation is done, click on "Enable newly added modules".
  • Look for "Webform layout" box and check it.
  • Scroll down and click "Save configuration".

Step #3. Create a Layout box component

Webform Layout will add a new component type named "Layout box" that will help us to group other components.

  • Edit your webform.
  • Add a new component and type a name.
  • Choose "Layout box" as type.
  • Click "Add".
Adding layout boxes in the Webform Layout Module
  • Set Alignment to "Horizontal".
  • Click "Save component".
Set the alignment inside Webform Layout Module

Step #4. Set the layout box as parent

In this example, I want to display Name, Email and Subject fields in the same row.

  • Drag-and-drop the layout box up to the top:
Drag-and-drop the layout box
  • Now, drag-and-drop the first 3 fields to the right, so they will now be child items of the layout box.
drag-and-drop the first 3 fields in the Webform Layout Module for Drupal 7
  • Click Save when you're done.
  • Repeat step 3 and 4 if you need to group more elements.

Step #5. End result

Preview your webform to see layout box in action. Name, Email and Subject are displayed in the same row.

A completed webform using the Webform Layout Module

Note: if you are using Bartik or another theme without responsive support, you may require a custom width value for the grouped components, so the all combined widths will fit in the layout box.

A custom width value in the Webform Layout Module

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Jan 21 2016
Jan 21

By Steve Burge 21 January 2016

Entity Reference Views Help Drupal Content Creators

Entity Reference Views are one way you can make life easier for Drupal content creators.

Normally, when people are creating content on your site, each field consists of a single box with a single data point. For example, in a list of people, you might get only the person's name. 

Entity Reference Views allows you to provide far more information. For example, you can add photos and personal details to your list of people.

Entity Reference Views in Drupal 7

In this example, I have a content type called "Presentations" and another content type called "Speakers". Every time I add a presentation, I want to choose from a list of speakers.

  • Install and enable Views and Entity Reference.
  • Go to Structure > Views > Add new view.
  • Create a view of the content that you want content editors to choose from. In this example, I'm going to make a 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 "Settings" next to "Entity Reference list".
Click
  • Search fields: Choose the field you want users to search by.
  • Click "Apply (this display)".
Choose the field you want users to search by in Views
  • 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.
Add an Entity Reference field
  • Target type: Choose to link to nodes, users, files or whatever else you want to display.
  • Mode: Choose "View: Filter by an entity reference view."
  • View used to select the entities: choose the view you created.
  • Click "Save field settings".
Settings for an Entity Reference field
  • Click "Add content" and the data entry for your field will use the View you created:
A working Entity Reference field

Entity Reference Views Widget

Entity Reference Views in Drupal 8

Both Views and Entity Reference are now part of the Drupal 8 core.

To use Entity Reference Views in Drupal 8, the process is easy.

  • Create a view, as we showed above.
  • Go to Structure > Content types > Add field.
Adding an Entity Reference field in Drupal 8

Click through the settings and under "Reference type", you can choose "Views: Filter by an entity reference view".

The setting Views: Filter by an entity reference view

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 14 2016
Jan 14

By Steve Burge 14 January 2016

Show Drupal Content Only With Terms of Specific Depth

It is possible to allow Views to show only content that has child terms from a taxonomy?

Yes, it is. This is similar but slightly different to our tutorial on using Views to show only child terms.

First, you need to have your site set up correctly. You will need:

  • A taxonomy that has parent and child terms, as in this example below.
  • A content type that uses this taxonomy as a "Term reference" field. 
  • Content that is tagged with these taxonomy terms.
A Drupal taxonomy with child terms

Let's show you how to set up Views so that only content with child terms. In this example, the content needs terms such as Amphibians, Birds, Fish, Mammals, Reptiles.

  • Go to Structure > Views > Add new view.
  • Create a View that shows Content of the type that you want to show:
Creating a new view to show content with child terms
  • Click "Add" next to Relationships.
Adding a relationship to Views in Drupal
  • Search for "Content: Taxonomy terms on node":
Adding Content: Taxonomy terms on node to Views
  • Choose your taxonomy.
  • Click "Apply (All displays)" to save your relationship.
Choosing a taxonomy in a Views relationship
  • Click "Add" next to Filter Criteria.
Adding a filter criteria to Views
  • Search for "Taxonomy term: Parent term".
  • Click "Apply (All displays)".
Adding Taxonomy term: Parent term as a Views filter

Now the "Value" in this next step the key to the process.

  • The top level taxonomy terms have a value 0.
  • The second level terms have a value of 1.
  • The third level terms have a value of 2 etc.

This tutorial on Delta in Drupal explains more.

So if we want to ignore the parent terms, we choose "Is greater than or equal to" and then enter a "Value" of 1.

Configuring a Taxonomy term: Parent term filter
  • Save the filter and save your view.
  • You should now see that the parent terms are ignored:
A Drupal view showing only content with a child term

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 14 2016
Jan 14

By Steve Burge 14 January 2016

Show Only Specific Levels of Taxonomy in Views

One OSTraining member asked us this question:

How can I set the filter criteria so that Views shows only the second level in of a taxonomy?

We've had that question from other members before, so here's a tutorial explaining how it's done.

First, you need a taxonomy that has parent and child terms, as in this example:

Drupal taxonomy with parent and child terms

Let's show you how to set up Views so that only the child terms show: Amphibians, Birds, Fish, Mammmals, Reptiles.

  • Go to Structure > Views > Add new view.
  • Create a View that shows "Taxonomy terms".
creating a Drupal view with taxonomy terms
  • Click "Add" next to Filter Criteria.
Adding a new filter criteria in Drupal views
  • Search for "Taxonomy term: Parent term".
  • Click "Apply (All displays)".
Add Taxonomy term: Parent term in Views

Now the "Value" in this next step the key to the process.

  • The top level taxonomy terms have a value 0.
  • The second level terms have a value of 1.
  • The third level terms have a value of 2 etc.

This tutorial on Delta in Drupal explains more.

So if we want to ignore the parent terms, we choose "Is greater than or equal to" and then enter a "Value" of 1.

Choosing a value for Taxonomy term: Parent term in Views
  • Save the filter and save your view.
  • You should now see that the parent terms are ignored:
A Drupal view with only child terms

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 14 2016
Jan 14

By Steve Burge 13 January 2016

Use Views to Show Content Created by Drupal Users

One OSTraining member wanted to allow site admins to show the content created by different users.

For example, the admins wanted to see all the articles written by a particular user, or all the orders they made in the store.

I'm going to make this happen by creating a search page using Views.

First, make sure that users are associated with your content, as in the example below:

List of Drupal content with authors
  • Go to Structure > Views > Create new view.
  • Choose to Show "Content".
  • The other settings you can choose according to your needs.
Creating a Drupal view to show content
  • Under the "Advanced" tab on the right-hand side, click "Add" next to "Relationships":
Adding a relationship in Drupal views
  • Search for and choose the "Content: Author" relationship.
  • Click "Apply (All displays)" twice to save the relationship.
choose the "Content: Author" relationship in Drupal views
  • On the left-hand side, under Filter Criteria, click "Add".
Add a Filter Criteria in Drupal Views
  • Search for and choose "User: Name (raw)".
  • Click "Apply (All displays)".
Choose "User: Name (raw)" in Drupal views
  • Check the box, "Expose this filter to visitors, to allow them to change it".
  • Click "Apply (All displays)".
Exposing a Drupal filter to visitors
  • Save your view.
  • Visit the view on the front of your site, and you should be able to search for users' content, using the exposed filter:
A completed Drupal view showing content per user

Pro tip: inside the View, set "Use Ajax" to "Yes" under the "Advanced" tab on the right-hand side. This will allow the search to load without refreshing the whole page.

Use Ajax in Drupal Views

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 14 2016
Jan 14

By Steve Burge 13 January 2016

Count the Total Number of Results in Drupal Views

One of our members wondered if it was possible to automatically calculate the number of results displayed in a View.

Yes, this is definitely possible. To make this work, you will need Views, plus also the Token module installed.

Start with a long list of entries in a View, as in the image below:

List of Drupal content to be counted
  • Go to edit the view.
  • Click "Add" next to either "Header" or "Footer" in the center of the view:
Header and Footer area of Drupal views
  • Choose "Global: Result summary"
  • Click "Apply (All displays)"
Drupal views and Global: Result summary

On the next screen, you can chose tokens to put into the "Display" area. Here are the tokens you can use:

@start -- the initial record number in the set
@end -- the last record number in the set
@total -- the total records in the set
@name -- the human-readable name of the view
@per_page -- the number of items per page
@current_page -- the current page number
@current_record_count -- the current page record count
@page_count -- the total page count

Once you've chosen your options, click "Apply (All displays)".

Tokens in Drupal Global Result Summary

Save your view and you'll now see that the number of results is automatically calculated:

Drupal view with counter of total results

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 13 2016
Jan 13

In its current form, the main purpose is to allow you to take a copy of live site and create a development site.

Here's the explanation from Drupal.org:

"The goal of the configuration system in Drupal 8 is to make taking a copy of the site configuration easy to set up a development site where you make changes. Then importing those changes on the live site is also made simple."

So, in practice, the "Full archive" will be the only option that most people use. Drupal.org again:

"The full export feature is a lot more powerful. You can download an archive of all the active configuration files with this feature. This can be used to import on a development site (given the two sites are copies of each other) to import, synchronize, make changes, package up again and import and synchronize back on the live site as well."

If you do want to use the Configuration Management to recreate a live site and as a development site, here's the 5-step process recommended by Drupal.org:

  1. Install Drupal 8. We will call this site "Live."
  2. Make a copy of this site (We'll call this "Development"). Make the copy by using the same source code, the files directory and a database dump of the Live site imported on Development.
  3. Using the Configuration Management interface, export the full Development site configuration. This will create a compressed file called config.tar.gz.
  4. On the Live site, use the Configuration Management interface to navigate to and import the compressed file.
  5. After upload, review the changes (as in the image below) and click the "Import all" button.
Jan 13 2016
Jan 13

By Valentin Garcia 12 January 2016

Jan 11 2016
Jan 11

By Steve Burge 11 January 2016

How to Build Drupal 8 Slideshows

If you're getting started with Drupal 8, there are some key features you'll need to master.

You'll probably want to learn how to set-up calendars, contact forms, comments, multi-lingual sites and of course, slideshows.

In this tutorial, I'll show you how to build your first Drupal 8 slideshow.

Step #1. Getting set up with Views Slideshow

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

How to Build Drupal 8 Slideshows
  • 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:
  • Go to Structure > Content types.
  • Make sure you have a content type with an Image field attached:

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".
  • On the left-hand side, look for the "Fields" area. Only "Content: Title" will be showing.
  • Click "Add".
  • Search for your image field and choose that field.
  • Click "Add and configure fields"
  • Click "Apply"
  • Scroll down to the Preview area at the bottom of the page and you will see that the image has been added.
  • Click "Save" to finish creating your View.

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":
  • Find the block region you want to use and click "Place block":
  • Find the block that you just created and click "Place block":

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

  • 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:
  • Click "Save blocks".
  • Go and see your slideshow published on your site:

Step #4. Create image styles for your slideshow

At the moment our images are all different sizes and don't fit into the block region. Let's create an image style to ensure that all the images are the correct size.

  • Go to Configuration > Image styles > Add Image style.
  • Enter an "Image style name".
  • Enter a "Machine readable name".
  • Click "Create new style".
  • Choose an image effect. In my example, Resize will guarantee that all the images are the correct size:
  • Choose a Width and Height for your images. This will depend on the size of the block region you've chosen.
  • Click "Update effect".
  • Go back to edit your View:
  • Under "Fields", click on your image field to edit it.
  • Set "Image style" to the style you just created.

Save your view and visit the front of your site. Your slideshow should be working:

Pro tip: if you need help to make your slideshow responsive, enable the "Responsive images" module in the Drupal core. That will provide more image style options under Configuration > Responsive image styles.

Step #5. Add controls to your slideshow

Finally, let's add some controls so that our slideshow is easier for visitors to navigate:

  • Go back to edit your view again.
  • Under Format, click "Settings" next to Slideshow".

You'll now be able to add controls to your slideshow, including Previous / Next buttons, a counter and a pager:


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 11 2016
Jan 11

A couple of years ago, we realized that a lot of Drupal beginners were asking us for simple, good-looking Drupal themes.

These beginners didn't want sub-themes, base themes, frameworks or complicated installs. So that meant no Omega, Zen, Fusion or Bootstrap. These beginners just wanted a theme could be installed easily and didn't look embarrassing. That lead to "Recommended Themes for Drupal Beginners", one of the most popular posts on this blog.

Now that Drupal 8 is here, we've started to hear the same question: "What theme should beginners use to create their first site?"

Unfortunately, the news is not good at the moment. Only 86 themes are ready for Drupal 8, and I could only find 3 that are suitable for beginners.

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.

Jan 08 2016
Jan 08

By Valentin Garcia 07 January 2016

Jan 07 2016
Jan 07

By Steve Burge 06 January 2016

We've written before that menu links are one of the more basic features on a Drupal site.

One of our members wanted greater control over their menu links by using Javascript's Onclick events.

An Onclick event allows you to choose the action that happens when someone clicks a link.

I'm going to show you an easy way to make that possible, without any custom coding.

Step #1. Installation

Add Onclick Events to Drupal Menu Links

Step #2. Using Onclick Events

  • Go to Structure > Menus and find the menu links you want to modify.
  • Scroll down far enough and you will see an "Onclick" box. Here you can safely enter your Onclick events. These will be automatically added to your menu links on the frontend of the site.

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 06 2016
Jan 06

By Steve Burge 05 January 2016

New Classes: Drupal 8 Backups and Installs

Last week, we published our roadmap for Drupal 8 classes.

This week, we completed two more items on that roadmap with the release of "Backing up Drupal 8 Sites" and "Installing Drupal 8".

Look for more Drupal 8 videos next week as we aim to create the best and most comprehensive library of Drupal 8 training on the web.

Start a free trial!

Overview of the Backing up Drupal 8 Sites Class

As with any content management system on the web, having a good backup is essential! In this class, Robert walks you through backing up your Drupal 8 site manually from a web host. Robert's approach will ensure a good backup every time.

  • Introduction & Setup
  • The File System
  • The Database
  • Backup Storage
  • Restoring Your Site
  • Drupal 8 Backup Quiz

Overview of the Installing 8 Sites Class

In this class, Robert shows you how to install Drupal 8 at a webhost. You will get your site up-and-running while learning about some of the hosting issues you might face.

  • Introduction & Download
  • Uploading to Your Host
  • Creating a Database
  • Installing Drupal
  • Status Report
  • Installing Drupal 8 Quiz
Start a free trial!

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Jan 06 2016
Jan 06

By Valentin Garcia 05 January 2016

How to Add Custom CSS to Drupal 7

One of the common requests in our support chat and forum involves adding custom CSS to a site.

Normally the solution is to add the CSS to theme, but many environments are locked down and the site owners don't have access to the files.

In this post, I'm going to show you how to use the CSS Injector module to add custom CSS to your Drupal 7 site.

Step #1. Install and enable CSS Injector module

Download CSS injector module from this page.

CSS Injector Drupal 7

Install the CSS injector:

  • Got to Modules.
  • Click "Install new module" and upload the CSS Injector files.
  • After the installation is done, click on "Enable newly added modules".
  • Look for "CSS Injector" box and check it.
CSS Injector Drupal 7
  • Scroll down and click "Save configuration".
CSS Injector Drupal 7

Step #2. Add custom CSS

  • Go to Configuration > CSS Injector.
  • Click "Create a new rule".
CSS Injector Drupal 7
  • Enter a Title.
  • Enter your CSS code.
  • In Themes to show on, select the theme you're using.
CSS Injector Drupal 7

Add the CSS on specific pages. Use this setting to load the custom CSS on all the pages, or only on specific pages by selecting "add on only the listed pages" and typing the relative paths. For example: node/23 or some-page (no slash at the beginning).

CSS Injector Drupal 7
  • Click Save when you're done

Note for Pantheon users:

There is currently a bug in Pantheon's backup process that will skip any file or directory starting with 'css' including the CSS Injector files that are saved in a css_injector directory. If you are using CSS Injector 1.x on Pantheon, you will lose the actual CSS from each configuration if you restore from a backup until this issue is resolved.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Jan 06 2016
Jan 06

By Steve Burge 05 January 2016

How to Create a Calendar in Drupal 8

Drupal 8 is still a very new system and many contributed modules are just starting to catch up.

However, there some features already available in Drupal 8. The Calendar module is not bug-free and doesn't have all the features it did on Drupal 7, but it is working on Drupal 8.

Here's a guide to building your first Drupal 8 calendar.

Getting set up for the calendar

First, install the Drupal 8 versions of these two modules:

Now go to Structure > Content types and create a content type that uses the core Date field:

How to Create a Calendar in Drupal 8

Finally, clear your site's cache. You can do this via Configuration > Performance.

Creating the calendar

  • Go to Structure > Views.
  • Click "Add view from template".

You'll now see list of pre-existing templates that you can used to create calendars.

Because you created a Date field, there should be a template available for that field. I've highlighted the template for my example. Click "Add" next to this template.

  • Choose a "View Name".
  • Choose a "Base View Path". This will be the URL for your calendar.
  • Scroll down the preview area and you should see your new calendar:
  • Click "Save".
  • Click "View Month".

Visit the front of your site and you'll see your new calendar!


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Dec 25 2015
Dec 25

By Valentin Garcia 22 December 2015

Find Relevant Search Terms to Improve your SEO with Google Trends

If you're trying to optimize your site to meet the needs of potential visitors, then Google Trends is a very useful tool.

If you're going to create content that's optimized for a particular keyword, it's helpful to know whether people are actually searching for that keyword.

Google Trends allows you to see how popular a keyword has been, not just today, but over a decade or more.

Search terms

  • Go to Google Trends
  • In the "Explore topics" field, type a search term. In my example, I'm looking for "webdesign" (no spaces).
  • Click "enter".
Improve your SEO with Google Trends

The screenshot below shows the interest of this search term over time. You can see that far fewer people are searching for "webdesign" than 10 years ago:

Improve your SEO with Google Trends

Add a new search term

Let's add a new term to compare by doing clicking the "+Add term" link:

Improve your SEO with Google Trends

I typed "web design", this time using a space between the words to see if it changed the results:

Improve your SEO with Google Trends

As you can see, more people type "web design" than "webdesign" when they google.

Continue adding more terms, so you can decide which words or phrases are more popular. 

Once you have an idea of what people are searching for you, can build content around these phrases:


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Dec 24 2015
Dec 24

By Steve Burge 23 December 2015

The Drupal 8 Beginner Class is Here and is Free

Just over 1 month ago, on November 19th, the Drupal community released Drupal 8.

However, the practical kick-off for Drupal 8 was two weeks earlier on November 4th with the launch of Release Candidate 3. That was the first time that Drupal 8 was stable enough for end-users and for trainers like us to start creating lessons. 

Since then, Rod and Robert, our Drupal trainers, have been hard at work producing some really great Drupal 8 videos.

If you want to learn Drupal 8, here's overview of what's available to you now and what's to come:

What's available to watch right now?

These two classes are available to watch today:

There are two more classes coming this week:

  • Installing and configuring a new Drupal 8 site
  • Backups and restorations with Drupal 8

The roadmap for the first half of 2016

Here's a roadmap of what we have planned over the next few months:

  • Drupal 8 Intermediate skills
  • Drupal 8 theme development
  • Drupal 8 layout modules
  • Drupal 8 module development
  • Drupal 8 site, module and theme updates
  • Drupal 8 performance, showing how to make your site run as quickly as possible.
  • Drupal 8 security, explaining how to keep their Drupal sites safe from hackers and spammers.
  • Upgrading a site from Drupal 7 to 8 
  • Upgrading a module from Drupal 7 to 8 
  • Upgrading a theme from Drupal 7 to 8

There will be extra classes beyond that list and there are also new classes coming on Drupal 7, including the much requested Drupal 7 module development class.

All-in-all, we have a very busy roadmap for Drupal classes over the next 6 months. 

If you're not a member yet, please consider joining us to support the creation of the very best Drupal 8 training.

Start a free trial!

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Dec 22 2015
Dec 22

By Valentin Garcia 22 December 2015

How to Enable and Disable Shortcut Menu in Drupal 7

One of our users wanted to enable back the Shortcut menu in his Drupal 7 site.

In this short tutorial, I'm going to show you how to enable and disable the module that render the Shortcut menu.

The Shortcut menu is located in top, just below the dashboard menu:

Shortcut Menu in Drupal 7

The Shortcut module is in charge of this element.

Enable Shortcut module

  • Go to Modules
  • Look for "Shortcut", and check it
Shortcut Menu in Drupal 7
  • Scroll down and click "Save configuration".
Shortcut Menu in Drupal 7

Disable Shortcut module

  • Go to Modules
  • Uncheck "Shortcut" and save changes.
Shortcut Menu in Drupal 7

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


Dec 18 2015
Dec 18
mysql explained book

Do you use Drupal, WordPress, Joomla, Magento or other PHP software?

If you answered "yes", then you use MySQL.

MySQL is the world's most popular database program and if you build websites, you'll benefit from an understanding of MySQL.

MySQL Explained, is our first self-published book and is a clear, step-by-step guide to MySQL. This book is going to help you to understand how your data is being stored and give you the ability to design your own custom applications!

We're happy to say that paperback and Kindle versions of MySQL Explained are now available.

Buy from Amazon
Find Out More

The Paperback Version of MySQL Explained

The paperback copies of the book have turned out great, with large text and clear illustrations. Here's a copy of the front cover and two inside pages:

front of MySQL Explained inside MySQL Explained

Introducing Andrew and MySQL Explained

MysqlThis book was written by Andrew Comeau, who we met at WordCamp Orlando in 2014.

Andrew came up to our booth, and while we were talking, he told me that he'd written a book called "Your first guide to database design". While everyone was in the WordCamp sessions, I opened my iPad and downloaded Andrew's book. It was an amazing experience. Andrew's approach was identical to ours:

  • Step-by-step instructions.
  • Lots of big, clear images throughout the book.
  • Clear writing, plain and simple English.

I asked Andrew if he'd be interested in writing a book about MySQL and he said, "Absolutely!"

About MySQL Explained

If you've read an OSTraining book before (such as Drupal Explained or Joomla Explained), you'll recognize the same style in MySQL Explained.

And as with our others books, MySQL Explained is aimed at beginners. You don't have to be a professional database designer to understand and make use of MySQL.

Written especially for people outside the I.T. world, Andrew starts by helping you understand the very definition of a database, the forms it can take and the different options for storing information.

By the end of this book, you'll understand the reasons for choosing MySQL, the options for installing it and the tools that it offers to store and safeguard your data.

Buy from Amazon
Find Out More


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.


Dec 16 2015
Dec 16

By Rod Martin 16 December 2015

Drupal 8 Site Building

This week's new video class is "Drupal 8 Site Building".

This class follows on from last week's Drupal 8 Beginner Class. If you watched the Beginner Class, you know the basics of Drupal 8.

Now, you're ready to build your first Drupal 8 site. Robert is going to show you the whole process of building a site, from creating content and views, to managing layouts, themes and contact forms.

Start a free trial!

Introductory Video for the Drupal 8 Site Building Class

Outline of the Drupal 8 Site Building Class

  • Introduction
  • Content Types
  • Creating Content
  • Creating Dummy Content
  • Organizing Content with Views
  • More Specific Views
  • Adding Blocks
  • Customizing Your Homepage
  • Contact Forms
  • Themes
  • Quiz

How to take the Drupal 8 Site Building Class

If you're already an OSTraining member, you can click here to take the Drupal 8 Site Building Class.

Start a free trial!

About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.


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