We continue our series of “how to” articles to assist web designers, developers, webmasters and others with answers to frequently asked questions.  The series provides “how to” information within our core service areas: digital strategy, web design, web development, data integration, application hosting and online marketing. The information is meant to provide an introduction to each of the topics to help those within a particular discipline, such as web design or web development, begin an exploration into each subject more deeply.  

The next article in our series describes how to configure and manage several modules within Drupal.  

DRUPAL

Core (build in) fields 

FILE

This is a basic file field that will enable you to upload files only from you computer.

How do you add it to a content type?

  • Go to content type Manage Fields
  • Enter label (name for field)
  • Choose File field type and widget
  • Click Save
  • Choose options (Allowed file extensions*, File directory, Maximum upload size, Number of values etc.)

IMAGE

This is a basic image field that will enable you to upload images only from you computer. 

How do you add it to a content type?

  • Go to content type Manage Fields
  • Go to Add existing field (because image field will already exist with installation)
  • Choose field_image from “Field to share” select list
  • Label and widget will be assigned automatically
  • Click Save
  • Choose options (Default image, Allowed file extensions *,File directory, Maximum upload size etc.)

Modules for advanced media management

IMCE

The IMCE module can be added to the file, image field or text editor. It provides a file browser with options to upload files, create thumbnails, delete, resize, preview, sort by name, size, width/height, and modify dates. You can upload new files to the server, but also choose existing ones and add them to your Drupal website.

Basic Configuration 

  • Go to Configuration > Media > IMCE > User1 > Edit
  • Choose options (Maximum file size per upload, Permitted file extensions, Maximum image dimensions etc.)

Add to image / file field

  • Download and enable the “IMCE for FileField” module
  • In file / image field settings (edit), check “Allow users to select files from IMCE File Browser for this field.”

Enable for CKEditor

  1. Go to Configuration > CKEditor > Profiles (Full / Advanced) > Edit > File Browser Settings 
  2. Choose IMCE in select list options for:
  • File browser type (Link dialog window)
  • File browser type (Image dialog window)
  • File browser type (Flash dialog window)

MEDIA

Media can be used to upload local files (images, video, audio, etc.), files from other domains using only URL’s, and videos from different video platforms  (YouTube, Vimeo, etc.) As an aside, one positive to using files or media hosted on other provider platforms is because the files are not saved on your server, they don’t take a lot of space, and can increase performance. 

You can use Media for file / image fields and editors (CKEditor and WYSIWYG).

Required modules

Configure 

Configuration > Media > Media browser settings

Add to image / file field

  1. Choose Media Browser widget option for your file / image field
  2. Click Save to access additional options:
  • Enabled browser plugins (Upload, Library, My files)
  • Allowed file types (Image, Video, Audio, Document)
  • Default image (if no image is chosen)
  • Allowed file extensions
  • Image resolutions

Media Internet Sources

To add files from sources outside your Drupal website and domain using only URL’s, enable the Media Internet Sources module – a module that will be installed together with Media. This will provide a Web tab in your Media browser and File URL field. 

With this module you will be able to add URL’s for files and images. To upload videos you will need to install the following modules for the video provider you need:

Media CKEditor

Enable the plugins in CKEditor

  • Edit the CKEditor Profile (such as admin/config/content/ckeditor/edit/Full)
  • Go to the EDITOR APPEARANCE section
  • Enable “Plugin for inserting images from Drupal media module” plugin
  • Enable “Media Browser for File Upload/Browsing” plugin
  • Save the profile

That should be it. Now when you click on the image plugin button and browse the server it will present the media browser popup. This is also very useful for adding image fields to CKEditor Widgets.” – Source

“*Note that Media simply handles files. Adding new files and other file-related functionality, such as adding fields to files, is handled by the File Entity module.” – Source

VIDEO EMBED FIELD

(*Ctools module required)

Add Video Embed Field

  1. Add Video embed filed type to content type
  2. Choose Video Embed for Field Type and Video for Widget
  3. Click Save 
  4. Choose different options (default value, Select the allowed video providers – YouTube / Vimeo, Number of values etc.)

Enter the URL in the created field and the video will display on the page.

Configuration

Configuration > Media > Video Embed Field > Video Embed Styles > Normal / Teaser > Edit

Settings for Youtube and Vimeo are separate. You can choose Player Width, Player Height, Player Theme, Display Youtube, player controls, etc.

YOUTUBE FIELD

Choose this module if you know you will only need to stream YouTube videos.

Add YouTube Field

  • Install module 
  • Select YouTube video as Field Type and YouTube as widget 
  • Click Save
  • Choose options (Default Value, Number of values)
  • Enter the URL into the field you’ve created

COLORBOX

With this module images one can open media on the same page with the overlay style you choose.

To enable it you need to install both Colorbox and the Libraries API module, but also the Colorbox plugin.

Note: When the module is installed, please make sure to check in Reports > Status Reports that there is no warning message for Colorbox that a library is missing. If there is such a warning, follow the instructions or your module won’t work.

Configuration

Configuration > Media > Colorbox

  • Check Enable Colorbox load to “enable custom links that can open forms and paths in a Colorbox”
  • Check Enable Colorbox inline to “enable custom links that can open inline content in a Colorbox”

Add Colorbox to image field

  • Create image field
  • Go to manage display tab
  • Set format to Colorbox
  • In Colorbox settings you can choose: Content image style, Content image style for first image, Colorbox image style, Gallery (image grouping) and Caption.

Also, after installing modules and plugin, if it still doesn’t work, try Flush All Caches.

– Source

FLICKR

With this module you can add media from Flickr to display on your site.

Configure

Configuration > Media > Flickr

  • FLICKR CREDENTIALS (you can get this info on Flickr) – it will connect Drupal to your Flickr account
  • Enter the API Key * (https://www.flickr.com/services/apps/create/apply)
  • API Shared Secret *
  • Default Flickr User ID

Other options to choose are:

  • Number of photos per album*
  • Default size for photos in an album
  • Date formats
  • Styling (Image styles, Emphasize the image on hover?)
  • Update interval

Add Flickr Photo field

  • Go to content type fields
  • Add new field
  • Add label
  • Choose Flickr Photo as field type and Widget
  • Click Save
  • In node enter Item Type (Photo, Photo Set), Item id and User Id (this one should already be there if we entered it during configuration)

Flex Slider

RequiredViewsFlexSlider Library (instructions for installation can be found in the README document in the FlexSlider module folder, check Reports -> Status to see if it’s installed)

With the Flex Slider module one can create a slider that is responsive, so you don’t have to change the CSS for different browsers and devices. This makes it a time saver.

Configuration

 Configuration > Media > FlexSlider

  • Create View
  • Check Create a block
  • Choose FlexSlider for Display format
  • Continue & Edit
  • Add Field (this will be the content you want the slider to show, it doesn’t have to be an image, it can be a file field, body, etc.)
  • Go to field options
  • Uncheck Create a label (or leave it unchecked if you want the slider to show label)
  • Choose additional options for the field you chose
  • Click Apply (all displays)

For further instructions see these videos:

How To Create a Slideshow In Drupal 7 – Part 1 Setup

How To Create a Slideshow In Drupal 7 – Part 2 Configure

How To Create a Responsive Slideshow In Drupal 7 with FlexSlider

Configuration

Configuration > Media > FlexSlider

  • Default > Edit
  • Choose type of Animation (Fade, Slide)
  • Animation Speed
  • Slide Direction (Vertical, Horizontal)
  • Paging Controls (On, Off, Thumbnails)
  • Previous / Next Link Text
  • Save
  • Refresh page to see changes

Image source

Please contact us if you are interested in a web strategy, design, or marketing project requiring our web strategists and communication experts. 

With offices in Washington, D.C. and Los Angeles, Ca., New Target provides digital strategy, digital marketing, web design, web development, branding, website hosting, and creative services for prominent nonprofits, companies, and government.