Editor Button
Editor button embeds a file or multiple files into the content.
Last updated
Editor button embeds a file or multiple files into the content.
Last updated
In order to embed (insert) different types of files into the editor (content), the editor button plugin is required. It embeds a file or multiple files into the content according to templates that are assigned to scopes.
Here we presume that the file types are uploaded in their corresponding scopes: images in the Images scope, music in the Music scope and so on. Custom scopes also meet this requirement.
The name of the button in the editor is Embed Files.
By default there are four standard templates that are assigned to four standard scopes.
When you click on Embed Files button Quantum Manager window will open. Select a file and click on Embed button.
Embed dialog window will open where you can set different fields and choose embed template. For example for images you can set width, height and description:
And for document you can set the file name:
All these fields depends on templates. When you embed a file, the embed code from the template is applied and the final embed code is pasted into the content. For example, the embed code for image is looking quite simple in the content:
You can adjust any template for your needs and create new templates.
You can also emded multiple files:
Embed templates can be changed in the editor button plugin settings. Proceed to Extensions > Plugins and search there for Button - Embed Files (Quantum Manager) plugin.
As we mentioned earlier all templates are assigned to scopes. Every scope have two sections: Fields and Templates.
Fields are dynamic blocks that are used in the templates. When you embed a file you can assign values to these fields. For example, this allow to construct attributes for HTML elements, but it's not limited to. A good example is a set of fields for Images scope:
The field consists of the following elements:
Name for Template - The name of the field that you will use in the template (placeholder name).
Name - The name of the field that will be displayed in the embed dialog.
Default Value - The default value for field if nothing will be set in the embed dialog.
Type - The type of field. The following types of HTML5 fields are allowed:
Text - simple text field.
Number - allows only numbers.
List - the list of values. Every value should be on the own line.
Color - a color picker.
Email - allows only e-mail address.
URL - allows only URL address.
Date - a date picker.
Time - a time picker.
To add a field, just click on the green plus icon. Let's create a new field Class:
Name for Template: class
Name: Class
Default Value:
Type: Text
Now we are ready to build our embed code.
Templates are used to construct the embed code. Here all the magic happens.
First is the Name - it is displayed in the list of templates inside embed window.
Then there are three sections: Before, Element and After.
Mostly you will use Element section, so let's start with it.
Element Section
In the element section you can add a piece of HTML that will construct an embed code for a specific file. Let's go back to our example of Images scope:
To use a field in the template you should use the name of the field in curly brackets (placeholder). It is the Name for Template option that you define when set up the field. For example, for image we have {alt}, {width} and {height} placeholders.
Note how we mentioned a file in the template. It has a special reserved placeholder - {file}, which is replaced with the path to a file.
Other reserved placeholders are:
{size} - file size in kilobytes
{filename} - file name
{type} - file extension
Now let's add one more field that we have created earlier - class. Change the code to:
That's it. Save plugin settings and let's back to embed dialog to check how the new field is displayed:
As you can see we have our new Class field. And that's how the final embed code looks in the content:
Element section is repeated as many times as the number of files is selected for embedding.
Before and After Sections
These sections are used to create more complex embed codes. In Before section you define a code that will be displayed before Element section and in After section you define code that will be displayed after Element.
This allow to create templates for elements like grid or slideshow or whatever you want.
There are two ways you can use these sections:
Paste your HTML code right into the sections.
Use layout files with HTML code.
The first one is easy. The second one is not so easy, but it has own advantages like having piece of HTML code that can be used in the different embed templates (so you do not need to repeat it form template to template). Let's see how to make these layouts and use them in before and after sections.
Create two layout files in the following location
JOOMLA_ROOT/templates/{your_template}/html/layouts/plg_content_quantumanagercontent:
before_image.php with the code:
after_image.php with the code:
In the Image embed template add to Before section this text: {{before_image}}. And to After section add this text: {{after_image}}.
As you can see to connect the layout file with the section you should use the file name in double curly brackets.
That's all. Now try to embed some image and you will see that the following code will be pasted into the article:
Do not worry, this code will be replaced and you will get the desired output in your content:
Now to better understand how the embed templates are working let's take a loook on several examples. These examples will show you how simple, but in meantime powerful embed templates are. We will be using UIkit to construct sample embed code.
To add a new template simply click on the green plus icon.
Lightbox element allows to create a responsive lightbox gallery with images or videos.
In Element section paste this code:
Embed window:
Result embed code:
Grid element alows to create a fully responsive, fluid and nestable grid layout.
In Before section paste this code:
In Element section paste this code:
In After section paste this code:
Embed window:
Result embed code:
Slideshow element allows to create a responsive slideshow with images or videos.
In Before section paste this code:
In Element section paste this code:
In After section paste this code:
Embed window:
Result embed code:
