Skip to content

Commit 1d31ad7

Browse files
shrieleneeirenelagno
shrielenee
authored and
irenelagno
committed
MAGETWO-75104: Add image into Slide, Banner from the Stage
- Update documentation for "Add image into Slide, Banner from the Stage"
1 parent 6bfb164 commit 1d31ad7

14 files changed

+159
-1
lines changed

‎app/code/Magento/PageBuilder/docs/architecture-overview.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
1. [Master format]
1919
1. [Visual select]
2020
1. [Custom Toolbar]
21+
1. [Add image uploader to content type]
2122
5. [Roadmap and known issues]
2223

2324
[Introduction]: README.md
@@ -36,6 +37,7 @@
3637
[Master format]: master-format.md
3738
[Visual select]: visual-select.md
3839
[Custom Toolbar]: toolbar.md
40+
[Add image uploader to content type]: image-uploader.md
3941
[Roadmap and Known Issues]: roadmap.md
4042

4143
## What is PageBuilder?

‎app/code/Magento/PageBuilder/docs/bluefoot-data-migration.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
1. [Master format]
1818
1. [Visual select]
1919
1. [Custom Toolbar]
20+
1. [Add image uploader to content type]
2021
5. [Roadmap and known issues]
2122

2223
[Introduction]: README.md
@@ -35,6 +36,7 @@
3536
[Master format]: master-format.md
3637
[Visual select]: visual-select.md
3738
[Custom Toolbar]: toolbar.md
39+
[Add image uploader to content type]: image-uploader.md
3840
[Roadmap and known issues]: roadmap.md
3941

4042
## Overview

‎app/code/Magento/PageBuilder/docs/content-type-configuration.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
1. [Master format]
2222
1. [Visual select]
2323
1. [Custom Toolbar]
24+
1. [Add image uploader to content type]
2425
5. [Roadmap and known issues]
2526

2627
[Introduction]: README.md
@@ -39,6 +40,7 @@
3940
[Master format]: master-format.md
4041
[Visual select]: visual-select.md
4142
[Custom Toolbar]: toolbar.md
43+
[Add image uploader to content type]: image-uploader.md
4244
[Roadmap and known issues]: roadmap.md
4345

4446
## Configuration

‎app/code/Magento/PageBuilder/docs/custom-configuration.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
1. [Master format]
1919
1. [Visual select]
2020
1. [Custom Toolbar]
21+
1. [Add image uploader to content type]
2122
5. [Roadmap and known issues]
2223

2324
[Introduction]: README.md
@@ -36,6 +37,7 @@
3637
[Master format]: master-format.md
3738
[Visual select]: visual-select.md
3839
[Custom Toolbar]: toolbar.md
40+
[Add image uploader to content type]: image-uploader.md
3941
[Roadmap and known issues]: roadmap.md
4042

4143

@@ -61,6 +63,8 @@ Use `additional_data` in your `Vendor/ModuleName/view/adminhtml/pagebuilder/cont
6163
``` xml
6264
<additional_data>
6365
<arguments name="uploaderConfig" xsi:type="array">
66+
<item name="isShowImageUploadInstructions" xsi:type="boolean">false</item>
67+
<item name="isShowImageUploadOptions" xsi:type="boolean">true</item>
6468
<item name="maxFileSize" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\MaxFileSize</item>
6569
<item name="allowedExtensions" xsi:type="string">jpg jpeg gif png</item>
6670
<item name="component" xsi:type="string">Magento_PageBuilder/js/form/element/image-uploader</item>

‎app/code/Magento/PageBuilder/docs/developer-documentation.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
1. [Events]
1818
1. [Master format]
1919
1. [Visual select]
20-
1. [Custom Toolbar]
20+
1. [Custom Toolbar]
21+
1. [Add image uploader to content type]
2122
5. [Roadmap and known issues]
2223

2324
**[Architecture overview]** - An overview of the PageBuilder module architecture.
@@ -59,4 +60,5 @@
5960
[Master format]: master-format.md
6061
[Visual select]: visual-select.md
6162
[Custom Toolbar]: toolbar.md
63+
[Add image uploader to content type]: image-uploader.md
6264
[Roadmap and known issues]: roadmap.md

‎app/code/Magento/PageBuilder/docs/events.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
1. [Master format]
1919
1. [Visual select]
2020
1. [Custom Toolbar]
21+
1. [Add image uploader to content type]
2122
5. [Roadmap and known issues]
2223

2324
[Introduction]: README.md
@@ -36,6 +37,7 @@
3637
[Master format]: master-format.md
3738
[Visual select]: visual-select.md
3839
[Custom Toolbar]: toolbar.md
40+
[Add image uploader to content type]: image-uploader.md
3941
[Roadmap and Known Issues]: roadmap.md
4042

4143
This document contains reference information for events dispatched in PageBuilder.

‎app/code/Magento/PageBuilder/docs/how-to-add-new-content-type.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
1. [Master format]
1919
1. [Visual select]
2020
1. [Custom Toolbar]
21+
1. [Add image uploader to content type]
2122
5. [Roadmap and known issues]
2223

2324
[Introduction]: README.md
@@ -36,6 +37,7 @@
3637
[Master format]: master-format.md
3738
[Visual select]: visual-select.md
3839
[Custom Toolbar]: toolbar.md
40+
[Add image uploader to content type]: image-uploader.md
3941
[Roadmap and known issues]: roadmap.md
4042

4143

‎app/code/Magento/PageBuilder/docs/iconography.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
1. [Master format]
1919
1. [Visual select]
2020
1. [Custom Toolbar]
21+
1. [Add image uploader to content type]
2122
5. [Roadmap and known issues]
2223

2324
[Introduction]: README.md
@@ -36,6 +37,7 @@
3637
[Master format]: master-format.md
3738
[Visual select]: visual-select.md
3839
[Custom Toolbar]: toolbar.md
40+
[Add image uploader to content type]: image-uploader.md
3941
[Roadmap and known issues]: roadmap.md
4042

4143
## Overview

‎app/code/Magento/PageBuilder/docs/image-uploader.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Add image uploader to content type
2+
3+
## Navigation
4+
5+
1. [Introduction]
6+
2. [Installation guide]
7+
3. [Contribution guide]
8+
4. [Developer documentation]
9+
1. [Architecture overview]
10+
1. [BlueFoot to PageBuilder data migration]
11+
1. [Third-party content type migration]
12+
1. [Iconography]
13+
1. [Module integration]
14+
1. [Additional data configuration]
15+
1. [Content type configuration]
16+
1. [How to add a new content type]
17+
1. [Events]
18+
1. [Master format]
19+
1. [Visual select]
20+
1. [Custom Toolbar]
21+
1. **Add image uploader to content type**
22+
5. [Roadmap and known issues]
23+
24+
[Introduction]: README.md
25+
[Contribution guide]: CONTRIBUTING.md
26+
[Installation guide]: install.md
27+
[Developer documentation]: developer-documentation.md
28+
[Architecture overview]: architecture-overview.md
29+
[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md
30+
[Third-party content type migration]: new-content-type-example.md
31+
[Iconography]: iconography.md
32+
[Module integration]: module-integration.md
33+
[Additional data configuration]: custom-configuration.md
34+
[Content type configuration]: content-type-configuration.md
35+
[How to add a new content type]: how-to-add-new-content-type.md
36+
[Events]: events.md
37+
[Master format]: master-format.md
38+
[Visual select]: visual-select.md
39+
[Custom Toolbar]: toolbar.md
40+
[Add image uploader to content type]: image-uploader.md
41+
[Roadmap and known issues]: roadmap.md
42+
43+
## What's in this topic
44+
This topic describes how to add a reusable image uploader component to the PageBuilder stage for a content type.
45+
46+
## Overview
47+
48+
To add image uploader customization to PageBuilder:
49+
1. [Add configuration for the uploader](#add-configuration-for-the-uploader-config)
50+
2. [Update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file](#update-the-yourmoduleviewadminhtmlwebjscontent-typecontent_type_namepreviewjs-file-js-file)
51+
3. [Update the preview template to display the uploader component](#update-the-preview-template-to-display-the-uploader-component-preview)
52+
53+
## Add configuration for the uploader
54+
55+
Use `additional_data` in your `<YourModule>/view/base/pagebuilder/content_type/<content-type-name>.xml` XML config file to add the image uploader custom configuration to a content type:
56+
57+
``` xml
58+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
59+
<content_types>
60+
<type name="MyName" translate="label">
61+
...
62+
<additional_data>
63+
<arguments name="uploaderConfig" xsi:type="array">
64+
<item name="isShowImageUploadInstructions" xsi:type="boolean">false</item>
65+
<item name="isShowImageUploadOptions" xsi:type="boolean">true</item>
66+
<item name="maxFileSize" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\MaxFileSize</item>
67+
<item name="allowedExtensions" xsi:type="string">jpg jpeg gif png</item>
68+
<item name="component" xsi:type="string">Magento_PageBuilder/js/form/element/image-uploader</item>
69+
<item name="componentType" xsi:type="string">imageUploader</item>
70+
<item name="dataScope" xsi:type="string">background_image</item>
71+
<item name="formElement" xsi:type="string">imageUploader</item>
72+
<item name="uploaderConfig" xsi:type="array">
73+
<item name="url" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\SaveUrl</item>
74+
</item>
75+
<item name="previewTmpl" xsi:type="string">Magento_PageBuilder/form/element/uploader/preview</item>
76+
<item name="template" xsi:type="string">Magento_PageBuilder/form/element/uploader/preview/image</item>
77+
<item name="mediaGallery" xsi:type="array">
78+
<item name="openDialogUrl" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\OpenDialogUrl</item>
79+
<item name="openDialogTitle" xsi:type="string" translate="true">Insert Images...</item>
80+
<item name="initialOpenSubpath" xsi:type="string">wysiwyg</item>
81+
<item name="storeId" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\StoreId</item>
82+
</item>
83+
<item name="validation" xsi:type="array">
84+
<item name="required-entry" xsi:type="boolean">true</item>
85+
</item>
86+
</arguments>
87+
</additional_data>
88+
</type>
89+
</content_types>
90+
</config>
91+
```
92+
93+
## Update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file {#js-file}
94+
95+
To update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file:
96+
97+
1. Add the uploader component, 'Magento_PageBuilder/js/content-type/uploader', dependency:
98+
99+
``` js
100+
import Uploader from "../uploader";
101+
```
102+
103+
2. Add configuration for the uploader in the `<content-type-name>.xml` file to initialize the uploader.
104+
105+
3. Register the listener to specify when the image is loaded from the uploader UI component:
106+
107+
``` js
108+
/**
109+
* Get registry callback reference to uploader UI component
110+
*
111+
* @returns {Uploader}
112+
*/
113+
public getUploader() {
114+
return this.uploader;
115+
}
116+
```
117+
118+
## Update the preview template to display the uploader component {#preview}
119+
120+
Update the preview template file, `bluefoot/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/<content-type-name>/<ppearance_name>/preview.html`, to display the uploader component:
121+
122+
``` html
123+
<div>
124+
...
125+
<scope args="getUploader().getUiComponent()">
126+
<render />
127+
</scope>
128+
...
129+
</div>
130+
```

‎app/code/Magento/PageBuilder/docs/master-format.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
1. **Master format**
1919
1. [Visual select]
2020
1. [Custom Toolbar]
21+
1. [Add image uploader to content type]
2122
5. [Roadmap and known issues]
2223

2324
[Introduction]: README.md
@@ -36,6 +37,7 @@
3637
[Master format]: master-format.md
3738
[Visual select]: visual-select.md
3839
[Custom Toolbar]: toolbar.md
40+
[Add image uploader to content type]: image-uploader.md
3941
[Roadmap and Known Issues]: roadmap.md
4042

4143
PageBuilder uses XHTML with inline styles and data attributes as the master format for storage.

0 commit comments

Comments
 (0)