Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Nov 12 2020
Nov 12

So you're working away on your Drupal site using Acquia’s DevDesktop just like we do here at OSTraining, and you want to take a snapshot of your site to use for another project. Or maybe you just want to keep a backup of it at a certain state in your Drupal site development.

In this video, I'm going to show you exactly how to create Drupal site copy in Acquia’s DevDesktop.  It's really simple. 

Let's get to It.

"Hi, I'm Rod Martin, and this is OSTips from OS Training.

Thanks to DevDesktop, I've got a website that I'm working on for a course, and I'm going to create an exact duplicate.

  • go to DevDesktop
  • click on the Local database link
  • select Export menu link at top of Admin screen
  • select Custom instead of Quick
  • click Go

That's going to actually download the entire database into a file, and that's what you need.

  • go to DevDesktop
  • click on the More button
  • click New Drupal multisite (Here's the key: you need to use multi-site to make this quick and really simple)
  • name the new site (I'm going to call this d9site2)
  • select Start with a MySQL database dump file
  • click Browse button
  • select the file you just downloaded
  • click Ok

DevDesktop is going to create the new multi-site. It takes just a moment.

  • select the new Multisite you just created from the dropdown
  • click on Local site link

And there you are. One key thing to remember is that NONE of the files that you've uploaded to your old site will be moved over to the new site. Again really simple to fix.

  • click Local code link
  • click on sites folder
  • click on default folder
  • click Copy "files"
  • click Paste Item into the site folder you just created
  • click Replace button
  • go to your site

You're good to go!

The last thing you'll want to do once you've logged back in is flush all caches. That's going to rebuild all of your media, your images, your thumbnails, etc, etc.

As I said, it's really simple with just a few steps to make a snapshot backup of a Drupal site at any stage of development using DevDesktop and multi-sites.

Thanks for watching today. This is OSTips from OSTraining.  My name is Rod Martin, and we'll see you in the next video."

[embedded content]


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 2020
Oct 30

We all know that Drupal 9 is here, but is your site ready?

In this video, I'm going to share with you 3 ways to check to see if your modules and themes are ready to move to Drupal 9.

Alright, let's go.

"Welcome to OSTips from OSTraining. My name is Rod Martin.

The simplest way to check modules and themes is to:

  • go to drupal.org/project/"the name of your module"
  • scroll down to the bottom
  • check for requirements that are:  ^Drupal 8.8  || ^Drupal 9.0

That indicates that this particular project is ready for Drupal 9.  And if you're running a website that has at least Drupal 8.8, well then you can install this particular version of the module and you'll be ready to go to Drupal 9.

If you check every module and theme on your site, then you should be good to go.

The 2nd way is a little trickier, but basically will give you the same information.

  • go to the folder structure 
  • click on the modules folder
  • click on admin_toolbar folder
  • open admin_toolbar.info.yaml

Here's what you're going to see: core_version_requirement: ^8.8.0 ||  ^9.0 

That indicates that this module is ready for drupal 9.  If you see core: 8.x and you do NOT see core_version_requirement, your module has NOT been updated for Drupal 9 as of yet. You'll need to check back on the project page.

The 3rd way to do it is slightly more difficult, and there are two versions of it. The first version of this 3rd option is called Drupal-Check.

You'll see an analysis of all of the modules on your site.  The instructions are on this page to give you a hand.

The second version of this 3rd option is called Upgrade Status, which is going to give you a report right on your Drupal site.

$ composer install --dev

$ composer require 'drupal/upgrade_status:^2.0'

If your Drupal 8 site is NOT based on Composer yet, this would be a good time to take care of that first.  Again all of the directions are on this page for you.  The Upgrade Status module gives you a lot more information than Drupal-Check does.

upgradeStatuspic.jpg

So to recap the 3 options:

  1. Use drupal.org/project/ the name of your project and check to see if the Drupal 9 version is available making sure that you are on the latest version of the module
  2. Use the .info.yaml file
  3. Use either drupal-check or the Upgrade Status modules 

The bottom line is this:

If you're on Drupal 8.9, you are probably ready to go, but don't take my word for it.  Do your tests, but be sure and set up a development version of your site BEFORE you do anything to the production version.

All right, I hope this has been helpful.

Thanks for watching. This has been OStips from OS Training, and I'm Rod Martin."

[embedded content]


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 09 2020
Oct 09
How would you like to be able to set up an ecommerce platform on your drupal site in less than 60 seconds? You can! In this video, I want to share with you my little frustration with drupal and drupal e-commerce. It's really hard to set up!  However,  there's a fantastic e-commerce platform called ecwid that allows you to set up your store in no time.  Then you can literally have it embedded on your Drupal site in less than 60 seconds. People will never know the difference, because everything stays on your Drupal site! Let's check it out.

"Welcome to OSTips from OSTraining. My name is Rod Martin.

I'm here on a brand new installation of Drupal with nothing else on it as you can probably tell.  You'll see that this is exactly what it sounds like: a module for the ecwid shopping cart system. We're going to:
  • copy the tar 
  • install the module
  • enable the module 
You'll notice that there's a brand new menu up here in the navigation. 
  • click on the ecwid menu item
  • click setup
  • Click connect button, (if you already have an ecwid account created)
If you do NOT have an ecwid account created, you can click on the text link below the button and create one now. I happen to have one, so i'm going to:
  • click connect button
  • log into my account
  • click accept
Now my store is completely integrated into my drupal website. You'll notice in the top bar there's an ecwid menu as i mentioned and this is actually my ecwid store on my drupal site.  I can see
  1. my sales
  2. my catalog
  3. my marketing
  4. the storefront
There's my store, right inside my Drupal site!  I can't imagine an easier way to get a shopping cart into your Drupal site. And everything stays right on your Drupal site.  One of the great things with ecwid is that they're running a deal right now as well. If you're watching this in 2020, their business plan is FREE until January of 2021. Now I'm going to let you check that out, because pricing changes so head over to ecwid.com and take a look at what they're doing there.

Thanks for watching. This has been OStips from OS Training, and I'm Rod Martin."

[embedded content]


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.
Sep 25 2020
Sep 25

I don't know about you, but as a site builder when I add a date field to a content type in Drupal, and I tell it I do NOT want the time just the date and then I go to a node, and I enter the date, and it shows me both the date AND the time... it kind of drives me crazy!

How do we fix it? In this video, I'm going to show you how to create new date & time formats in Drupal sites, so you don't have to worry about getting a time and a date when you only want the date.  And, as a bonus, you'll get it in the format that you want.

Let's get started!

"Welcome to OSTips from OSTraining. My name is Rod Martin.

I've just added a date field to my article content type, and you'll note I've set it to date only.

Well, you know the problem.  When I have a node that uses this field, it's automatically going to show the time even though I did not ask for it, and I did not enter a time.   

If I go ahead and manage display for that field, you'll note that the format has the time. Click on the gear.   I'm really limited here as to what kind of format I can choose.  Let's say I want the long date so: Tuesday June 23rd 2020, but without the time.  There's no format for that!

Let's take a look at how to change that.

  • head over to configuration / regional / language / date and time formats

You can either edit one of the top three, but I don't want to choose that, or you can create a new format. There's two ways to do this:

  1. I can start from scratch 
  2. I can click Edit and copy an existing one

I am choosing option #2.

  • copy one that is almost what I need
  • create a new one: long date with no time 
  • paste that string in

Now what's giving me the time is H : I.  It's worth looking at the PHP manual here, so you can see all of the different options. You can create a date and time stamp to reflect pretty much anything you want. For example:

  1. 12 hour format
  2. 24 hour format
  3. day /month /week
  4. ordinal suffix for a day

I'm gonna change this. I'm going to remove the dash and the time. 

  • L is going to be the day
  • F is going to give me the month
  • j is going to give me the days of the month without the leading zeros
  • S after the J
  • Y is for the four-digit year

Let's take a look. Your format is going to be:  Tuesday June 23rd 2020

Now all I have to do is update my display to structure content types article and manage display.

  • head over to my date (and my new date format with no time is there)
  • click update
  • click Save
  • look at the node

And there it is: Tuesday June 23rd 2020

Well that's it! It was pretty simple. With just a little bit of PHP and some help from PHP net, you can build whatever date and time formats you need for your Drupal website. 

Thanks for watching. This has been OStips from OS Training, and I'm Rod Martin."

[embedded content]


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.
Sep 04 2020
Sep 04

So you're a Drupal 8 site builder, and you don't have access to the theme, but you need to test out some CSS or JavaScript to see if it's going to work just the way you want. Well, I have a solution for you.

In this episode, I want to talk to you about a terrific module called Asset Injector that can be used to add CSS & Javascript to your Drupal site without having to access the theme or mess with a lot of code.

Let's take a look!

[embedded content]

"Welcome to OSTips from OSTraining. I'm Rod Martin.

 I'm over here at drupal.org on the Asset Injector page, and you'll note that you're able to inject CSS and JavaScript using this really great module. It installs like any other module and was last updated in December of 2019. You'll also note that the Drupal 9 version is planned to be released, so that's really terrific. This module will continue to be available to us.

  • install the module
  • go to configuration development 

You'll see a new item called Asset Injector. You can choose to inject either CSS or JavaScript. I'm just going to use a simple CSS example to make the point.

  • click on CSS injector
  • give it a name
  • add the actual CSS code (you don't need anything except the actual CSS for whatever variable you're trying to manipulate.)
  • decide whether it's just print, screen, or all (you can pre-process the CSS if you need to)
  • add conditions to say where this CSS should be injected

Well, I've made it pretty simple.  I've just injected it on one individual node, but you can really pinpoint where your CSS or JavaScript is going to be injected.

  • click Save 
  • go to that node

Here I am on the home page.  When I click on the node to test my CSS, I see that my h1 has turned red!  It worked!

Well that's it.

Although, this is not a replacement for having your CSS and JavaScript properly placed inside your theme, but in a pinch the Asset Injector module can really be a time-saver and even a lifesaver.

Thanks for watching. This has been OStips from OS Training, and I'm Rod Martin."


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.
Aug 14 2020
Aug 14

I've never understood why you can't schedule the publication or unpublish a node in Drupal. WordPress does it. Joomla does it. Well guess what - Drupal does it too!

In this video, I'm going to show you how to use the scheduler module to publish and unpublished nodes on your schedule. Now, you won't have to go to work at midnight on Friday night!

Let's go.

[embedded content]

"Hi and welcome to OSTips from OSTraining. I'm Rod Martin.

The scheduler module is found of course at https://www.drupal.org/project/scheduler. You can either download it, copy one of the locations, or use rush to install it.

There's nothing non-standard about it. Once installed:

  • click on configure

There's not much here to do.  You can allow users to enter only a date and use a standard time that's a global override.  If you're not using Drupal's default cron, you'll need to run lightweight cron in order for this to work, but cron jobs are a topic for another video.

Scheduler only works with content. When you have it installed there's a new section here when you edit a content type called scheduler. You have a number of options enabled for this content type.

  1. change content creation time to match the scheduled publishing time
  2. require scheduled publishing
  3. create a new revision on publishing
  4. choice of a few Advanced Options

Action to be taken for dates in the past display an error message. Publish the content immediately after saving or schedule the content for publication on the next cron run.

For unpublishing, you can enable scheduled on publishing, require schedule done publishing, or create a new revision upon unpublishing the node.

Edit page layout is simply where the scheduler is going to appear. Will it appear in the vertical publication tabs on the right hand side and will it be expanded or not.

When somebody creates a new node, click save content type and add content.  You'll notice scheduling options on the right.  I can publish it on a particular date and a time and unpublish it on another date and time.

What's so fantastic about this of course is how I don't have to be around for the node to appear on my website.

Well it doesn't get much easier than the scheduler module for Drupal 8 for publishing and unpublishing content whenever you want.

Well thanks for watching. This has been OStips from OS Training."


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.
Jul 31 2020
Jul 31

One of the great things about Drupal's new media manager is the ability to easily see all the media you're using on your website.

What if you want to replace one of those images or even more likely a PDF that needs to be updated?

Well in this OSTip, I'm going to show you how.

Let's go!

[embedded content]

"Hi and welcome to OSTips from OSTraining. I'm Rod Martin.

Osborne is the creator of this module.  It installs like any other module, but here's the instructions you'll need to know to enable the module.

  • browse to the forum
  • display configuration for any file based media types
  • enable the replace file form display widget (usually put it right under the file or image widget)

This is how it works. I've already installed the media entity file replace.

  • head over to structure media types image
  • manage form display
  • grab replace file
  • drag it up under tags
  • click Save

Now under our media item, you'll see the replace file section where you can replace the file and update everywhere it's been embedded in one simple action.

All right well that's it.  It can't be much simpler than that, and it adds such amazing functionality to the media manager for Drupal 8.

This has been OStips from OS Training."


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.
Jul 10 2020
Jul 10

You can create your own Digital Asset Management System right inside your Drupal 8 website using nothing but core modules.  Watch our video and learn how!

 "Welcome to OSTips from OSTraining. My name is Rod Martin and in this video I'm going share with you how to build your own digital asset management system right inside your own Drupal website, using nothing but core modules. Let's go!

So to create our digital asset management system the first thing you need to do is install the media and media library modules in core under the extend menu.

Next, head over to content and media. I've uploaded some media items already just to get us started. While this might be a good start, that's all it is. We get a thumbnail, a media name and honestly how often do we name our media items well... the type it is, who the author is, status updated, and we get some operations. This isn't enough for an asset management system by any stretch. Let's add a taxonomy to it so that we can tag our images with appropriate terms. Easy to do! Head over to structure, taxonomy.

You can either do this through the tag system, but I recommend probably creating your own vocabulary and then defining all of the categories or tags you want for your images videos etc., so that they can be a little bit more controlled. For today, I'm going to just use the tagging system, and I've already added some tags: banner, hero office, animals, people.

Also, you might want to create a different taxonomy for videos, images, PDFs.

Next, head over to media types. Now you'll immediately notice media types are an entity which means they are "fieldable".

  • go to image >> manage fields
  • add a field (you know where I'm going with this already)
  • grab the taxonomy term field
  • call this image tags (That's going to define the taxonomy just for my image media type)
  • choose unlimited
  • click Save field settings

We'll choose the tags vocabulary and again depending on how you want to manage this, should a content editor be able to add new tags on the fly?

Generally I recommend against that simply because then it becomes pretty unwieldy, and you have typos and all other kinds of things. So we'll leave that unchecked. Save settings.

Well now I can head over to content media, and I can update my image with a new tag.

Kids are one of my tags and people are one of my tags. And there we go. Now again, this doesn't do us any good here because in this particular layout. We don't get to see any additional fields.

The next step is to update this view in order to see and filter by the tags that you've created. Structure, Views. Now in this case I'm just going to duplicate that media view because I don't want to really mess this up.

  • click duplicate 
  • add a field called image tags
  • add a filter criteria - image tags
  • leave as autocomplete
  • expose this filter to visitors
  • update that label just a little bit
  • save

Head back over to content and media, and now you will notice that we've got two media tabs here. We could fix that in a little bit I just wanted to get through it quickly.

You'll note here there are the image tags added to this particular image and of course I can now filter by any tag!

And there you go. Well that's it! A digital asset management system inside Drupal, using core modules. Now there's a little bit more to it than that, so I'd encourage you to check out the class below. This is OSTips from OSTraining, thanks for watching, please subscribe. I'm Ron Martin. "

Learn more about the Drupal 8 Media Module Class here.

[embedded content]


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.
Mar 16 2020
Mar 16

One of the important aspects of keeping your Drupal 8 site up-to-date, secure and performing well is to remove unused modules.

There are a number of reasons why you would want to do this:

  • Security - Every module should be kept up-to-date.  If you're not using a particular feature, you're just giving yourself more work to do.
  • Performance - Drupal is an event-based CMS so at every point in the page-build process, Drupal is checking to see if any module on your site wants to do something.  All of this adds up!
  • Site clutter - The "Extend" menu is long enough!  Not to mention any configuration menu items that a module might add.
  • Fluff - Some modules just don't belong - Some development modules such as Devel should never be on a production server.  It's always best to remove those completely.

Step 1:  Uninstall

When you install a module on your site, depending on the module, a number of things happen.  Obviously the code is added to the /modules folder.  However, if that module stores data in the database, then tables are created and sample data may be installed.  It's important to uninstall a module before you remove the code so the module's uninstall configuration file can perform it's tasks.  

It's also worthy to note that if you simply delete the code without uninstalling, you might encounter a huge performance regression which stems from Drupal recursively searching through the site for the "missing" module on every page load.

Caution:  When you uninstall a module that does write data to the database, all your data will be deleted.

uninstall module - How to Remove Unused Modules in Drupal 8

To uninstall a module:

  1. Log into your Drupal site and click on Extend -> Uninstall
  2. Find the module you wish to uninstall and put a checkmark in the box.
  3. Scroll down to the bottom of the page and click "Uninstall".

If a module has dependencies, you'll need to uninstall the module that requires something else first, then the main module second.  For example, Admin Toolbar can not be uninstalled until Admin Toolbar Extras is uninstalled.

uninstall module 2

Step 2:  Remove the module code from the codebase

As you may know, uninstalling a module in Drupal doesn't actually remove the code from the codebase.  The code stays in the /modules folder, ready to be installed again.  It's always safest to completely removed the code from your codebase.

If you do not have access to the codebase, you will need to ask your IT department or web host to do that for you.  If your website is hosted on something like Acquia Cloud or Pantheon, those tools are built-in.  If your site is hosted on a popular hosting service such as Hostgator, Hostmonster or Bluehost, you can do that via CPanel.  If your site is hosted on a service such as Digital Ocean, you'll need SSH access to delete the files.  It's beyond the scope of this tutorial to dive into every service, but suffice it to say, the files should be deleted.

Once you gain access to the codebase, you'll look for the modules folder.  Your module will be listed via the machine name.  Just delete the entire folder.  In the illustration below, to delete the Asset Injector module, you would delete the asset_injector folder.

uinstall module 3

One Final Thought

While it might be tempting to uninstall Core modules that you're not using, it really won't help. The modules you remove will be reinstalled on the next Drupal update regardless.


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.
Mar 05 2020
Mar 05

One of the most common questions in our training is how to add custom CSS or Javascript to a Drupal site.

The best solution, of course, is to add it to the theme (preferably a sub-theme); however many times site builders and editors don't have access to the codebase of a Drupal site.

To accomplish this, you can use the Asset Injector module.  This module combines CSS Injector and JS Injector from Drupal 7 into one.

Let's get started...

1. Install and enable the Asset Injector module.

Head over to https://www.drupal.org/project/asset_injector and either download the latest recommended version of the project (usually with a green background) or right-click on the .tar or .zip file and copy the location.

Asset Injector Download

Install the Asset Injector module:

  • Click Extend.
  • Click Install New Module.
    • If you copied the URL from the project page, paste it into the "Install from a URL" field and click Install.
    • If you downloaded the module, click on the "choose file" button, select the file and click Install.

After the installation is done:

  • Click Enable Newly Added Modules link. 
  • Check Asset Injector in the Development section.

Install Asset Injector

  •  Scroll down and click "Install".

2. Add Custom CSS

  • Go to Configuration > Development > Asset Injector

Asset Injector

  • Click CSS Injector.
  • Click "Add CSS Injector"
  • Enter a label.
  • Enter CSS code.  No need to add */ .

CSS in Asset Injector

If you click Save Now using the example above, every H1 tag (page titles etc.) will be red in color.

You can limit where this CSS is applied!  Assets can be restricted by: 

  • Content Type
  • Theme
  • Node ID
  • User Role

Note:  These settings can be combined, requiring all or just one of them for the condition to be applied under, "Condition Requirements".

Asset Injector Conditions

  • Click Save if you made any changes
  • Click Back to Site to review the update!

3. Adding Javascript

Adding Javascript is essentially the same process as above.

  • Go to Configuration > Development > Asset Injector > JS Injector and click "Add JS Injector".

JS Injector

  • Enter a label.
  • Enter JS code.
  • Select any of the Advanced Options required.
  • Select any conditions (they are the same as CSS Injector).
  • Click Save. 

Note: These configurations use the Drupal 8 Entity API and therefore, all configurations are held in the database. This means they are exportable using Configuration Synchronization or custom module installs using yml files.  This is great for multi-site installations where each site may have a few minor differences.

Also, at the time of this writing, the module does not work well with asset overrides, be it in settings.php, from the language system or other contributed modules. 

Summary

You don't need to be a themer to add some CSS or Javascript to your Drupal 8 website.  The Asset Injector module is a helpful addition for any site builder.


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.
Jan 06 2020
Jan 06

When Layout Builder was introduced into Drupal 8 Core, it gave Site Builders a tremendous amount of flexibility previously reserved for Front End Developers (or Themers).  While it represents a major leap for Drupal, there are still some shortcomings in the module, and that's where some great additional contributed modules are really helping.

In this blog post, we will highlight three of the best modules currently available.  (Note: more are being added all the time!). For a complete list of contributed modules for Layout Builder, visit https://www.drupal.org/docs/8/core/modules/layout-builder/additional-modules.

Layout Builder Styles

layout builder styles edit configThis module allows site builders to select from a list of styles to apply to layout builder blocks and layout builder sections.  Created by Brian Osborne (bkosborne) a Senior Web Developer from Princeton University, this module makes it incredibly simple to apply previously defined CSS styles to both sections and blocks (you'll need those styles in a stylesheet in your theme or use a module like Asset Injector).

A "style" is just a representation of one or more CSS classes that will be applied. Additionally for blocks, a block template suggestion is added for the selected style.

A simple user interface is provided for managing the styles available. Since a style is a configuration entity, it can be exported and imported just like any other configuration data on your site.

Please note that this module requires Drupal 8.7.0 at a minimum.  The full documentation is here at https://www.drupal.org/docs/8/modules/layout-builder-styles.  At the time of this writing, the module is still in beta; however, we've used it a number of times without issue.

Layout Builder Library

This module was created by Lee Rowlands (larowlan), a Senior Drupal Developer for PreviousNext (Tim Plunkett is a co-maintainer).

With this module, Site builders can create and deploy pre-defined layouts for each entity-type and bundle combination.  Content editors can then select from existing layouts.

Also, Site admins can prevent content-editors from creating their own bespoke layouts, but give them the ability to customize layouts on a per-content-item basis.

layout library

This module is also in Beta at the time of this writing; however, it is recommended by the project's maintainer, and we've had no issues with it.

Layout Builder Restrictions

layout builder restrictionsOut of the box, the Layout Builder "Manage Display" interface shows all blocks (including all entity-specific fields), and all layouts that are registered in the system. This module provides an interface for suppressing blocks and/or layouts. Sites can allow all options from a certain provider, or restrict all options by provider, or specify individual allowed blocks & layouts.

Created by Mark Fullmer (mark_fullmer) from the University of Texas.  

This module is very helpful in restricting what a content editor sees when they click add section or block.  

Restricting the layouts a content editor can choose, can prevent any "over-creativity" from creeping into your site.  By restricting blocks, the entire interface becomes less confusing.  The reasoning here is why should we display blocks (or anything) that we would never want to be added to a node?

This module is in version 2.4 as of this writing, and is recommended by the project's maintainer.  Mark has also committed to ensuring compatibility with Drupal 9.

Final Thoughts

Layout Builder is a game-changer for Drupal Site Builders.  These three additional modules really help make it easier to use!

Newcomers to Layout Builder in Drupal 8 should check out our 30-minute video class at https://www.ostraining.com/class/drupal-8-layout-builder/


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.
Jan 03 2020
Jan 03

For years, Drupal site builders have endured a less than great experience with any media they wanted to use.  It was difficult to manage and reuse images; let alone video, audio, and other media.  A number of excellent contributed modules tried to bridge that gap in Drupal 7; however Drupal 8 committed to having a media manager in core.  

As of December 2019, that wait is over with the Media module now officially out of "experimental" and fully integrated into Drupal core.

Probably the most exciting change for site builders in Drupal 8 is that almost everything is an entity, and media is no exception.  That introduces one big issue for images - an image style is not so ealily added to images as it was in Drupal 7.  Learn how to create and apply image styles for media following this tutorial.  It's not difficult, but it does require some planning, because it's now a four-step process.

Step One:  Set up Image Styles

Go to Configuration > Media > Image styles and define styles as needed. For this article, we will use "Gallery", but the steps can be repeated for additional styles as needed.  For simplicity and consistency, it's not a bad idea to use the image style names in the next step as well.

image styles

Step Two: Set up Media View Modes

Go to Structure > Display modes > View modes and navigate to the “Media” section. Add media view modes.

While it's not necessary to name the view modes the same as the image styles, it can help keep everything better organized, especially when there are many more styles than are being covered in this tutorial.

media styles

Step Three: Manage Media Display

Once all media view modes have been created, navigate to Structure > Media types > Image > Manage Display and enable "Gallery".  Continue to enable all custom displays created in Step One.

custom display settings

Now that these are enabled, go to the "Gallery" display, find the image field and make sure its format is “Image.” Click the gear icon and set the image style.
Repeat this step for remaining displays.

manage display media

Step 4: Manage Entity Display

Now we'll see it in action.  Let's review how to setup fields in a content type.  Note: this process can be used on any entity that allows for fields to be defined.

Go to the Manage Display tab of your content type, “Article” in our case. For the Default display, set the “Rendered entity” View Mode to “Gallery.” Now every article node when displayed with this mode will use that style to render the image field.

manage display content

Repeat this step for any other entity displays that have been created, and that's it.

Be sure to watch this video from our class on the Drupal 8 Media Module.

[embedded content]

See the full class here: https://www.ostraining.com/class/learn-drupal-8-media-module/


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.

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