# Editor Button ### Intro 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](https://docs.norrnext.com/quantum-manager/configuration/general#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*.

### Default Embed Templates 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: ```html Space 1

``` You can adjust any template for your needs and create new templates. You can also emded multiple files:

### Managing Embed Templates 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 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 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: ```html {alt}

``` 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. {% hint style="info" %} 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. {% endhint %}

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: ```html {alt}

``` 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: ```html Space 1

``` {% hint style="info" %} *Element* section is repeated as many times as the number of files is selected for embedding. {% endhint %} **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: 1. Paste your HTML code right into the sections. 2. 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. 1. Create two layout files in the following location `JOOMLA_ROOT/templates/{your_template}/html/layouts/plg_content_quantumanagercontent`: `before_image.php` with the code: ```html

Text before image

``` `after_image.php` with the code: ```html

Text after image

``` 2. 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. 3. That's all. Now try to embed some image and you will see that the following code will be pasted into the article: ```html [qmcontent][before]{{before_image}}[/before][item][variables][{"{file}":"images\/space1.jpg","{filename}":"joomla_black.png","{type}":"png","{size}":"4.86 kb","{width}":"","{height}":"","{alt}":"","{class}":""}][/variables][template] {alt}

[/template][/item][after]{{after_image}}[/after][/qmcontent] ``` Do not worry, this code will be replaced and you will get the desired output in your content:

### Examples 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](https://getuikit.com/docs/) to construct sample embed code. To add a new template simply click on the green plus icon. #### Lightbox [Lightbox](https://getuikit.com/docs/lightbox) element allows to create a responsive lightbox gallery with images or videos. In *Element* section paste this code: ```html

``` Embed window:

Result embed code: ```html

``` {% embed url="" %} #### Grid [Grid](https://getuikit.com/docs/grid) element alows to create a fully responsive, fluid and nestable grid layout. In *Before* section paste this code: ```html

``` In *Element* section paste this code: ```html

``` In *After* section paste this code: ```html

``` Embed window:

Result embed code: ```html

``` #### Slideshow [Slideshow](https://getuikit.com/docs/slideshow) element allows to create a responsive slideshow with images or videos. In *Before* section paste this code: ```html

``` Embed window:

Result embed code: ```html

``` {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.norrnext.com/quantum-manager/editor-button.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.