Drupal 8 Upload Pdf File and Link

Read Managing Media Assets using Cadre Media in Drupal viii to learn how to add media management functionality into a Drupal viii.5 site using the core Media module.

I attended a core conversation titled "LET'S FIX FILE AND MEDIA HANDLING ONCE AND FOR ALL" at DrupalCon Prague in 2013.

This got my attending, not considering the title was in all caps, but considering Drupal needed to gear up media management, as the title says: "One time AND FOR ALL".

Let's confront it, Drupal doesn't handle media very well when compared to other systems. I've worked with clients who are used to a certain level of functionality when it comes to managing images or videos on websites.

In Drupal seven you lot had a few options.

You could use the Media module. Only embedding images through the editor could be buggy depending on which module you'd use to implement the editor, i.due east., Wysiwyg or CKEditor.

And then you have Scald, which is a pretty good module. Another module which has been effectually for a long time is IMCE.

However, adding media management into a Drupal site isn't as straightforward as you think. That's why I attended the core chat in Prague. I too thought Drupal needed a great and robust media system.

Fast forrad a couple of years since DrupalCon Prague and things have inverse.

Cheers to the work from the Drupal Media team, managing media in Drupal 8 has got a lot improve.

At present they are working on getting this functionality in Drupal cadre, which I call back is admittedly amazing.

In this tutorial, I'll evidence you how to set media management in Drupal 8.

iii Parts to Treatment Media in Drupal

Everyone has their ain definition of media management. In this tutorial, I'm going to focus on 3 parts:

1. Storing assets
2. Embedding assets
3. Browsing assets

I want to give users the ability to create media avails. Then have a button in the editor which they can apply to browse assets then embed them.

We'll employ iii modules to handle this: Media Entity, Entity Embed and Entity Browser.

What's Happened to the Media Module?

In Drupal 7, the Media module was jam-pack with a lot of functionality. In Drupal 8, a lot of its functionality has been broken out into seperate modules. In that location is a Drupal 8 version of Media and information technology'll exist used to create an out-of-the-box solution. The module doesn't do much other than ship a bunch of configuration.

Part 1: How to Create Media Entities

To store media avails you'll demand the Media Entity module. The module itself won't handle whatsoever media, information technology's simply a base entity.

So y'all'll demand to download other modules which are media providers. For example, if y'all want to handle images then download and install "Media entity image". If you lot want to handle audio files you'll demand the "Media entity audio" module.

For a full list of media handlers go to the Media Entity project page.

I'm only going to focus on two types of avails in the tutorial: images and embedded videos (YouTube or Vimeo).

Let's start by downloading the following modules:

• Media Entity
• Media entity prototype
• Video Embed Field
• Entity

Then install, "Media image entity" and "Video embed media" (sub-module of "Video embed field")

Using Drush:

$ drush dl media_entity entity media_entity_image video_embed_field $ drush en media_entity_image video_embed_media

Create Prototype Media Packet

To handle images nosotros'll need to create a media blazon for images.

one. Go to Structure and click on "Media bundles".

From this folio y'all manage all the unlike media bundles. This is similar to the "Content types" page.

ii. Click on "Add media parcel".

3. Enter Epitome into Characterization, "Used for images." into Description and select Prototype from the "Blazon provider" drop-downwards.

Ignore the other fields for now and coil to the bottom and click on "Save media bundle".

You can ignore the "Field with source information" drop-down. We'll need to create a field and map it later.

4. Now click on "Manage fields" from the Operations drop-down.

Nosotros need to create an Image field that'll be used to store the actual image field.

5. Click on "Add field", select Image from "Add together a new field" and enter Image into the Characterization field.

6. Leave the "Field settings" page as is and click on "Salvage field settings" at the bottom.

7. Leave the Edit page as is and click on "Salvage settings" at the lesser.

8. Click on the Edit tab from the "Manage fields" page to edit the media package.

9. Make sure the "Field with source information" drop-down has selected the image field which we created and click on "Salve media bundle".

Type Provider Configuration

The "Media entity" is like any other entity type: it's fieldable. Y'all can add custom fields, you can configure the class display and full general display like you exercise with content types.

The simply difference is, nosotros demand to tell the media packet which field volition store the actual file. If you're creating a document media bundle, then you'd create a File field and select that in "Field with source information".

Field Mapping

The "Field mapping" section lets yous shop metadata from the epitome into custom fields. If you want to store the width, and so you'll demand to create a text field and select information technology from the Width drop-down.

Have annotation, the possible metadata properties are adamant by the blazon of provider. You'd get different options if y'all were configuring a certificate media parcel.

Create Embed Video Media Bundle

Now it's time to create another media packet and this one will be used for embedding videos, i.e., YouTube or Vimeo videos.

ane. Go back to "Media bundles" and click on "Add media bundles".

2. Enter "Video embed" into Label, "Used for embedding videos." into Description and select "Video embed field" from the "Type provider" drop-down.

3. Curl to the lesser and click on "Save media parcel".

We won't take to create a "Video embed" field and map it across similar we did for the Epitome bundle because "Video embed media" module did information technology for us.

Take notation of this message:

So we've created our media bundles at present let's await at how to create a media nugget.

How to Create a Media Assets

At this betoken, you tin but create avails from the Media page.

ane. Become to Content and click on Media.

From this page yous can add a media asset and view existing ones.

ii. To create an asset just click on "Add media".

Go alee and create an image and embeddable video.

Admission to Media Entities

By default Media Entity won't configure permissions. If you want to allow anonymous users admission to the assets then you'll need to assign them the "View media" permission.

Just go to People, Permissions and assign "bearding user" the "View media" permission.

Part ii: How to Embed Media Entities

Creating media assets is useful but if y'all tin can't embed them what's the indicate of having them.

In this section we'll embed assets directly into the editor using Entity Embed.

The Entity Embed module allows a site architect to create a button which lets an editor embed entities into a text surface area, hence the name Entity Embed. It tin be used to embed any blazon of entity not just media bundles. So be creative, you could utilise it to embed event content types.

To begin, download the following modules:

• Embed
• Entity Embed

Using Drush,

$ drush dl embed entity_embed $ drush en entity_embed

Create Embed Push

i. Get to Configuration and click on "Text editor embed buttons".

2. Click on "Add together embed button".

iii. Add Media into Characterization, select Entity from the "Embed type" and Media from the "Entity type" driblet-downward.

4. Once an entity type has been chosen, you can choose which media bundles can be embedded. If none are selected, and then all are available.

And finally, upload a button icon which'll be used in the editor. The default button is merely an "E".

Apply this one from the media module: http://cgit.drupalcode.org/media/plain/images/media_embed_icon.png?h=eight.ten-ane.x

At this point y'all should have two buttons, the Media button which nosotros created and the Node button that comes default with the module.

Add Embed Button to Editor

We created the embed button, now we demand to add together it to the editor.

one. Get to Configuration, "Text formats and editors" and click Configure on the "Bones HTML" (or any text format) row.

two. Move the icon from the "Bachelor buttons" into the "Active toolbar".

From this:

To this:

Configure Filters

The next office we demand to practise is configure the filters.

We need to make certain a few things happen:

1. Right ordering of filters or the embedding may not work
2. Making sure the "Allowed HTML tags" list accepts the tags used past Entity Embed

Configure "Allowed HTML tags" list

Equally presently as we added the push button to the active toolbar, the post-obit tags should exist in the "Immune HTML tags" list:

<drupal-entity data-entity-blazon information-entity-uuid data-entity-embed-display  information-entity-embed-brandish-settings data-align information-caption information-embed-button>

Make sure these tags are in the text field. If not then embedding media assets WILL NOT WORK.

Enable "Display embedded entities"

Enable the "Display embedded entities" filter. This is required for the embedding to work.

Ostend Order of "Align images" and "Caption images"

The Entity Embed README.txt mentions if y'all're using the "Align images" and "Caption images" filters, to guild "Align images" earlier "Caption images".

Trouble with "Restrict images to this site" Filter

The "Restrict images to this site" Filter stops an paradigm being displayed if you embed it and select an epitome manner.

The filter stops a user from pointing to an image which is not hosted on the site. For case, if yous're Drupal site is hosted at my-drupal.com, and then it won't allow you to add an image such as <img src="http://random-site.com/image.jpg" />, all your images demand to exist<img src="http://my-drupal.com/paradigm.jpg" />.

In that location is an open up effect on drupal.org about information technology.

The workaround for now, unfortunately, is to remove the filter.

Once everything has been configured, brand certain you lot click on "Save configuration" at the bottom of the page.

The filters listing should look similar this:

How to Embed Media into a Page

Now that the "Basic HTML" text format has been configured, nosotros should be able to embed assets.

1. Get to Content, "Add content" and click on Article.

2. Click on the embed button and a pop-up should appear with an autocomplete field.

Search for the nugget using its "Media name" and click on Next.

3. Select Thumbnail from "Display as", select an epitome fashion, marshal and add a caption.

Then click on Embed.

4. Once embedded you should meet the image on the right with the explanation.

Save the page and you're expert to go.

Embedding YouTube Videos

In the department above it was easy to embed an epitome. You only choose it, selected a thumbnail size and you're washed.

Only if you lot effort and embed a YouTube video using the "Video embed" bundle we created before. You'll just come across the video thumbnail and not an embedded player, not the desired result.

Create Media Bundle View Mode

The elementary solution is to create a custom view mode for the "Video embed" media bundle. Let's do this now.

1. Get to Structure, "Brandish modes", "View modes" and click on "Add together view mode". Then click on Media.

ii. Call this view mode Embed and click on Save.

iii. Go to Structure, "Media bundles" and become to the "Manage display" page for the "Video embed" bundle.

4. Enable the Embed view manner which nosotros only created by clicking on "Custom display settings" and select it, then click on Salve.

5. Go to the view mode by clicking on it on the summit left. Remove all the fields except "Video URL". Brand certain Video is selected from Format and "– Subconscious –" from Label.

So click on Salvage.

Now when you embed a video, select Embed from "Display as". If yous can't see the new view mode clear the site cache.

Part 3: How to Browse Media Entities

When we chose an asset, we were given just a single autocomplete field.

This is not ideal. Yous shouldn't await your editors to remember the asset name. Information technology'll be ameliorate to have some sort of browser where we tin see all the available media avails.

We'll use Entity Browser to create browsing functionality and best of all, information technology integrates nicely with Entity Embed.

Let'south set this up now.

To begin, go download the following modules:

• Entity Browser
• Ctools

Using Drush,

$ drush dl entity_browser ctools $ drush en entity_browser ctools

How to Create an Entity Browser

There are two steps involved in creating a browser using the module.

First you'll need to create a view using a brandish called "Entity browser". This view volition exist used to list out all avails. Then you'll need to configure an entity browser and select the created view.

Create Entity Browser View

1. Go to Construction, Views and click on "Add view".

ii. Fill out the "Add together new view" form, using the values defined in Table 1.0 and click on "Save and edit".

Table 1-0. Create a new view

Option	Value
View name	Entity browser
Car name	entity_browser
Show	Media type of All sorted by Newest first
Create a folio	Unchecked
Create a block	Unchecked

3. Next to the Chief tab click on "Add" and click on "Entity browser.

It's important that you select the "Entity browser" display or you lot won't be able to select this view when nosotros're configuring the actual browser.

Permit'south change the view to a table so it looks a petty better.

4. Click on "Unformatted list" next to Format.

v. From the pop-up, select Table and click on Apply.

At this bespeak we've switched the view from a list to a tabular array.

Now we need to add two fields: Thumbnail and "Entity browser majority select grade".

vi. Click on Add side by side to Fields, add together the Thumbnail field.

This will brandish a thumbnail of the media asset.

vii. And then add together the "Entity browser majority select course".

This field is used to select the asset when browsing. Information technology is a required field.

eight. Reorder the fields so they're as follows:

9. Once complete the preview should await like the image below:

x. Don't forget to click on Save.

Create Entity Browser

Now that we've created the view, let's configure the browser.

1. Get to Configuration, "Entity browsers" and click on "Add entity browser".

two. Enter "Avails browser" into Label, select iFrame from "Display plugin" and Tabs from "Widget selector plugin".

Leave "Selection display plugin" as "No selection brandish".

And then click on Next

Exercise not select Model if y'all're using the browser with Entity Embed it isn't compatible (Issue #2819871).

3. On the Display page, configure a width and acme if you like but do check "Auto open entity browser. This will save an extra click when embedding.

So click on Next.

4. Simply click Next on "Widget selector" and "Selection display".

v. On the Widgets page, select "Upload images" from the "Add widget plugin". Change the Label to "Upload images".

6. Then select View from the driblet-down.

7. From the "View : View display" driblet-downwardly, select the view which we created earlier.

If you can't meet your view, make certain you select "Entity browser" when configuring information technology:

8. One time configured the Widgets page should look like:

Configure Entity Embed to use Browser

Entity Embed at present needs to be linked with the browser we created.

i. Go to Configuration, "Text editor embed buttons" and edit the embed push.

ii. You lot should run across a drib-down called "Entity browser", select the browser you just created and click on Save.

Using the Entity Browser

Go into an commodity or folio and click on the Entity Embed button.

You should now see a popular-upward with two tabs: "Upload images and view.

From the "Upload images" tab, y'all can upload a new image and it'll create an Image media packet.

If you click on view, you'll run across all the media assets.

To embed an nugget, just choose which one you want and click on "Select entities".

How do you Add together a YouTube Video from the Entity Browser Folio?

I haven't figured this out yet. If you know how, go out a comment.

Summary

Calculation functionality to a Drupal 8 site to handle media assets can be done and it's fairly solid. But as y'all can see there's a lot of configuration involved. Hats off to the Drupal Media team for creating a flexible suite of modules. With the "Media in Drupal 8 Initiative" in the works, things are looking very promising.

Actress Resources

• Drupal viii Media Guide (eBook)
• Media Entity Browser
• File Entity Browser
• Content Browser

FAQs

Q: I created a new view mode but tin't see it when I embed an nugget.

Clear the site cache.

Q: When I embed an image and select an paradigm mode all I meet is a red cross.

Disable the "Restrict images to this site" filter.

broussardconevenibary.blogspot.com

Source: https://www.webwash.net/manage-media-assets-drupal-8/

Share this post