Dec 10 2015
Dec 10

By Steve Burge 09 December 2015

How to Create Footnotes in Drupal

If you're using Drupal for an academic site, you may want to use footnotes in your content.

There is a Drupal module that makes these easy. In this tutorial, I'm going to show you how add footnotes.

  • Install and and enable the Footnotes module
  • Go to Configuration > Text formats.
  • Edit a text format and check the "Footnotes" box.
  • Save this text format and repeat the process any other formats you use.
How to Create Footnotes in Drupal

Go to create content. This is the syntax you can use to create footnotes:

[fn]Nice feature. Here's how to find more ...[/fn]
[fn]Woah! This is nice too! This link has more info ...[/fn]

Alternatively, you can use <fn> tags.

Here is how footnotes will appear in your content:

Once you save the content, your footnotes will look like the image below. Drupal will automatically number the footnotes and place them at the bottom of the page.

It is possible to specify the numbers of the footnotes using this syntax:

[fn value="1"]

You can use this to manually choose the numbering, or to combine multiple footnotes.

In the image above, we had three footnotes with a value of 1. Here's how they would appear on the page ...


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 09 2015
Dec 09

By Steve Burge 08 December 2015

Loops in Rules

Loops are a potentially confusing, but very useful feature in Drupal's Rules module.

Essentially a loop allows you to run an action over a list.

In these two videos, Robert introduces you to Loops and walks you through a use case. He shows how to use Loops to create and display a list of multiple people who have edited a node.

In programming terms, "Conditions" in Rules are similar to "if" statements and "Loops" are "for" loops that iterate over a list or an array.

These videos are part of our Drupal Advanced Rules Class.

Loops in Rules, Part 1

Loops in Rules, Part 2


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 07 2015
Dec 07

By Steve Burge 06 December 2015

How Did We Do? Our CMS Predictions for 2015

Back at the beginning of 2015 we made 10 predictions for the year ahead.

We said that the last few years had been quiet in the CMS world, and that 2015 would finally bring big changes.

Let's see whether 2015 did prove to be as revolutionary we predicted ...

#1. New user interfaces

Wrong.

We predicted that CMS interface design would finally improve after several years of stagnation.

Sadly, it's hard to claim this happend. Ghost abandoned plans for their dashboard. Drupal 8's interface is the same as Drupal 7's. Joomla and WordPress made few changes.

Perhaps next year this prediction will come true, thanks to project like WordPress' Javascript-driven Calypso. 

#2. Conferences outside the US and Europe

Half-correct.

Until 2014, CMS conferences were very US and Euro-centric. Joomla did take their World Conference to India and Drupal is planning to go to India early next year.

But, the trends is not strong. No more events international events are planned after DrupalCon Asia. 

#3. The biggest hack So Far

Wrong. And we're very happy to admit that.

In 2014, we saw Drupalgeddon and a whole series of attacks on WordPress plugins. Many of these issues impacted hundred of thousands or even millions of sites. 

If a bigger attack that Drupalgeddon were to hit, it would be a WordPress hack. But, WordPress has done a superb job with security and particularly auto-updates. They've had huge security issues, but the use of auto-updates stopped them from having a real world impact.

#4. Open source launches are SaaS-first

Correct.

We mentioned that Ghost and Discourse and other projects were all launching with SaaS options, in order to provide an immediate revenue source. This trend seems to be escalating thanks to projects like Mautic, plus WordPress plugins and Drupal distributions.

#5. SSL all the things

Half-Correct.

If we'd written this blog post a week ago, this might be marked as "Wrong". But Letsencrypt.org launched last week and was immediately taken up by a wide variety of projects and companies. I suspect that Letencrypt will be very widely available by mid-2016.

#6. GoPHP7

Wrong.

PHP 7 was scheduled for launch in mid-October. It arrived only 6 weeks behind schedule.

Will there be a strong movement to get people to update? No, we don't think so. Instead, the PHP community is focusing energy on getting people to move away from very old PHP 4 and 5 versions. 

#7. Drupal 8 Launches "Early"

Half-correct.

Drupal 8 was a long undertaking. To say the least. 

We prediceted that the Drupal 8 team would pick a date, release 8.0 and start getting user adoption and iterating. 

Did that happen? Not fully, but some promised features, such as the migration path, were pushed off to 8.1/

#8. Joomla 3 is the One True Version

Wrong.

We predicted that Joomla would adopt the WordPress release cycle and standardize on Joomla 3.

Certainly the user community has standardized on Joomla 3. However, the Joomla developers are making plans for Joomla 4. 

#9. WordPress Changes Much Faster Than in 2014

Wrong.

WordPress had a quiet year for changes in 2014. The last sizable update was in December 2013 with the new admin area design.

We expect WordPress to move more quickly in 2015, starting with the integration of the WordPress API. The first part of the API will be added to the core this week, but WordPress continued to iterate relatively slowly.

#10. This Will Be a Defining Year For PHP Projects

Correct. 

We said that many major PHP projects were over 10 years old and facing big turning points. That proved true.

Drupal 8, Magento 2, Symfony 3 and PHP7 were among the major releases.

Both Drupal and WordPress seem to have set course towards a world with PHP backends and Javascript frontends.

2015 was a far more interesting than many recent years and will go a very long way towards defining the future of the PHP world.

It certainly was a more successful year for our favorite CMSs than it was for our predictions!


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 07 2015
Dec 07
Automatic Popups with the jQuery bPopup Plugin

One of our users asked for a way to open a modal pop-up automatically when a page loads.

In this tutorial, I'm going to show you how to create a pop-up with those requirements by using the jQuery bPopup plugin.

Whether you're using WordPress, Drupal, Joomla or another platform, this technique will work.Step #1. Download the jQuery bPopup plugin

bPopup jQuery
  • Decompress the file and look for the "jquery.bpopup.min.js" file.
  • Upload the file to your site.
bPopup jQuery

Step #2. The HTML

Add this code in your site just after opening the body tag:

<div id="popup_this">
    <span class="button b-close">
        <span>X</span>
    </span>
    <h3>A nice ad goes here!</h3>
    <p>Nulla at nunc posuere, dictum sem sed, tristique mi.</p>
</div>

From the code above, the span tag render the close button:

<span class="button b-close">
    <span>X</span>
</span>

Replace h3 and p tags with your own content:

<h3>A nice ad goes here!</h3>
<p>Nulla at nunc posuere, dictum sem sed, tristique mi.</p>

Step #3. Add the CSS

Load the CSS code below into your site:

#popup_this {
    top: 50%;
    left: 50%;
    text-align:center;
    margin-top: -50px;
    margin-left: -100px;
    position: fixed;
    background: #fff;
    padding: 30px;
}
.b-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    color: #fff;
    background: #ff0000;
    padding: 5px 10px;
}
  • The "popup_this" id center the pop-up horizontally and vertically.
  • The "b-close" class move the close button to the right-top square of the pop-up.
  • The padding, background and color properties add a bit of makeup to both elements.

Step #4. Add the Javascript

Inside the head tag, load the code below in the exactly same order:

jQuery:

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

jQuery bPopup plugin:

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

Execute the plugin taking as reference the div id. In this case is "popup_this":

<script>
$( document ).ready(function() {
    $('#popup_this').bPopup();
});
</script>

Step #5. The end result

Open your site in the browser. Once the site loads, you'll see a pop-up:

bPopup jQuery

View demo


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 04 2015
Dec 04
Take MotoCMS for a Test Drive

With MotoCMS you don't have to be a pro developer or hire an army of professionals to produce your own stylish website.

MotoCMS is a really powerful CMS built with CSS3, HTML5, LESS, jQuery and AngularJS. 

They've been running for more than 5 years and have thousands of happy customers. MotoCMS has a huge collection of websites themes, suitable for any kind of business.

Let me give you an introduction to MotoCMS and then we'll offer a great giveaway.

Why consider MotoCMS? The Admin Panel

The MotoCMS admin panel s a user-friendly website builder, allowing each website owner to modify an existing design or even build one from scratch.

The WYSIWYG editor has drag-and-drop functionality that allow you to edit various site elements, controllong their position and color.

Inside the admin panel, you can set up the color scheme of yoursite, using the Color Picker. Starting with 5 main colors, the Color Picker generates 25 color tones with 5 additional colors to help you with your website styling.

The admin panel allows you to create different types of content including photo, audio, video and documents.

color picker

Why consider MotoCMS? Responsive design

Mobile devices made the web surfing much more convenient for users. With more powerful smartphones and tablets it became possible to go online anytime and at any place. Thus, a mobile version of your website has at least as much significance as a desktop one..

All MotoCMS 3 website templates are responsive. The visitors to your MotoCMS site can browser on their mobile devices without losing any content.

Why consider MotoCMS? 24/7 customer support

MotoCMS offers not only a well-made product, but it provides the high-level of service. Each MotoCMS customer has 24/7 access to professional tech support. Make a phone call or contact us via live chat ... you'll get an immediatel answer. The operators will give you the best advice about your template, the admin panel or its functionality.

Why consider MotoCMS? The E-commerce plugin

The MotoCMS e-commerce plugin is a special offer for online store owners.

You can manage your shop right in MotoCMS the admin panel. Here you will be able to create product catalogs, view the information about each customer, set discounts and promo codes, take care of taxes, improve SEO settings and do other stuff to make your online business profitable.

The MotoCMS plugin is available for $99.

Why consider MotoCMS? Great design

Here are some examples of MotoCMS templates:

#1. A template for a hair salon

Web Design for Hair Restoration Clinic

#2. A template for a web design studio

Web Developing Website Template

#3. A template for web services company

Global Business Website Design

The MotoCMS giveaway

Where you're a fan of WordPress, Joomla, Drupal or any other CMS, it's worth taking MotoCMS for a test drive.

To help you experience MotoCMS, they're giving away a free template and website. These template can worth $200 or more. You can host the site with MotoCMS or on your own servers.

Here's how to enter:

  1. Look at the MotoCMS templates and find one you really like. Make a note of the Item number.
  2. Leave a comment on this blog post with the number of your favorite template.

It's as simple as that. The winner will be randomly selected in 10 days time on December 14th.

Dec 01 2015
Dec 01

By Rod Martin 01 December 2015

 Drupal 8 Beginner

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

This class teaches you all of the essential concepts and knowledge you need to get started with Drupal 8.

The Drupal 8 Beginner class is aimed at people who are completely new to Drupal. You don't need to have any experience or know any coding.

Sign up now!

Introductory Video for the Drupal 8 Beginner Class

Outline of the Drupal 8 Beginner Class

Introduction

  • Introduction to the Course
  • Introduction to Drupal
  • Why Choose Drupal?
  • What You Need For This Course
  • Installing Dev Desktop
  • Installation at a Webhost

Navigating

  • Navigating a Fresh Installation
  • Navigating Drupal - Content
  • Navigating Drupal - Structure
  • Navigating Drupal - Appearance
  • Navigating Drupal - Extend
  • Navigating Drupal - Configuration
  • Navigating Drupal - People
  • Navigating Drupal - Reports

Content

  • Introduction to Content Types
  • Creating an Article
  • Creating a Basic Page
  • Inline Editing
  • Using CKEditor
  • Configuring CKEditor
  • Creating a New Content Type
  • Adding Basic Fields - Events
  • Creating User Group Content Type
  • Adding User Groups Fields
  • Entity Reference
  • Introduction to Taxonomy
  • Adding a Taxonomy
  • Drupal 8 Beginner Quiz 1

Displays

  • Creating Content
  • Managing Content
  • Revisions
  • Creating content with Devel
  • Introduction to Displays
  • Managing The Full Content Display
  • Managing The Teaser Display

Views

  • Introduction to Views
  • A Page with Teasers
  • A Simple Block View
  • A Table of Fields
  • Image Styles
  • A Photo Gallery

Modules

  • Introduction to Modules
  • The Book Module
  • The Forum Module
  • The Telephone Module
  • Finding and Evaluating Modules

Layouts

  • Introduction to Layout
  • Block Configuration and Permissions
  • Removing and Re-ording Blocks
  • Menu Management
  • Introduction to Themes
  • Finding Themes
  • Installing a Basic Theme
  • Installing an Advanced Theme
  • Drupal 8 Beginner Quiz 2

People

  • People Management
  • Setting Up the “Summer Intern”

Managing

  • Reports Menu
  • Updating Drupal
  • Updating Modules and Themes
  • Drupal.org & the Community
  • The Drupal Association
  • Final Thoughts

How to Take the Drupal 8 Beginner Class

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

Sign up now!

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.


Nov 24 2015
Nov 24

By Valentin Garcia 23 November 2015

Put your Drupal Site in Maintenance Mode Manually

Drupal allows to set a website offline with a few clicks via the admin interfacte.

However, we've seen situatuons where the admin interface becomes unavailable, often via a white screen of death.

In this tutorial, I'm going to show you a manual way to force your Drupal 7 site in maintenance mode.

Step #1. Edit the settings.php file

  • Edit the file sites/default/settings.php file, using a FTP client or through cPanel:
Put your Drupal Site in Maintenance Mode Manually
  • At the very end of settings.php, add the code below:
$conf['maintenance_mode'] = 1;

Step #2. End result

Your site will now display the "Site under maintenance" page:

Put your Drupal Site in Maintenance Mode Manually

Step #3. Put your site back online

Remove the line of code from Step 1, or change the value to 0 to put your site online again:

$conf['maintenance_mode'] = 0;

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.


Nov 21 2015
Nov 21

By Nick Savov 20 November 2015

Installing Drupal 8Drupal 8 just launched and we're starting to release videos from the Drupal 8 Beginner class.

In this video, Rod will show you how to edit your content from the front-end. This inline editing is a really cool and useful new feature in Drupal 8. It will make life much easier for site editors.

All about Drupal 8's inline editing


About the author

Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.


Nov 19 2015
Nov 19
The Drupal 8 Beginner Class is Here and is Free

Congratulations to the Drupal community. Today, they released Drupal 8!

It has been an epic journey to get here. Back in March 2011, we sat in the audience at DrupalCon Chicago and listened to Dries' plans for Drupal 8. To get from Chicago to today has taken over 1770 days, 3000 contributors and 350,000 lines of code.

Drupal 8 is far larger, more powerful and more modern than anything Drupal has released before.

How to get started with Drupal 8

You can download Drupal 8 here.

If you want to learn how to use Drupal 8, we've published the 62 videos of our Drupal 8 Beginner class for free on YouTube. This class is a practical, step-by-step guide to all that's new and cool in Drupal 8.

Click here to watch the Drupal 8 Beginner class

This class was made possible thanks to the sponsorship of Acquia. A huge thank you goes to Dries, Renée and the whole Acquia team up in Boston.

These videos are the first of 200 free videos we're going to release. Over the next few months, look for these classes also:

How will this impact Drupal training at OSTraining?

We do still have plans to release new Drupal 7 classes. Almost all our current Drupal customer are on Drupal 7 and we plan to continue supporting you.

However, over the next few months, we will start to focus on Drupal 8. If you're an OSTraining member, you will get advertising-free versions of the classes released on YouTube, plus many members-only Drupal 8 classes.


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.


Nov 19 2015
Nov 19

By Steve Burge 18 November 2015

How to Remove Unused Drupal Modules

Over the last few years we've had a wide variety of questions about removing Drupal modules, including these:

  • Do I need to remove modules via the admin or the file system?
  • Do uninstalled modules leave database entries behind?
  • Can I just disable a module, rather than completely uninstall it?
  • Should I uninstall Drupal core modules when I see that option?

Robert answers all those questions and more in this video from our Drupal Security class.


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.


Nov 19 2015
Nov 19

By Nick Savov 17 November 2015

Installing Drupal 8Drupal 8 is set to be released this week and it promises to be the best version of Drupal yet.

In these two videos, Rod will show you how to install Drupal 8 at your host or on your computer.

How to manually install Drupal 8

How to install Drupal 8 on your computer


About the author

Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.


Nov 18 2015
Nov 18
OKZoom jQuery Plugin

Would you like to allow your users to use a "magnifying glass" to zoom in and see your site's images in detail?

A magniying glass effect is really popular in ecommerce sites, because it allows customers to see all the close-up details before they buy.

In this tutorial, I'm going show you how to use the OKZoom jQuery plugin, the easiest way to create a circular zoom effect for your images.

Step #1. Download OKZoom jQuery plugin

okzoom jquery plugin zoom
  • Decompress the file.
  • Look for the okzoom.min.js file.
  • Upload the file to your site.
okzoom jquery plugin zoom

Step #2. The HTML

Let's add an image with the following example code:

<img id="zoom" alt="" src="http://feedproxy.google.com/path/to/image.jpg" style="width:600px; height:auto;" />

In the code above we defined these elements:

  • id value. In this case is "zoom".
  • A smaller width and height.
    • For example: if the image width is 1200 pixels, I set as 600px and leave the height as auto.

Step #3. The Javascript

Inside the head tag, load the code below in the exactly this order:

jQuery:

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

jQuery OKZoom plugin:

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

Execute the plugin, adding a custom width and height for the zoomed area:

<script>
$(function(){
    $('#zoom').okzoom({
        width: 200,
        height: 200
    });
});
</script>

Optionally, you can also define other parameters such as these:

  • round: true
  • background: "#fff"
  • backgroundRepeat: "repeat"
  • shadow: "0 0 5px #000"
  • border: "1px solid black"

Step #4. The end result

Open your site in a browser to see the end result. This should work in Joomla, WordPress, Drupal or any other CMS.

okzoom jquery plugin zoom

View demo


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.


Nov 17 2015
Nov 17

By Steve Burge 17 November 2015

Drupal 7 Security

This week's new video class is "Managing Multiple WordPress Sites With ManageWP".

Managing multiple WordPress sites can be a challenge. There are always updates, comments and more to deal with. ManageWP is a great solution.

In this class, Topher takes you through the basics that you get for free and shows the benefits of easy site maintenance that ManageWP brings to your workflow.

Sign up now!

Introductory Video for the ManageWP Class

Outline of the ManageWP Class

  • ManageWP Settings
  • Adding Sites to ManageWP
  • The ManageWP Interface
  • Managing Sites With ManageWP
  • Updating Sites With ManageWP
  • Taking Backups With ManageWP
  • ManageWP Reports
  • Plugin Themes With WP
  • ManageWP Summary
  • ManageWP Quiz

How to Take the ManageWP Class

If you're already an OSTraining member, you can click here to take the ManageWP Class.

Sign up now!

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.


Nov 13 2015
Nov 13

By Steve Burge 12 November 2015

Change Drupal File Permissions

If you login to a new Drupal site and check your Status report screen, you may see this warning:

The directory sites/default is not protected from modifications and poses a security risk. You must change the directory's permissions to be non-writable. The file sites/default/settings.php is not protected from modifications and poses a security risk. You must change the file's permissions to be non-writable.

In this video from our Drupal Security class, Robert is going to show you how to fix this warning:


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.


Nov 09 2015
Nov 09

By Rod Martin 09 November 2015

Drupal 7 Security

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

In this class, Robert gives a comprehensive overview of what you need to do to keep your Drupal 7 website secure.

Robert explains the importance of user permissions, the User 1 account and how to safely allow people to add content to your site.

Robert also discusses the technical steps you need to keep your Drupal installation secure, how to store important private files, SSLs and much more.

Note: even though Drupal 8 is now here, this will not be our last Drupal 7 class. We will be releasing both Drupal 7 and Drupal 8 content for a while.

Start a FREE 7 Day Trial!

Introductory Video for the Drupal 7 Security Class

Outline of the Drupal 7 Security Class

  • Introduction
  • Securing User 1
  • Directory Permissions
  • Private Directory
  • Private Directory Example
  • Content Authoring
  • Flood Control
  • User Permissions
  • Removing Unused Modules
  • Using an SSL
  • Security Review
  • Quiz

How to Take the Drupal 7 Security Class

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

Start a FREE 7 Day 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.


Nov 03 2015
Nov 03

By Valentin Garcia 03 December 2015

How to Upload a Favicon into Drupal Adaptive Theme

Adaptive Theme is a popular free Drupal 7 theme. It comes with nice features to customize the layout and some design elements, including the option to upload a custom favicon.

In this short tutorial we will show you how to upload a favicon by using the Drupal Adaptive Theme.

Step #1. Upload a favicon

In your dashboard go to:

  1. Appearance
  2. AT
  3. Settings
Upload a Favicon into Drupal Adaptive Theme
  1. Scroll down and click "Shortcut icon settings"
  2. Uncheck "Use the default shortcut icon"
  3. Upload icon image in ico or png format
  4. Save configuration
Upload a Favicon into Drupal Adaptive Theme

Step #2. End result

Go to your public site to preview the new favicon:

Upload a Favicon into Drupal Adaptive Theme

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.


Nov 03 2015
Nov 03
Drupal 8 Dates You Need to Know

Yes, 1779 days after Drupal 7 arrived, we finally have a release date for Drupal 8.

As a result of this decision, two other important dates were decided:

  • the end of support for Drupal 6
  • the approximate release date for Drupal 8.1

Read on to find out more about these important dates for Drupal, during the next six months:

November 19th: Drupal 8 release

Friday, November 19th is the chosen date. Dries' birthday is also November 19th (I don't think this is a coincidence).

There will be parties around the world. You can find a full list on http://www.drupical.com.

If you want to know which modules are available for Drupal 8, Contribkanban.com has a useful list. The bad news is that not many themes and modules are ready for Drupal 8 yet. The good news is that the Drupal 8 core has far more features than D7, and you can build decent sites with no added modules.

February 19th, 2016: Drupal 6 support ends

The Drupal 6 core will get security updates until 3 months after Drupal 8 is released. You can read the announcement explaining that decision here.

Can you keep using Drupal 6 if security updates stop? Yes, and you won't be alone. There are large organizations and government bodies that will do just that. We know sites that are still running successfully on Drupal 5, so Drupal 6 sites still have a long shelf-life if well looked after.

However, it's worth reading our article, "Should You Keep Using Unsupported Software?" to understand the pros and cons of staying with Drupal 6.

The best explanation is that without significant help from your own developers you will be putting your site into a lockdown / feature freeze mode. In addition to no more core updates, you're unlikely to get module updates either as the module maintainers focus on Drupal 7 and 8.

Mid-April, 2016: Drupal 8.1 release

The Drupal team has made big changes were made to the Drupal release cycle. You can read full details of the changes at https://drupal.org/node/2135189.

Here's a quick overview of the new release cycle:

  • New features can now be added after the 8.0 release.
  • Drupal 8 will have several releases with new features.
  • New Drupal 8 releases will come out every 6 months. They may have new features and will be called 8.1, 8.2, 8.3 etc.
  • The latest release will be the only one that's supported.
  • The end of the process will be a Long Term Support version or LTS. When that LTS arrives, no new features will be added, only security fixes.

Here's a graphical overview of how the releases will work:

media_1393365446214.png

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.


Nov 02 2015
Nov 02

By Valentin Garcia 02 November 2015

Circled Images with CSS

One of our members wanted to display circled images in his website.

In this tutorial, I'm going to show you how to use CSS to get the desired result.

Step #1. Get your images ready

To create the effect, make sure your images are square and all have the same width and height like the example below. Use Photoshop or GIMP to crop your images, if needed.

girl

Step #2. Add the HTML

Add this sample code into your site:

<img class="circle" src="http://feedproxy.google.com/path/to/your/image.jpg">

Note, we are using the circle class for that image.

Step #3. Add the CSS

Load the CSS code below into your site:

.circle {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
}

Step #4. Check the nd result

Go to the front of your site and confirm that the circle effect is working:

circled girl

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.


Nov 02 2015
Nov 02

By Rod Martin 02 November 2015

The Drupal icon next to an icon of a silhouette of a person with a suit on

Drupal is used for a myriad of different kinds of websites. This week we complete the release of the "Build a Drupal Corporate Website" with Robert Ring.

During this class, Robert talks about planning, content types, modules, themes and everything you might need for this kind of site.

You'll build a blog, personnel department, a views slideshow and more for the fictitious corporation, BoardGames Ltd.

Start a FREE 7 Day Trial!

Introductory Video for the Drupal Corporate Site Build Class

Outline of the Drupal Corporate Site Build Class

This week:

  • Introduction
  • About Page
  • User Friendliness
  • Basic Site Organization
  • Home Page Image
  • Views Slideshow
  • How to Create Slideshow
  • Placing the Slideshow
  • Products
  • Generating Dummy Content with Devel
  • Products View Page
  • Creating the Blog
  • Personnel Nodes
  • Personnel Page
  • Contact Form
  • Adding a Contributed Theme
  • Final Considerations
  • Quiz

How to Take the Drupal Corporate Site Build Class

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

Start a FREE 7 Day 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.


Oct 30 2015
Oct 30

By Steve Burge 29 October 2015

Contact Forms Are In the Drupal 8 Core

In Drupal 7, if you wanted to create contact forms, you had to use a contributed module. Webform and Entityform were the most popular options.

Now in Drupal 8, forms are in core. Will be saying to goodbye to those popular Drupal 7 modules? Read on and find out ...

The Contact module in Drupal 8

By default, Drupal 8 has the Contact module enabled, which wasn't true in Drupal 7.

The Contact module has also been greatly enhanced. No longer does it simply provide a contact form on user profiles.

Drupal 8 provides two default contact forms: "Personal contact form" and "Website feedback."

Goodbye Webform? Contact Forms Are In the Drupal 8 Core

"Personal contact form" is the form that's added to each user's profile:

"Website feedback" is a generic website contact form. Drupal automatically provides a link to this form from the footer:

Contact form settings

Each contact form has 2 main settings:

  • Recipients
  • Auto-reply

So you won't see any of the more advanced Webform features such as redirecting users to particular URL after submission.

Contact form fields and settings

In Drupal 8 you can add fields to forms, so you can create complex forms with no contributed modules.

Forms also have custom elements: such as "Sender email,""Recipient username," and "Send copy to sender." These can be arranged in the "Manage Display" tab of each form.

Storing contact form messages

So can we say goodbye to Webform and Entityform and rely entirely on the Drupal 8 core? No. Not yet.

The one key feature that's missing with the Contact module is the ability to store messages sent through the forms.

This is odd, because Drupal 8 deals with contact messages as entities. You can add comments to them, for example. You just can't see them!

To solve this problem. you'll need a contributed module called Contact Storage. The author says they hope to have this in core for Drupal 8.1 and that would make a lot of sense, filling this functionality gap.

After installing and enabling Contact Storage, you'll see an addition tab with a list of messages:


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.


Oct 26 2015
Oct 26

By Valentin Garcia 26 October 2015

htaccess redirections

.htaccess provides an easy way to replace old or broken links with a new url.

In this tutorial we will show you how this process works for Joomla, WordPress and Drupal.

Create a redirection

Open your .htaccess file with a code editor or through cPanel.

Define the old and new urls separated by an empty space after "Redirect 301". See the example below:

Redirect 301 /old-url /new-url

Test the redirection

In your browser, go to yoursite.com/old-url. It should automatically point to yoursite.com/new-url which would mean the update is working.

Redirect to a different domain

You can redirect a url to a different domain by including it in the syntax. This is very useful when you change the domain name and want your users to reach the new website when they try to visit the old one.

Redirect 301 /some-url http://www.anothersite.com/some-url

To test the update, go to yoursite.com/some-url. It should automatically point to anothersite.com/some-url.


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.


Oct 26 2015
Oct 26

By Rod Martin 26 October 2015

The Drupal icon next to an icon of a silhouette of a person with a suit on

Drupal is used for a myriad of different kinds of websites. This week, Robert begins a two week series with "Build a Drupal Corporate Website".

During this class, Robert talks about planning, content types, modules, themes and everything you might need for this kind of site. You'll build a blog, personnel department, a views slideshow and more for the fictitious corporation, BoardGames Ltd.

Start a FREE 7 Day Trial!

Introductory Video for the Drupal Corporate Site Build Class

Outline of the Drupal Corporate Site Build Class

This week:

  • Introduction
  • About Page
  • User Friendliness
  • Basic Site Organization
  • Home Page Image
  • Views Slideshow
  • How to Create Slideshow
  • Placing the Slideshow
  • Products
Next Week:
  • Generating Dummy Content with Devel
  • Products View Page
  • Creating the Blog
  • Personnel Nodes
  • Personnel Page
  • Contact Form
  • Adding a Contributed Theme
  • Final Considerations
  • Quiz

How to Take the Drupal Corporate Site Build Class

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

Start a FREE 7 Day 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.


Oct 26 2015
Oct 26

By Steve Burge 25 October 2015

drupal date formatIn Drupal 8, the process of adding a new date format is substantially simpler than in Drupal 7.

In Drupal 7, there were several steps involved.

In Drupal 8, the process is substantially simpler:

  • Go to Configuration > Date and time formats.
  • You'll see that Drupal 8 ships with around a dozen formats, compared with 3 in Drupal 7.
How to Add a Custom Date Format in Drupal 8
  • Click the blue "Add format" button:

You can now add a date format directly into the "Format string" field.

You wil need to use the PHP syntax on this page. Drupal will give you a live preview of your date format:


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.


Oct 26 2015
Oct 26

By Steve Burge 25 October 2015

Comments were one of the more basic features in Drupal 7. There was only type of comment and you had very limited modification and moderation options. 

In Drupal 8, comments are vastly better. Here are 5 ways that comments have changed and improved:

#1. Comments have their own page

Go to Manage > Content, and you'll see that Comments have their own tab.

Inside the tab, "Published comments" and "Unapproved comments" are grouped together.

Everything that's Changed With Comments in Drupal 8

You'll be able to perform bulk operations on your comments:

One disappointment is that, unlike for Content and Files, there are no filter or search boxes for comments. I suspect that will be remedied by a contributed module, or in a future Drupal 8 update.

#2. Comments are fields

In Drupal 8, you add comments as fields. This allows you to be more flexible with where comments are displayed on a page. It also allows comments to go anywhere that fields are allowed (not just on content).

#3. Comments have types

In Drupal 8, you can have more than one type of comment.

For example, if you run a social networking site, you might want to allow admins to leave private notes on users:

As I mentioned above, Drupal 8 allows you add comments to more than just nodes. You can add comments to blocks, contact messages, content, taxonomy terms, users and even comments. Yes, you can add comments to comments.

However, without the user of contributed module, there may be a limit to far you can take the example I've just shown. This is because Drupal 8's comment types don't have individual permissions. Anyone with persmission to post on type of comment will have access to post all types. Again, you can expect a contributed module or Drupal 8 update to fix this.

#4. Comments have fields

Not only are comments now fields in Drupal 8 (see change #2 above), but you can also add fields to comments:

#5. Recent comments is in Views

As with many things in Drupal 8, the Recent comments block has moved to Views. In Drupal 7, the Recent comments block couldn't be edited.

In Drupal 8, Recent comments is available by default:


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.


Oct 24 2015
Oct 24

By Steve Burge 21 October 2015

How to Create a Popular Articles View in Drupal

Many sites want to showcase their most popular content to visitors.

However, creating a "Popular Articles" list in Drupal is harder than it might seem.

In this video, Robert shows you how to use the Statistics module (part of the Drupal core) to organize your articles by popularity.

This video is taken from our Advanced Views class.


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.


Oct 23 2015
Oct 23

It's important to check links on your site to make sure they're working. Sometimes when URLs get updated, some links are forgotten. Manually checking a site for all links can be labor intensive and time consuming.

That's where Drupal's Link Checker module comes in. It's an excellent module that saves you a lot of time. This tutorial will help you to get started with it.

Configuration

  • Use our install Drupal 7 modules tutorial to install the Link Checker module.
  • Go to Configuration -> Content Authoring -> Link checker.
  • Select which areas of your site you'd like to scan with the module.
  • Select if you want it to scan internal and/or external links. I recommend both. External links are prone to break without you knowing about them, so scanning for them would be a good idea.
Use the Link Checker Module to Find Broken Links in Drupal
  • Select which types of links you'd like to check. I recommend <a> and <img> tags, unless otherwise needed. With the <img> tag enabled, it will now look for broken images too.
  • I recommend leaving the rest of the settings on this page as they are, unless otherwise needed.
  • Finally, save the configuration.

Once you save the first time, it will scan your site for content, but not actually check the status of the links yet. If you have a lot of content, it will take a while to complete and you'll see the progress bar.

In the example, I hadn't set up any comments or blocks yet, so that's why it shows 0 for each.

Finding the Broken Links

Go to Reports > Broken links.

In this area you'll find a list of any broken links. Initially, all the links will be unchecked until Drupal's cron runs.

Unless you changed the "interval" setting in Link Checker's options, the module will check for broken links every four weeks via Drupal's cron. If you want to run it manually, I'll show you how in the next step.

Let's run the cron manually to make sure everything's working.

  • Go to Configuration > Cron.
  • Click "Run cron".

Now go back to Reports -> Broken Links. You'll see a list of all your broken links. It will also include the response status and description.

In the example, I had four links total and it found the one broken link. Now, I can click on the "Edit node" link to go directly to the node and fix it.

Within the node, Link Checker gives me a notification of the broken links in the node. This is useful if you haven't accessed the Reports area recently, but you're editing the content.

As you can see, Link Checker is an awesome module that has the potential to save you hours upon hours of searching your site manually. Hope you enjoyed the intro to Drupal's Link Checker!

Oct 22 2015
Oct 22
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.

Today, we're really happy to launch our first self-published book, MySQL Explained.

MySQL Explained is a clear, step-by-step guide that will enable you to understand how your data is being stored and give you the ability to design your own custom applications!

Buy from LeanPub for only $9
Find Out More

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 on databases. 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.

The one big difference with MySQL Explained

Although MySQL Explained is very similar to our previous books, there is one big difference: the price.

We chose to self-publish MySQL Explained rather than go through a major publisher. This allows us to offer the book at a signficantly lower price. MySQL Explained is available today in e-book form and for only $9! What are you waiting for? Grab a copy now!

Buy from LeanPub for only $9
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.


Oct 20 2015
Oct 20

By Steve Burge 20 October 2015

Should I Use Context or Panels for Drupal Sites?

There are multiple different ways to design a Drupal site. You can code your theme, or you can use modules such as Panels, Context and Display Suite.

I'm reluctant to answer the question of which solution is "best", but we do often get asked about which approach Drupal site-builders should use.

In this video, Robert Ring compares Context and Panels, explaining different situations in which he'd choose to use each module. If you want to learn more, we have full classes on Contextand Panels.


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.


Oct 19 2015
Oct 19

By Rod Martin 19 October 2015

jQuery

Web Developer is of the most helpful browser extensions for anyone building websites.

Web Developer provides you with entire suite of web design tools. You can use Web Developer to inspect CSS, analyze images, quickly validate a web design for W3C compliance or measure design elements.

This add-on is available for Chrome, Firefox and Opera, and will run on Windows, OS X and Linux. Web Developer will help you analyze any time of sites, whether you're using WordPress, Drupal, Joomla or another platform.

In this class, Topher takes us through the most important aspects of Web Developer, giving you an invaluable tool for analyzing and improving your websites.

Start a FREE 7 Day Trial!

Introductory Video for the Web Developer Class

Outline of the Web Developer Class

  • Introduction
  • CSS
  • Forms
  • Images
  • Information Tab
  • Miscellaneous Tab
  • Outlining
  • Resize and View Source
  • Tools
  • Options Panel

How to take the Web Developer Class

If you're already an OSTraining member, you can click here to take the Web Developer class.

Start a FREE 7 Day 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.


Oct 15 2015
Oct 15

By Valentin Garcia 15 October 2015

responsive google maps

Google Maps make it easy to embed a map in your own website.

However, by default, Google Maps doesn't provide responsive support.

In this short tutorial, I'm going to show you how to make your maps responsive, using just a few lines of CSS. This technique will work with WordPress, Joomla, Drupal or any other platform.

#1. Get the Google Maps Embed Code

  • Go to Google Maps.
  • Find the map area you want to use on your website.
  • Click on the "Share" link.
1
  1. Choose "Embed map".
  2. Select the iframe code.
  3. Right click and copy the embed code.
2

#2. Use the Embed Code

Paste the embed code in your website. It will look similar to this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

#3.Modify the Embed Code

Add a div tag around the embed code. Use the CSS class map-responsive so that your code now looks like this:

<div class="map-responsive">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Add the CSS

Now add some CSS properties inside one of your stylesheet files:

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Your maps now will be responsive. Try resizing your browser to see it in action.


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.


Oct 13 2015
Oct 13

By Steve Burge 13 October 2015

Drupal8RC1Octagon

Last week the Drupal 8 community hit an important milestone with the first Release Candidate for Drupal 8.

What does "Release Candidate" mean? It means that this version is ready to be considered as the official release for Drupal 8. If no more critical bugs are found, then this will indeed become Drupal 8.0.

This is important milestone for OSTraining too. This week we're getting started on the 200 videos we'll release for free.

Wait! 200 videos for free???

Yes, that's right!

Back in April, we launched our Drupal 8 training Kickstarter project. Thanks to the backing of so many generous sponsors, we were able to commit to releasing 200 videos on Drupal 8.

Here's an overview of the all the free Drupal training, plus an introduction to the organizations who made it possible.

Why are we starting now?

Before now, things were still in flux with Drupal 8. Features and interfaces were still changing. There were still important bugs that often impeded people from using Drupal 8. We didn't want to create videos on a platform that was changing and not easy to use.

Today, that's no longer true. Drupal 8 is almost ready and stable. Over the next few weeks and months, look for the release of the 200 videos.

We're going to start with the Beginner videos sponsored by Acquia.

Specifics of the 200 free Drupal videos

  • Where will the videos be released? On YouTube, here on OSTraining.com and on the sponsors' websites.
  • When will the videos be released? The Beginner videos will be published close to the official Drupal 8.0 release. Because the other video series rely more heavily on contributed modules, the time frame for releasing these videos will coincide with the release of the contributed modules.
  • What's the benefit for me if I'm an OSTraining member? You get these videos much more quickly than you would have otherwise. Plus, you'll get to see a non-sponsored version of the videos.

About the author

Website http://ostraining.com

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.


Oct 13 2015
Oct 13

By Steve Burge 13 October 2015

When you login to a Drupal site, the very first link you will see in the admin bar is "Dashboard".

Even though it's the first link, few people seem to use it, perhaps because they don't fully understand what it does. Perhaps as a result, the Dashboard won't be included in Drupal 8.

In this video, taken from our Better Drupal Administration class, Robert explains what the Dashboard does. It really can be a helpful control panel for users of small sites.


About the author

Website http://ostraining.com

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.


Oct 13 2015
Oct 13

One of our members wanted to reproduce the hover effect from the team's pictures in our About Us page.

In this tutorial, I'm going to show you how to use CSS to get same result. I'll also show you how to customize the animation.

Step #1. The HTML

Add this sample code in your site:

<div class="block">
    <img title="" alt="" src="http://feedproxy.google.com/park.jpg">
    <div class="block-caption">
        A nice hidden subtitle goes here
    </div>
</div>

Step #2. The CSS

Load the CSS code below into your site:

.block {
    display: block;
    height: 425px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 640px;
}
.block img {
    transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
}
.block .block-caption {
    background: rgba(0,0,0,0.6);
    bottom: 0;
    color: #fff;
    display: table;
    left: 0;
    opacity: 0;
    padding: 10px 0;
    position: absolute;
    transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    width: 640px;
}
.block:hover .block-caption {
    opacity: 1;
}
.block:hover img {
    transform: scale(1.5) rotateZ(-5deg);
    -moz-transform: scale(1.5) rotateZ(-5deg);
    -webkit-transform: scale(1.5) rotateZ(-5deg);
    -o-transform: scale(1.5) rotateZ(-5deg);
}

Step #3. Customize the CSS

From the previous code, customize some CSS properties based on the following comments:

  • Set your image's width and height.
  • To center the block, use 0 auto as value for margin.
.block {
    height: 425px;
    margin: 0 auto;
    width: 640px;
}
  • Change the transition property for the image and caption based on this tutorial.
  • Use the image's width for the caption.
.block img {
    transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
}
.block .block-caption {
    transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    width: 640px;
}
  • For the transform property we use 4 lines to support different browsers. For more details visit this page.
    • transform: default
    • -webkit-transform: Chrome and Safari
    • -moz-transform: Firefox
    • -o-transform: Opera
  • Change scale() and rotateZ() values to get different animation results. You can use instead rotateY() to modify the direction.
.block:hover img {
    transform: scale(1.5) rotateZ(-5deg);
    -moz-transform: scale(1.5) rotateZ(-5deg);
    -webkit-transform: scale(1.5) rotateZ(-5deg);
    -o-transform: scale(1.5) rotateZ(-5deg);
}

Step #4. The end result

The animation will start when you move the mouse over the image:

hover

View demo


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.


Oct 13 2015
Oct 13
drupal docker

At the end of 2014, one of the OSTraining team choose Docker as their favorite innovation of the year.

Why is Docker so great? Often developers discover code that’s working on a local machine may not work as expected in other environments.

Also a lot of time is often wasted in cases of new developer joining a team and configuring developers environments to work perfectly for the application you need to run.

For solving these issues, the virtualisation to match exact OS is a solution. There are many solution which tries to solve problem via Virtual Machine, but they eats up the RAM of local developer and also add extra maintenance burden on DevOps team. 

Think of Virtual Environment where you can write the code for your Operating System and share on all environments. Yes that’s what docker based environment provide.  The idea of writing this article is to make you familiar on how to write your own DockerFile for Drupal Environment. This article assume that you have Ubuntu on your computer. If you have Mac then you can either use Boot2Loader or Vagrant. 

What services you need for Drupal?

  • HTTP Server with PHP: We can either use Apache with PHP or Nginx with PHP. Here we will demonstrating building the docker using Apache with PHP. Drupal Docker can also have services like ssh (for drush alias to work) and some important utilities like vim
  • SQL Server: Choose your favourite SQL Service (MySQL or PostGRESQL or SQLite). Here we shall be demonstrating using MySQL Docker. Idea of using separate docker for SQL service is to have a freedom to choose internal  SQL Service on other Docker or a external SQL Services like Amazon RDS without affecting your Drupal environment. 

Choosing Base Image of Docker?

There a plenty of options you can use for building a docker, like Ubuntu, CentOS, Alpine etc  Here we will be using  standard Ubuntu base image for Dockers i.e. Ubuntu Phusion which is a minimal Ubuntu base image modified for Docker-friendliness.

Read more details on github for building Drupal Docker. 

  • Create a directory with name say dev-docker-repo, anywhere on your computer.
  • Download Drupal to /home/user-name/share/drupal 

Your directory structure should look like this:

  • dev-docker-repo
    • Dockerfile
    • apache-2-run.sh
    • apache2.conf

Let’s see the content of each file, first we will be creating the Dockerfile. Comments in Dockerfile starts with pound character (#).

Drupal Dockerfile Sample

#Base Image
 FROM phusion/baseimage
 #Maintainer
 MAINTAINER Ankit Babbar <[email protected]>; 
#locale settings for Ubuntu
 RUN locale-gen en_US.UTF-8
 ENV LANG       en_US.UTF-8
 ENV LC_ALL     en_US.UTF-8 
#Install Necessary Software
 RUN apt-get update -y
 RUN DEBIAN_FRONTEND="noninteractive" apt-get install -y vim curl wget
 RUN add-apt-repository -y ppa:ondrej/php5
 RUN apt-get update -y 
#Install Apache and PHP 
 RUN DEBIAN_FRONTEND="noninteractive" apt-get install -y --force-yes php5-cli  \
  php5-mysql  php5-curl php5-gd php5-mcrypt apache2 drush libapache2-mod-php5
 RUN php5enmod mcrypt
 RUN a2enmod rewrite 
#Use baseimage-docker's init system.
 CMD ["/sbin/my_init"] 
#apache2 Environment Variables, and config settings
 ENV APACHE_RUN_USER www-data
 ENV APACHE_RUN_GROUP www-data
 ENV APACHE_LOG_DIR /var/log/apache2
 ENV APACHE_LOCK_DIR /var/lock/apache2
 #ENV APACHE_PID_FILE=/var/run/apache2.pid 
#runit service files
 COPY ./apache2-run.sh /etc/service/http/run 
#runit service permissions
 RUN chmod +x /etc/service/http/run 
EXPOSE 80
 ## /apache2 
#apt-cleanup
 RUN apt-get clean
 RUN rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

apache2-run.sh

This script will run apache2 as a background process

#!/bin/bash /usr/sbin/apache2 -D FOREGROUND

Create Drupal Docker Image

This script will run apache2 as a background process

$ cd dev-docker-repo $ docker build . ----- ----- Successfully built {docker_image_id} 

After build command a docker image id like 6762f304c834 will be generated for Ubuntu with all required services. Here we are using MySQL Community Docker Image for simplicity. Also we assume that you have a Drupal is downloaded at /home/user-name/share/drupal.

$ docker run --name mysql-db -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql:5.6 $ docker run --link mysql-db:mysql-db -d -p 49980:80 -v /home/user-name/share/drupal:/var/www/html {docker_image_id} 

(You can possibly think of writing your mysql Dockerfile if need be so).

Hit your browser with http://localhost:49980/ and check you get default Drupal installation file In Database Settings Choose Database URL as mysql-db, User root, Password my-secret-pw.

This completes your Vanilla Drupal running inside a docker. You can run the same docker now in all environments.

Further you can create a Drush Alias. Drush Alias is nice way to work with Drupal inside your docker. To create a drush alias you will have to enable ssh and expose port 22. Then write a Drush Alias (assuming 49922 being the port map of ssh docker), crush alias file ~/.drush/docker.aliases.drushrc.php

Drush Alias of Drupal inside Docker

$aliases['drupal’'] = array( 'root' => '/var/www/html', 'remote-user' => 'root', 'remote-host' => 'localhost', 'ssh-options' => '-p 49922', );

Type these commands on your base OS

 $ drush cc drush $ drush sa #see alias below @docker @docker.drupal ……. $ drush @docker.drupal cc all or $ drush @docker.drupal {drush_command} 

Further ideas

There is a sample Vagrantfile in the Phusion Github Repo. You can possibly think of running Ubuntu Docker on CoreOS. You can also think of Continuous Integration using CircleCI.


About the author

Ankit has been a Drupal developer for more than 4 years and also has extensive experience with cloud services from Digital Ocean, AWS, Rackspace, Google Compute Engine.


Oct 12 2015
Oct 12

By Rod Martin 12 October 2015

jQuery

jQuery is a Javascript library with the motto, "write less, do more".

jQuery makes it much easier to use JavaScript on your website and so it has become hugely popular. All the major web platforms use JQuery:

  • WordPress started using jQuery in 2007, and has been using more and more Javascript.
  • Joomla 3 has ditched MooTools in favor of jQuery.
  • Drupal has shipped with jQuery in the core since Drupal 5 in 2007.

Because jQuery is so popular, it's important to understand the basics, even if you're not a heavy-duty coder.

In this week's new class, Robert gives us you an introduction to this lightweight JavaScript library.

Start a FREE 7 Day Trial!

Introductory Video for the jQuery Class

Outline of the Introduction to jQuery Class

  • Introduction
  • Loading jQuery
  • Basic Syntax
  • Playing with Functions
  • Selecting Class and ID
  • Event Handlers
  • More Event Handlers
  • Including Plain Javascript
  • Content Delivery Networks
  • Improving Your Use of JQuery
  • Introduction to JQuery Quiz

How to take the Introduction to jQuery Class

If you're already an OSTraining member, you can click here to take the Introduction to jQuery class.

Start a FREE 7 Day 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.


Oct 08 2015
Oct 08
custom map

One of our members asked how to create a map with custom points to highlight specific areas.

In this tutorial we will show you how to create custom maps by using the Image-Maps online tool.

Step #1. Create an Image-Maps account

Step #2. Upload the image map

  • Upload the image that you will use as a map. In my example, I'm uploading a map of my country.
  • Click the Start Mapping button.
custom map

Wait to click the "continue link" until the new screen loads the image.

custom map

Step #3. Add points in the map

  • Right click
  • Create poly
  • Set a url that will work as a link for this area
  • Optionally set a Title, Alternative title and Id
custom map

Now, click over the map to draw a custom area. Every click will create a dot; create as many dots as you need to define an area inside the map.

custom map

Once you've joined all the dots, a message will come up asking to confirm this is a complete point.

custom map
  • Click the save button
custom map

Repeat this process to add a new point.

Step #4. Get HTML code

  • Right click
  • Get code
custom map
  • HTML code tab
  • Scroll down to reach the embed code and copy-paste it in your site.
custom map

Step #5. Replace the image path

In the embed code, look for the image tag:

<img id="image-maps-2015-10-05-143809" src="http://www.image-maps.com/m/private/0/6kq7rht7s5a32563etvh3oobd2_mexico.png" border="0" width="600" height="403" orgWidth="600" orgHeight="403" usemap="#image-maps-2015-10-05-143809" alt="" />

Since the path to the map image points to the image-maps.com domain and will be deleted automatically 24 hours later, it's highly recommended to upload that same file into your site, then set the new location by replacing the src value:

<img id="image-maps-2015-10-05-143809" src="http://feedproxy.google.com/path/to/images/your-map.jpg" border="0" width="600" height="403" orgWidth="600" orgHeight="403" usemap="#image-maps-2015-10-05-143809" alt="" />

Step #6. Highlight the points

In the preview, when you put the mouse over the point, a link will be accessible. You'll notice the cursor changes. However, that's not enough visual indicator to show there is a clickable area. The next step will be to explain how to highlight the points inside the map.

  • Download this zip
  • Decompress the file
  • Look for jquery.maphilight.min.js and upload into your site
  • In the head of your site load jQuery and Maphilight plugin:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://feedproxy.google.com/path/to/jquery.maphilight.min.js"></script>
  • Below, add more code to run Maphilight:
<script type="text/javascript">$(function() {
    $('.map').maphilight();
});</script>
  • In the html code of your map, add the class "map" to the image so the plugin can reach this element:
<img id="image-maps-2015-10-05-143809" src="http://feedproxy.google.com/path/to/images/your-map.jpg" border="0" width="600" height="403" orgWidth="600" orgHeight="403" usemap="#image-maps-2015-10-05-143809" alt="" class="map" />

Step #7. End result

If everything is correct, you will see a background and border when you hover your mouse over that area:

custom map

This map can be embedded in WordPress, Joomla and Drupal. In some cases, it may be required to turn off the WYSIWYG editor to avoid the code being filtered.


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.


Oct 03 2015
Oct 03

We previously wrote a tutorial on how to create custom 403 and 404 pages in Drupal.

That tutorial used Drupal's built-in functionality, but that approach does have a few disadvantages.

So today we'll look at another approach, the CustomError module.

Pros and cons of different approaches

Drupal's built in functionality:

  • Pros: It's easy to use, quick, and doesn't require any modules.
  • Cons: It uses nodes for the pages. This presents potential problems with the pages showing up in search results and anything else that references nodes (e.g. a blog for popular content).

CustomError Module:

  • Pros: It doesn't use nodes and has additional features for customizing error pages.
  • Cons: It requires an additional module to maintain and it's a bit more set up.

Using the CustomError Module

CustomError Module for Drupal 403 and 404 Error Pages

At the bottom of the screen:

  • Enter "customerror/403" for the 403 option
  • Enter "customerror/404" for the 404 option
  • Save configuration
  • Go to Configuration > Custom Error.
  • Customize each of the error pages to your liking. Note, HTML can be used in the description.
  • Save configuration when done.

Finally, test your new 404 and 403 error pages.

As you can see, CustomError makes it simple to create custom error pages without using nodes.

Additional options

The CustomError module has two additional options:

  • Theme selection: allows you to select a different theme for the error pages. Note that both 403 and 404 errors will display using this one theme.
  • 404 Redirects: see below.

The 404 Redirect area allows you to specify 404 URLs that you'd like to redirect. To do so, enter the complete path of the page, add a space, then enter the absolute URL of the destination page.

For example, if I had a URL that was http://ostmdb.dd:old-login-page and I wanted to redirect it to http://ostmdb.dd:8083/user , then I'd use:

old-login-page http://ostmdb.dd:8083/user

You can add additional redirects on separate lines.

Pro tips for the CustomError module:

  • CustomError will attempt to match any URL that has the fragment you specified, not just complete URLs. For example, if you told it to look for "color", it will match /color/ , /colors/ , and /red-colors/ as 404 URLs that it should redirect.
  • The redirects will only work for 404 pages. If the URL generates a 404 response, only then will a redirect be looked for.
  • You can use regular expressions to match the 404 page(s).

About the author

Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.


Oct 02 2015
Oct 02

By Valentin Garcia 06 October 2015

How to Fix Design Issues in Internet Explorer 10 and 11

One of our members needed to fix an issue for a site in Internet Explorer 11. At the same time, he wanted to avoid changes that might mess up other browsers. The site looks fine in Firefox, Chrome, Safari and Opera.

In this tutorial we will show you how to add custom CSS for just Internet Explorer 10 and 11.

See what CSS is needed

By using the Internet Explorer's inspect tool, we can see which CSS is required to fix the design issues such as margin, width, height, etc.

  • Right click over the element you want to fix
  • Inspect element
How to Fix Design Issues in Internet Explorer 10 and 11
  • Select the element in the left side of the screen by using the DOM explorer:
How to Fix Design Issues in Internet Explorer 10 and 11
  • Play with the CSS properties on the right side of the screen to preview your changes:
How to Fix Design Issues in Internet Explorer 10 and 11

Once you are satisfied with the preview result, it's time to integrate your code in your site.

Add the custom CSS

In one of your CSS files, add your custom CSS inside the media query below:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   // Your custom CSS goes here
}

Test the end result

Open your site in Internet Explorer and confirm everything looks fine; it may require clearing browser and CMS cache. Do the same in Firefox, Chrome, Safari and Opera to double check the new code is not affecting those browsers.


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.


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