{"componentChunkName":"component---src-gatsby-theme-try-ghost-templates-post-js","path":"/tips-for-magento-2-layouts/","result":{"data":{"customPost":{"id":"Ghost__Post__6127ba1b3ed159214d382e70","title":"Tips for Magento 2 Layouts","slug":"tips-for-magento-2-layouts","featured":false,"feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_bwLgYgHn7R2RXs13d9HYfA.png","excerpt":"One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.","custom_excerpt":"One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.","visibility":"public","created_at_pretty":"6 Nov 2020","published_at_pretty":"8 Feb 2020","updated_at_pretty":"26 Aug 2021","created_at":"2020-11-06T18:24:45.000+00:00","published_at":"2020-02-08T18:24:00.000+00:00","updated_at":"2021-08-26T17:53:58.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"1_ZxqU4dcMgnOkEe_YcZ01EQ.png","publicURL":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","imageMeta":{"width":2000,"height":1000},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVQoz2P4TwFgQDD//YMi/ACk4B82zX//IPHQAVabQaL/vn/5fXT9r/3L/314DTMem60/vv0+f+Dfp7cQNQwQ237uWfZjdd+PzTP+bJ119sLFXTt3Xr1y5d7du9evXb99+/bRw0euX7v26eu3/5/efV/W9WPjDJDmP3+gmn8d2fRtWsm3yQW/9iw7e+78po0bN2/aNHP6jEULFu7auXPdmrU7tm9/9uLl/18/vk0t/n3lGNjmv3A///t1bPOv3Uv//foJ9jsIPHv27MOHDxDpXz9//vv//+/jm99mVf65dQ7mbJQA+4vHw0REFUqkYAQyJEb+/cXQTHoiAQDMTzrKXUcJ/gAAAABJRU5ErkJggg==","aspectRatio":2,"src":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","srcSet":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/bcfcb/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/19d75/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/47b0f/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/71514/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 2000w","srcWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp","srcSetWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/dc8f3/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/2db4b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/f5845/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/49d6b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null}],"plaintext":"Magento 2 is one of the most popular e-commerce platforms, and it’s probably the\nmost difficult to use for developers. One of the things you will use a lot while\ndeveloping in Magento 2 is the XML layouts, which can be confusing in the\nbeginning.\n\nI will include some quick tips you might need in developing and modifying\nexisting layouts.\n\nMove Elements\nIf you want to move a block or container from one place to another in a page,\nyou can use the following: \n\n<move element=\"element.to.move\" destination=\"new.parent\" />\n\nHere, we have the element attribute which should be the name of the block or\ncontainer you want to move, and the destination attribute which should be the\nname of the block or container you want to move the element to.\n\nYou can also use before or after attributes to specify where the element should\ngo inside the parent like this:<move element=\"element.to.move\"\ndestination=\"new.parent\" after=\"new.sibling\" />\n\nwhere new.sibling is another child in new.parent\n\nRemove Element\nTo remove a block from a page, use the following:\n\n<referenceBlock name=\"element.to.remove\" remove=\"true\" />\n\nYou can also do the same for containers:\n\n<referenceContainer name=\"element.to.remove\" remove=\"true\" />\n\nNote: When Magento applies layout changes, move rules are applied before remove \n. This means if you move an element to a parent, and remove then the parent, the\nelement you moved into it will be removed as well.\n\nChange a Block’s Template\nTo change a block’s template, you can do the following:\n\n<referenceBlock name=\"block.to.change\">\n\t<action method=\"setTemplate\">\n    <argument name=\"template\" xsi:type=\"string\">VENDOR_MODULE::path/to/template</argument>\n    </action>\n</referenceBlock>\n\nWhere VENDOR_MODULE::path/to/template should be the path to the new template you\nwant to use for the block.\n\nChange Block’s Visibility Based on Configuration\nIf you want a block to be visible based on configuration’s value that is set by\nthe admin, you can do it this way:\n\n<block class=\"...\" name=\"...\" ifconfig=\"my/yesno/field\">\n\nWhere my/yesno/field can be any path to a field in the system settings.\n\nRemove CSS or JS files\nTo remove a css, javascript or any static file present in <head> , use the\nfollowing:\n\n<head>\n\t<remove src=\"src/to/file\" />\n</head>\n\nSet Attributes of Body\nTo set attributes of the body of a page, like class, use the following:\n\n<body>\n\t<attribute name=\"class\" value=\"class-name\"/>\n</body>\n\nYou can also set style , class and other attributes.\n\nConclusion\nThose were just some quick tips you will probably use a lot if you’re developing\na store with Magento 2. You can read more about this, as well as other helpful\ninformation, see here\n[https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html]\n.","html":"<p>Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.</p><p>I will include some quick tips you might need in developing and modifying existing layouts.</p><h1 id=\"move-elements\">Move Elements</h1><p>If you want to move a block or container from one place to another in a page, you can use the following: </p><pre><code class=\"language-XML\">&lt;move element=\"element.to.move\" destination=\"new.parent\" /&gt;</code></pre><p>Here, we have the <code>element</code> attribute which should be the name of the block or container you want to move, and the <code>destination</code> attribute which should be the name of the block or container you want to move the element to.</p><p>You can also use <code>before</code> or <code>after</code> attributes to specify where the element should go inside the parent like this:&lt;move element=\"element.to.move\" destination=\"new.parent\" after=\"<strong><strong>new.sibling</strong></strong>\" /&gt;</p><p>where <code>new.sibling</code> is another child in <code>new.parent</code></p><h1 id=\"remove-element\">Remove Element</h1><p>To remove a block from a page, use the following:</p><pre><code class=\"language-XML\">&lt;referenceBlock name=\"element.to.remove\" remove=\"true\" /&gt;</code></pre><p>You can also do the same for containers:</p><pre><code class=\"language-XML\">&lt;referenceContainer name=\"element.to.remove\" remove=\"true\" /&gt;</code></pre><p><strong><strong>Note</strong></strong>: When Magento applies layout changes, <code>move</code> rules are applied before <code>remove</code> . This means if you move an element to a parent, and remove then the parent, the element you moved into it will be removed as well.</p><h1 id=\"change-a-block-s-template\">Change a Block’s Template</h1><p>To change a block’s template, you can do the following:</p><pre><code class=\"language-XML\">&lt;referenceBlock name=\"block.to.change\"&gt;\n\t&lt;action method=\"setTemplate\"&gt;\n    &lt;argument name=\"template\" xsi:type=\"string\"&gt;VENDOR_MODULE::path/to/template&lt;/argument&gt;\n    &lt;/action&gt;\n&lt;/referenceBlock&gt;</code></pre><p>Where <code>VENDOR_MODULE::path/to/template</code> should be the path to the new template you want to use for the block.</p><h1 id=\"change-block-s-visibility-based-on-configuration\">Change Block’s Visibility Based on Configuration</h1><p>If you want a block to be visible based on configuration’s value that is set by the admin, you can do it this way:</p><pre><code class=\"language-XML\">&lt;block class=\"...\" name=\"...\" ifconfig=\"my/yesno/field\"&gt;</code></pre><p>Where <code>my/yesno/field</code> can be any path to a field in the system settings.</p><h1 id=\"remove-css-or-js-files\">Remove CSS or JS files</h1><p>To remove a css, javascript or any static file present in <code>&lt;head&gt;</code> , use the following:</p><pre><code class=\"language-XML\">&lt;head&gt;\n\t&lt;remove src=\"src/to/file\" /&gt;\n&lt;/head&gt;</code></pre><h1 id=\"set-attributes-of-body\">Set Attributes of Body</h1><p>To set attributes of the body of a page, like class, use the following:</p><pre><code class=\"language-XML\">&lt;body&gt;\n\t&lt;attribute name=\"class\" value=\"class-name\"/&gt;\n&lt;/body&gt;</code></pre><p>You can also set <code>style</code> , <code>class</code> and other attributes.</p><h1 id=\"conclusion\">Conclusion</h1><p>Those were just some quick tips you will probably use a lot if you’re developing a store with Magento 2. You can read more about this, as well as other helpful information, see <a href=\"https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html\" rel=\"noopener nofollow\">here</a>.</p>","url":"https://backend.shahednasser.com/tips-for-magento-2-layouts/","canonical_url":null,"uuid":"994e98e7-7823-464d-aab9-225d82809696","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fa594edbc1317001e675bc8","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.</p><p>I will include some quick tips you might need in developing and modifying existing layouts.</p><h1 id=\"move-elements\">Move Elements</h1><p>If you want to move a block or container from one place to another in a page, you can use the following: </p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>move</span> <span class=\"token attr-name\">element</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>element.to.move<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">destination</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>new.parent<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span></code></pre></div><p>Here, we have the <code class=\"language-text\">element</code> attribute which should be the name of the block or container you want to move, and the <code class=\"language-text\">destination</code> attribute which should be the name of the block or container you want to move the element to.</p><p>You can also use <code class=\"language-text\">before</code> or <code class=\"language-text\">after</code> attributes to specify where the element should go inside the parent like this:&#x3C;move element=\"element.to.move\" destination=\"new.parent\" after=\"<strong><strong>new.sibling</strong></strong>\" /></p><p>where <code class=\"language-text\">new.sibling</code> is another child in <code class=\"language-text\">new.parent</code></p><h1 id=\"remove-element\">Remove Element</h1><p>To remove a block from a page, use the following:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceBlock</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>element.to.remove<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">remove</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span></code></pre></div><p>You can also do the same for containers:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceContainer</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>element.to.remove<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">remove</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span></code></pre></div><p><strong><strong>Note</strong></strong>: When Magento applies layout changes, <code class=\"language-text\">move</code> rules are applied before <code class=\"language-text\">remove</code> . This means if you move an element to a parent, and remove then the parent, the element you moved into it will be removed as well.</p><h1 id=\"change-a-block-s-template\">Change a Block’s Template</h1><p>To change a block’s template, you can do the following:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceBlock</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>block.to.change<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>action</span> <span class=\"token attr-name\">method</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>setTemplate<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>template<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>VENDOR_MODULE::path/to/template<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>action</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>referenceBlock</span><span class=\"token punctuation\">></span></span></code></pre></div><p>Where <code class=\"language-text\">VENDOR_MODULE::path/to/template</code> should be the path to the new template you want to use for the block.</p><h1 id=\"change-block-s-visibility-based-on-configuration\">Change Block’s Visibility Based on Configuration</h1><p>If you want a block to be visible based on configuration’s value that is set by the admin, you can do it this way:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>block</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>...<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>...<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">ifconfig</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>my/yesno/field<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></code></pre></div><p>Where <code class=\"language-text\">my/yesno/field</code> can be any path to a field in the system settings.</p><h1 id=\"remove-css-or-js-files\">Remove CSS or JS files</h1><p>To remove a css, javascript or any static file present in <code class=\"language-text\">&#x3C;head></code> , use the following:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>head</span><span class=\"token punctuation\">></span></span>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>remove</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>src/to/file<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div><h1 id=\"set-attributes-of-body\">Set Attributes of Body</h1><p>To set attributes of the body of a page, like class, use the following:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>body</span><span class=\"token punctuation\">></span></span>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>attribute</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>class<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>class-name<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>body</span><span class=\"token punctuation\">></span></span></code></pre></div><p>You can also set <code class=\"language-text\">style</code> , <code class=\"language-text\">class</code> and other attributes.</p><h1 id=\"conclusion\">Conclusion</h1><p>Those were just some quick tips you will probably use a lot if you’re developing a store with Magento 2. You can read more about this, as well as other helpful information, see <a href=\"https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html\" rel=\"noopener nofollow\">here</a>.</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will include some quick tips you might need in developing and modifying existing layouts."}]},{"type":"element","tagName":"h1","properties":{"id":"move-elements"},"children":[{"type":"text","value":"Move Elements"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to move a block or container from one place to another in a page, you can use the following: "}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"move"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"element"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"element.to.move"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"destination"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"new.parent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, we have the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" attribute which should be the name of the block or container you want to move, and the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"destination"}]},{"type":"text","value":" attribute which should be the name of the block or container you want to move the element to."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"before"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"after"}]},{"type":"text","value":" attributes to specify where the element should go inside the parent like this:<move element=\"element.to.move\" destination=\"new.parent\" after=\""},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"new.sibling"}]}]},{"type":"text","value":"\" />"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"new.sibling"}]},{"type":"text","value":" is another child in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"new.parent"}]}]},{"type":"element","tagName":"h1","properties":{"id":"remove-element"},"children":[{"type":"text","value":"Remove Element"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To remove a block from a page, use the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceBlock"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"element.to.remove"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"remove"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also do the same for containers:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceContainer"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"element.to.remove"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"remove"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note"}]}]},{"type":"text","value":": When Magento applies layout changes, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"move"}]},{"type":"text","value":" rules are applied before "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"remove"}]},{"type":"text","value":" . This means if you move an element to a parent, and remove then the parent, the element you moved into it will be removed as well."}]},{"type":"element","tagName":"h1","properties":{"id":"change-a-block-s-template"},"children":[{"type":"text","value":"Change a Block’s Template"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To change a block’s template, you can do the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceBlock"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"block.to.change"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"action"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"method"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"setTemplate"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"template"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"VENDOR_MODULE::path/to/template"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"action"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"referenceBlock"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR_MODULE::path/to/template"}]},{"type":"text","value":" should be the path to the new template you want to use for the block."}]},{"type":"element","tagName":"h1","properties":{"id":"change-block-s-visibility-based-on-configuration"},"children":[{"type":"text","value":"Change Block’s Visibility Based on Configuration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want a block to be visible based on configuration’s value that is set by the admin, you can do it this way:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"block"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"..."},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"..."},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"ifconfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"my/yesno/field"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"my/yesno/field"}]},{"type":"text","value":" can be any path to a field in the system settings."}]},{"type":"element","tagName":"h1","properties":{"id":"remove-css-or-js-files"},"children":[{"type":"text","value":"Remove CSS or JS files"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To remove a css, javascript or any static file present in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"<head>"}]},{"type":"text","value":" , use the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"remove"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"src"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"src/to/file"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"h1","properties":{"id":"set-attributes-of-body"},"children":[{"type":"text","value":"Set Attributes of Body"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To set attributes of the body of a page, like class, use the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"attribute"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"class"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"value"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"class-name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also set "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"style"}]},{"type":"text","value":" , "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" and other attributes."}]},{"type":"element","tagName":"h1","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Those were just some quick tips you will probably use a lot if you’re developing a store with Magento 2. You can read more about this, as well as other helpful information, see "},{"type":"element","tagName":"a","properties":{"href":"https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html","rel":["noopener","nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"move-elements","heading":"Move Elements"},{"id":"remove-element","heading":"Remove Element"},{"id":"change-a-block-s-template","heading":"Change a Block’s Template"},{"id":"change-block-s-visibility-based-on-configuration","heading":"Change Block’s Visibility Based on Configuration"},{"id":"remove-css-or-js-files","heading":"Remove CSS or JS files"},{"id":"set-attributes-of-body","heading":"Set Attributes of Body"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"1_bwLgYgHn7R2RXs13d9HYfA.png","publicURL":"/static/32e0e004999f20bd55bad508d863fad3/1_bwLgYgHn7R2RXs13d9HYfA.png","imageMeta":{"width":700,"height":828},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAAsTAAALEwEAmpwYAAACsElEQVQ4y9WVP2gVQRDG770XxIjxLwTsrAQRC2Py7avsRbAQLVSQGJMZFbGzVAsLCZJCK6O2WpgmqJXBJIgoYm8UjUgIIu++SwoRNIlGZnfvckkUA7HxYLm7Yea3383ufpck8aIioSDJBPZcs3sqzmI7qRii4jkV7am6kKuoMeSG0dMeQYLk8ZmDiU8UVFN1VUvIBM1UXKHgW6pu3gYFP6i4QcVmy2lovUJFtaH1IEQQgFRUqK7JkrwqxSEK3lKQg+bz51TcPBWTVHQ2otpUXc0zxHlgLfOyvcIdVAxSY3GANSjopOAIBR+LuMLGEyra7Ouy0LKaVzilWEPBJQq+lkA2blHQyvg5FLRQcI2C2RJ4joq+TLHB1JrkA1S8zlVF0EsK9sW++pnD6Mh7vYeCoaIlATxBxdHEg8R640FTFJyfPrk7ByWlVU0aCxMkqdbtfoKCybQAY94WYTa+PKVg2yKQoE7BhXxLUXGOgv1xO+VjPRUDccFmLGnGq1N3ORUkDXFNvleKi77xghGDx9W/GxfjOhWtqbgmq8nUHQ8MGNDNRmCvFX3q8UoG0oUtM0gP9PF+354Qf0FBc4i705GxCHjVCse62i32LMas8GEJeLs00TsKNkeg/BE4fqrDYsMrAI5RsPGvwPcBOLIC4BsKNv2XwGLbrAIIiabx3Yp//kOFc7bTs0BfLdDHvhhweyrekXut8MNy4KPSSbnz+22DsxS8omBXcW4zReuDY23JRDeWAgdLZ/nmEoUtEbiV3W2V3LGr3jkUduyq4ei50RJwtKTwfskvzdHXmqWFf8pezwq98QcclVT8CM5tynJocPF7XPDLYfPEYG2u+MFZbXFNawgYtGRfhykYLxnCZwq6ohdaTiU34WXXtLqkEWcp/n7heR0FfRT0U7ClZK5V34olwF9mAqQS68J6cAAAAABJRU5ErkJggg==","aspectRatio":0.8441558441558441,"src":"/static/32e0e004999f20bd55bad508d863fad3/60290/1_bwLgYgHn7R2RXs13d9HYfA.png","srcSet":"/static/32e0e004999f20bd55bad508d863fad3/bcfcb/1_bwLgYgHn7R2RXs13d9HYfA.png 260w,\n/static/32e0e004999f20bd55bad508d863fad3/19d75/1_bwLgYgHn7R2RXs13d9HYfA.png 520w,\n/static/32e0e004999f20bd55bad508d863fad3/60290/1_bwLgYgHn7R2RXs13d9HYfA.png 700w","srcWebp":"/static/32e0e004999f20bd55bad508d863fad3/89afa/1_bwLgYgHn7R2RXs13d9HYfA.webp","srcSetWebp":"/static/32e0e004999f20bd55bad508d863fad3/dc8f3/1_bwLgYgHn7R2RXs13d9HYfA.webp 260w,\n/static/32e0e004999f20bd55bad508d863fad3/2db4b/1_bwLgYgHn7R2RXs13d9HYfA.webp 520w,\n/static/32e0e004999f20bd55bad508d863fad3/89afa/1_bwLgYgHn7R2RXs13d9HYfA.webp 700w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"ghostPost":{"id":"Ghost__Post__6127ba1b3ed159214d382e70","title":"Tips for Magento 2 Layouts","slug":"tips-for-magento-2-layouts","featured":false,"feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_bwLgYgHn7R2RXs13d9HYfA.png","excerpt":"One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.","custom_excerpt":"One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.","visibility":"public","created_at_pretty":"6 Nov 2020","published_at_pretty":"8 Feb 2020","updated_at_pretty":"26 Aug 2021","created_at":"2020-11-06T18:24:45.000+00:00","published_at":"2020-02-08T18:24:00.000+00:00","updated_at":"2021-08-26T17:53:58.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"1_ZxqU4dcMgnOkEe_YcZ01EQ.png","publicURL":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","imageMeta":{"width":2000,"height":1000},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVQoz2P4TwFgQDD//YMi/ACk4B82zX//IPHQAVabQaL/vn/5fXT9r/3L/314DTMem60/vv0+f+Dfp7cQNQwQ237uWfZjdd+PzTP+bJ119sLFXTt3Xr1y5d7du9evXb99+/bRw0euX7v26eu3/5/efV/W9WPjDJDmP3+gmn8d2fRtWsm3yQW/9iw7e+78po0bN2/aNHP6jEULFu7auXPdmrU7tm9/9uLl/18/vk0t/n3lGNjmv3A///t1bPOv3Uv//foJ9jsIPHv27MOHDxDpXz9//vv//+/jm99mVf65dQ7mbJQA+4vHw0REFUqkYAQyJEb+/cXQTHoiAQDMTzrKXUcJ/gAAAABJRU5ErkJggg==","aspectRatio":2,"src":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","srcSet":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/bcfcb/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/19d75/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/47b0f/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/71514/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 2000w","srcWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp","srcSetWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/dc8f3/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/2db4b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/f5845/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/49d6b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null}],"plaintext":"Magento 2 is one of the most popular e-commerce platforms, and it’s probably the\nmost difficult to use for developers. One of the things you will use a lot while\ndeveloping in Magento 2 is the XML layouts, which can be confusing in the\nbeginning.\n\nI will include some quick tips you might need in developing and modifying\nexisting layouts.\n\nMove Elements\nIf you want to move a block or container from one place to another in a page,\nyou can use the following: \n\n<move element=\"element.to.move\" destination=\"new.parent\" />\n\nHere, we have the element attribute which should be the name of the block or\ncontainer you want to move, and the destination attribute which should be the\nname of the block or container you want to move the element to.\n\nYou can also use before or after attributes to specify where the element should\ngo inside the parent like this:<move element=\"element.to.move\"\ndestination=\"new.parent\" after=\"new.sibling\" />\n\nwhere new.sibling is another child in new.parent\n\nRemove Element\nTo remove a block from a page, use the following:\n\n<referenceBlock name=\"element.to.remove\" remove=\"true\" />\n\nYou can also do the same for containers:\n\n<referenceContainer name=\"element.to.remove\" remove=\"true\" />\n\nNote: When Magento applies layout changes, move rules are applied before remove \n. This means if you move an element to a parent, and remove then the parent, the\nelement you moved into it will be removed as well.\n\nChange a Block’s Template\nTo change a block’s template, you can do the following:\n\n<referenceBlock name=\"block.to.change\">\n\t<action method=\"setTemplate\">\n    <argument name=\"template\" xsi:type=\"string\">VENDOR_MODULE::path/to/template</argument>\n    </action>\n</referenceBlock>\n\nWhere VENDOR_MODULE::path/to/template should be the path to the new template you\nwant to use for the block.\n\nChange Block’s Visibility Based on Configuration\nIf you want a block to be visible based on configuration’s value that is set by\nthe admin, you can do it this way:\n\n<block class=\"...\" name=\"...\" ifconfig=\"my/yesno/field\">\n\nWhere my/yesno/field can be any path to a field in the system settings.\n\nRemove CSS or JS files\nTo remove a css, javascript or any static file present in <head> , use the\nfollowing:\n\n<head>\n\t<remove src=\"src/to/file\" />\n</head>\n\nSet Attributes of Body\nTo set attributes of the body of a page, like class, use the following:\n\n<body>\n\t<attribute name=\"class\" value=\"class-name\"/>\n</body>\n\nYou can also set style , class and other attributes.\n\nConclusion\nThose were just some quick tips you will probably use a lot if you’re developing\na store with Magento 2. You can read more about this, as well as other helpful\ninformation, see here\n[https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html]\n.","html":"<p>Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.</p><p>I will include some quick tips you might need in developing and modifying existing layouts.</p><h1 id=\"move-elements\">Move Elements</h1><p>If you want to move a block or container from one place to another in a page, you can use the following: </p><pre><code class=\"language-XML\">&lt;move element=\"element.to.move\" destination=\"new.parent\" /&gt;</code></pre><p>Here, we have the <code>element</code> attribute which should be the name of the block or container you want to move, and the <code>destination</code> attribute which should be the name of the block or container you want to move the element to.</p><p>You can also use <code>before</code> or <code>after</code> attributes to specify where the element should go inside the parent like this:&lt;move element=\"element.to.move\" destination=\"new.parent\" after=\"<strong><strong>new.sibling</strong></strong>\" /&gt;</p><p>where <code>new.sibling</code> is another child in <code>new.parent</code></p><h1 id=\"remove-element\">Remove Element</h1><p>To remove a block from a page, use the following:</p><pre><code class=\"language-XML\">&lt;referenceBlock name=\"element.to.remove\" remove=\"true\" /&gt;</code></pre><p>You can also do the same for containers:</p><pre><code class=\"language-XML\">&lt;referenceContainer name=\"element.to.remove\" remove=\"true\" /&gt;</code></pre><p><strong><strong>Note</strong></strong>: When Magento applies layout changes, <code>move</code> rules are applied before <code>remove</code> . This means if you move an element to a parent, and remove then the parent, the element you moved into it will be removed as well.</p><h1 id=\"change-a-block-s-template\">Change a Block’s Template</h1><p>To change a block’s template, you can do the following:</p><pre><code class=\"language-XML\">&lt;referenceBlock name=\"block.to.change\"&gt;\n\t&lt;action method=\"setTemplate\"&gt;\n    &lt;argument name=\"template\" xsi:type=\"string\"&gt;VENDOR_MODULE::path/to/template&lt;/argument&gt;\n    &lt;/action&gt;\n&lt;/referenceBlock&gt;</code></pre><p>Where <code>VENDOR_MODULE::path/to/template</code> should be the path to the new template you want to use for the block.</p><h1 id=\"change-block-s-visibility-based-on-configuration\">Change Block’s Visibility Based on Configuration</h1><p>If you want a block to be visible based on configuration’s value that is set by the admin, you can do it this way:</p><pre><code class=\"language-XML\">&lt;block class=\"...\" name=\"...\" ifconfig=\"my/yesno/field\"&gt;</code></pre><p>Where <code>my/yesno/field</code> can be any path to a field in the system settings.</p><h1 id=\"remove-css-or-js-files\">Remove CSS or JS files</h1><p>To remove a css, javascript or any static file present in <code>&lt;head&gt;</code> , use the following:</p><pre><code class=\"language-XML\">&lt;head&gt;\n\t&lt;remove src=\"src/to/file\" /&gt;\n&lt;/head&gt;</code></pre><h1 id=\"set-attributes-of-body\">Set Attributes of Body</h1><p>To set attributes of the body of a page, like class, use the following:</p><pre><code class=\"language-XML\">&lt;body&gt;\n\t&lt;attribute name=\"class\" value=\"class-name\"/&gt;\n&lt;/body&gt;</code></pre><p>You can also set <code>style</code> , <code>class</code> and other attributes.</p><h1 id=\"conclusion\">Conclusion</h1><p>Those were just some quick tips you will probably use a lot if you’re developing a store with Magento 2. You can read more about this, as well as other helpful information, see <a href=\"https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html\" rel=\"noopener nofollow\">here</a>.</p>","url":"https://backend.shahednasser.com/tips-for-magento-2-layouts/","canonical_url":null,"uuid":"994e98e7-7823-464d-aab9-225d82809696","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fa594edbc1317001e675bc8","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.</p><p>I will include some quick tips you might need in developing and modifying existing layouts.</p><h1 id=\"move-elements\">Move Elements</h1><p>If you want to move a block or container from one place to another in a page, you can use the following: </p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>move</span> <span class=\"token attr-name\">element</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>element.to.move<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">destination</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>new.parent<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span></code></pre></div><p>Here, we have the <code class=\"language-text\">element</code> attribute which should be the name of the block or container you want to move, and the <code class=\"language-text\">destination</code> attribute which should be the name of the block or container you want to move the element to.</p><p>You can also use <code class=\"language-text\">before</code> or <code class=\"language-text\">after</code> attributes to specify where the element should go inside the parent like this:&#x3C;move element=\"element.to.move\" destination=\"new.parent\" after=\"<strong><strong>new.sibling</strong></strong>\" /></p><p>where <code class=\"language-text\">new.sibling</code> is another child in <code class=\"language-text\">new.parent</code></p><h1 id=\"remove-element\">Remove Element</h1><p>To remove a block from a page, use the following:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceBlock</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>element.to.remove<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">remove</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span></code></pre></div><p>You can also do the same for containers:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceContainer</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>element.to.remove<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">remove</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span></code></pre></div><p><strong><strong>Note</strong></strong>: When Magento applies layout changes, <code class=\"language-text\">move</code> rules are applied before <code class=\"language-text\">remove</code> . This means if you move an element to a parent, and remove then the parent, the element you moved into it will be removed as well.</p><h1 id=\"change-a-block-s-template\">Change a Block’s Template</h1><p>To change a block’s template, you can do the following:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceBlock</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>block.to.change<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>action</span> <span class=\"token attr-name\">method</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>setTemplate<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>template<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>VENDOR_MODULE::path/to/template<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>action</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>referenceBlock</span><span class=\"token punctuation\">></span></span></code></pre></div><p>Where <code class=\"language-text\">VENDOR_MODULE::path/to/template</code> should be the path to the new template you want to use for the block.</p><h1 id=\"change-block-s-visibility-based-on-configuration\">Change Block’s Visibility Based on Configuration</h1><p>If you want a block to be visible based on configuration’s value that is set by the admin, you can do it this way:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>block</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>...<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>...<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">ifconfig</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>my/yesno/field<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></code></pre></div><p>Where <code class=\"language-text\">my/yesno/field</code> can be any path to a field in the system settings.</p><h1 id=\"remove-css-or-js-files\">Remove CSS or JS files</h1><p>To remove a css, javascript or any static file present in <code class=\"language-text\">&#x3C;head></code> , use the following:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>head</span><span class=\"token punctuation\">></span></span>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>remove</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>src/to/file<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div><h1 id=\"set-attributes-of-body\">Set Attributes of Body</h1><p>To set attributes of the body of a page, like class, use the following:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>body</span><span class=\"token punctuation\">></span></span>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>attribute</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>class<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>class-name<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>body</span><span class=\"token punctuation\">></span></span></code></pre></div><p>You can also set <code class=\"language-text\">style</code> , <code class=\"language-text\">class</code> and other attributes.</p><h1 id=\"conclusion\">Conclusion</h1><p>Those were just some quick tips you will probably use a lot if you’re developing a store with Magento 2. You can read more about this, as well as other helpful information, see <a href=\"https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html\" rel=\"noopener nofollow\">here</a>.</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will include some quick tips you might need in developing and modifying existing layouts."}]},{"type":"element","tagName":"h1","properties":{"id":"move-elements"},"children":[{"type":"text","value":"Move Elements"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to move a block or container from one place to another in a page, you can use the following: "}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"move"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"element"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"element.to.move"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"destination"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"new.parent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, we have the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" attribute which should be the name of the block or container you want to move, and the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"destination"}]},{"type":"text","value":" attribute which should be the name of the block or container you want to move the element to."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"before"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"after"}]},{"type":"text","value":" attributes to specify where the element should go inside the parent like this:<move element=\"element.to.move\" destination=\"new.parent\" after=\""},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"new.sibling"}]}]},{"type":"text","value":"\" />"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"new.sibling"}]},{"type":"text","value":" is another child in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"new.parent"}]}]},{"type":"element","tagName":"h1","properties":{"id":"remove-element"},"children":[{"type":"text","value":"Remove Element"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To remove a block from a page, use the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceBlock"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"element.to.remove"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"remove"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also do the same for containers:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceContainer"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"element.to.remove"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"remove"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note"}]}]},{"type":"text","value":": When Magento applies layout changes, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"move"}]},{"type":"text","value":" rules are applied before "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"remove"}]},{"type":"text","value":" . This means if you move an element to a parent, and remove then the parent, the element you moved into it will be removed as well."}]},{"type":"element","tagName":"h1","properties":{"id":"change-a-block-s-template"},"children":[{"type":"text","value":"Change a Block’s Template"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To change a block’s template, you can do the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceBlock"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"block.to.change"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"action"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"method"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"setTemplate"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"template"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"VENDOR_MODULE::path/to/template"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"action"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"referenceBlock"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR_MODULE::path/to/template"}]},{"type":"text","value":" should be the path to the new template you want to use for the block."}]},{"type":"element","tagName":"h1","properties":{"id":"change-block-s-visibility-based-on-configuration"},"children":[{"type":"text","value":"Change Block’s Visibility Based on Configuration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want a block to be visible based on configuration’s value that is set by the admin, you can do it this way:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"block"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"..."},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"..."},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"ifconfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"my/yesno/field"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"my/yesno/field"}]},{"type":"text","value":" can be any path to a field in the system settings."}]},{"type":"element","tagName":"h1","properties":{"id":"remove-css-or-js-files"},"children":[{"type":"text","value":"Remove CSS or JS files"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To remove a css, javascript or any static file present in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"<head>"}]},{"type":"text","value":" , use the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"remove"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"src"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"src/to/file"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"h1","properties":{"id":"set-attributes-of-body"},"children":[{"type":"text","value":"Set Attributes of Body"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To set attributes of the body of a page, like class, use the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"attribute"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"class"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"value"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"class-name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also set "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"style"}]},{"type":"text","value":" , "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" and other attributes."}]},{"type":"element","tagName":"h1","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Those were just some quick tips you will probably use a lot if you’re developing a store with Magento 2. You can read more about this, as well as other helpful information, see "},{"type":"element","tagName":"a","properties":{"href":"https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html","rel":["noopener","nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"move-elements","heading":"Move Elements"},{"id":"remove-element","heading":"Remove Element"},{"id":"change-a-block-s-template","heading":"Change a Block’s Template"},{"id":"change-block-s-visibility-based-on-configuration","heading":"Change Block’s Visibility Based on Configuration"},{"id":"remove-css-or-js-files","heading":"Remove CSS or JS files"},{"id":"set-attributes-of-body","heading":"Set Attributes of Body"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"1_bwLgYgHn7R2RXs13d9HYfA.png","publicURL":"/static/32e0e004999f20bd55bad508d863fad3/1_bwLgYgHn7R2RXs13d9HYfA.png","imageMeta":{"width":700,"height":828},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAAsTAAALEwEAmpwYAAACsElEQVQ4y9WVP2gVQRDG770XxIjxLwTsrAQRC2Py7avsRbAQLVSQGJMZFbGzVAsLCZJCK6O2WpgmqJXBJIgoYm8UjUgIIu++SwoRNIlGZnfvckkUA7HxYLm7Yea3383ufpck8aIioSDJBPZcs3sqzmI7qRii4jkV7am6kKuoMeSG0dMeQYLk8ZmDiU8UVFN1VUvIBM1UXKHgW6pu3gYFP6i4QcVmy2lovUJFtaH1IEQQgFRUqK7JkrwqxSEK3lKQg+bz51TcPBWTVHQ2otpUXc0zxHlgLfOyvcIdVAxSY3GANSjopOAIBR+LuMLGEyra7Ouy0LKaVzilWEPBJQq+lkA2blHQyvg5FLRQcI2C2RJ4joq+TLHB1JrkA1S8zlVF0EsK9sW++pnD6Mh7vYeCoaIlATxBxdHEg8R640FTFJyfPrk7ByWlVU0aCxMkqdbtfoKCybQAY94WYTa+PKVg2yKQoE7BhXxLUXGOgv1xO+VjPRUDccFmLGnGq1N3ORUkDXFNvleKi77xghGDx9W/GxfjOhWtqbgmq8nUHQ8MGNDNRmCvFX3q8UoG0oUtM0gP9PF+354Qf0FBc4i705GxCHjVCse62i32LMas8GEJeLs00TsKNkeg/BE4fqrDYsMrAI5RsPGvwPcBOLIC4BsKNv2XwGLbrAIIiabx3Yp//kOFc7bTs0BfLdDHvhhweyrekXut8MNy4KPSSbnz+22DsxS8omBXcW4zReuDY23JRDeWAgdLZ/nmEoUtEbiV3W2V3LGr3jkUduyq4ei50RJwtKTwfskvzdHXmqWFf8pezwq98QcclVT8CM5tynJocPF7XPDLYfPEYG2u+MFZbXFNawgYtGRfhykYLxnCZwq6ohdaTiU34WXXtLqkEWcp/n7heR0FfRT0U7ClZK5V34olwF9mAqQS68J6cAAAAABJRU5ErkJggg==","aspectRatio":0.8441558441558441,"src":"/static/32e0e004999f20bd55bad508d863fad3/60290/1_bwLgYgHn7R2RXs13d9HYfA.png","srcSet":"/static/32e0e004999f20bd55bad508d863fad3/bcfcb/1_bwLgYgHn7R2RXs13d9HYfA.png 260w,\n/static/32e0e004999f20bd55bad508d863fad3/19d75/1_bwLgYgHn7R2RXs13d9HYfA.png 520w,\n/static/32e0e004999f20bd55bad508d863fad3/60290/1_bwLgYgHn7R2RXs13d9HYfA.png 700w","srcWebp":"/static/32e0e004999f20bd55bad508d863fad3/89afa/1_bwLgYgHn7R2RXs13d9HYfA.webp","srcSetWebp":"/static/32e0e004999f20bd55bad508d863fad3/dc8f3/1_bwLgYgHn7R2RXs13d9HYfA.webp 260w,\n/static/32e0e004999f20bd55bad508d863fad3/2db4b/1_bwLgYgHn7R2RXs13d9HYfA.webp 520w,\n/static/32e0e004999f20bd55bad508d863fad3/89afa/1_bwLgYgHn7R2RXs13d9HYfA.webp 700w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"prev":{"id":"Ghost__Post__6127ba1b3ed159214d382e6e","title":"Web Design Tips For Web Developers","slug":"web-design-tips-for-web-developers","featured":false,"feature_image":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1542744094-3a31f272c490.jpg","excerpt":"Some tips on Web Design for Web Developers I have learned from a FREE Udemy course that are essential for your websites.","custom_excerpt":"Some tips on Web Design for Web Developers I have learned from a FREE Udemy course that are essential for your websites.","visibility":"public","created_at_pretty":"26 Oct 2020","published_at_pretty":"26 Oct 2020","updated_at_pretty":"26 Aug 2021","created_at":"2020-10-26T21:36:54.000+00:00","published_at":"2020-10-26T21:41:21.000+00:00","updated_at":"2021-08-26T17:53:42.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"design","url":"https://backend.shahednasser.com/tag/design/","name":"Design","visibility":"public","feature_image":null,"description":"Learn more about Web Design through tutorials, articles and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"design","url":"https://backend.shahednasser.com/tag/design/","name":"Design","visibility":"public","feature_image":null,"description":"Learn more about Web Design through tutorials, articles and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"Recently I took a course on Udemy called Web Design for Web Developers\n[https://www.udemy.com/web-design-secrets/learn/v4/overview]. The course is very\nshort and has a few simple tips that are actually really important to achieve a\nclean design for your website.\n\nI advise you to take the course - it is only one hour long and it is FREE - to\nget a better understanding of these tips. However, I will be sharing with you\nwhat I learned in the hopes that it will help you out.\n\n\n--------------------------------------------------------------------------------\n\nTypography\n * Font size should be between 15px and 25px for body text.\n * Headlines should have a big font size\n * Line height should be between 120% and 150% of font size.\n * Pick a font that reflects the feel of the website, and stick with it for the\n   entire website\n\n\n--------------------------------------------------------------------------------\n\nColors\n * Specify a base color\n * Using online tools, create a palette based on different shades of the base\n   color or what colors go well with it.\n * For Call To Action buttons, use colors that will draw the attention of the\n   user\n * Do not overuse Black in your design\n\n\n--------------------------------------------------------------------------------\n\nImages\n * When putting text over images, make sure to add an overlay to the image so\n   the text can be readable.\n * If you do not want to add an overlay, you could put the text in a box and\n   give it a background color.\n * Another option is to blur the image.\n\n\n--------------------------------------------------------------------------------\n\nIcons\n * Use icons for features, services, steps, etc.\n * Make sure the icons are easily understood to not cause confusion, especially\n   if they are not accompanied by text.\n * Label your icons.\n\n\n--------------------------------------------------------------------------------\n\nSpacing/Layout\n * Put whitespace between website sections to make the start and end of a\n   section apparent.\n * Base the layout on what you want your audience to focus on.\n * Make sure the whitespace between elements is not too small that everything\n   looks crowded\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nThese are just a few of the helpful tips I learned from the course. To get more\ninsight and understand the concepts more clearly, take an hour to go through the\ncourse.\n\nSuggested Read\nHiring managers looking to spot the best web developers may want to check out\nthis article [https://www.toptal.com/web#hiring-guide] from Toptal.","html":"<p>Recently I took a course on Udemy called <a href=\"https://www.udemy.com/web-design-secrets/learn/v4/overview\" rel=\"noopener noreferrer\">Web Design for Web Developers</a>. The course is very short and has a few simple tips that are actually really important to achieve a clean design for your website.</p><p>I advise you to take the course - it is only one hour long and it is <strong>FREE</strong> - to get a better understanding of these tips. However, I will be sharing with you what I learned in the hopes that it will help you out.</p><hr><h3 id=\"typography\">Typography</h3><ul><li>Font size should be between 15px and 25px for body text.</li><li>Headlines should have a big font size</li><li>Line height should be between 120% and 150% of font size.</li><li>Pick a font that reflects the feel of the website, and stick with it for the entire website</li></ul><hr><h3 id=\"colors\">Colors</h3><ul><li>Specify a base color</li><li>Using online tools, create a palette based on different shades of the base color or what colors go well with it.</li><li>For Call To Action buttons, use colors that will draw the attention of the user</li><li>Do not overuse Black in your design</li></ul><hr><h3 id=\"images\">Images</h3><ul><li>When putting text over images, make sure to add an overlay to the image so the text can be readable.</li><li>If you do not want to add an overlay, you could put the text in a box and give it a background color.</li><li>Another option is to blur the image.</li></ul><hr><h3 id=\"icons\">Icons</h3><ul><li>Use icons for features, services, steps, etc.</li><li>Make sure the icons are easily understood to not cause confusion, especially if they are not accompanied by text.</li><li>Label your icons.</li></ul><hr><h3 id=\"spacing-layout\">Spacing/Layout</h3><ul><li>Put whitespace between website sections to make the start and end of a section apparent.</li><li>Base the layout on what you want your audience to focus on.</li><li>Make sure the whitespace between elements is not too small that everything looks crowded</li></ul><hr><h3 id=\"conclusion\">Conclusion</h3><p>These are just a few of the helpful tips I learned from the course. To get more insight and understand the concepts more clearly, take an hour to go through the course.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>Hiring managers looking to spot the best web developers may want <a href=\"https://www.toptal.com/web#hiring-guide\" rel=\"noopener noreferrer\" target=\"_blank\">to check out this article</a> from Toptal. </p></div><!--kg-card-end: html-->","url":"https://backend.shahednasser.com/web-design-tips-for-web-developers/","canonical_url":null,"uuid":"ef3613d0-0c45-4d78-ab57-ca1e06b77528","codeinjection_foot":null,"codeinjection_head":"<style>\n    .suggested-read {\n    \tbackground-color: #e8e8e8;\n    \tpadding: 20px;\n\t}\n</style>","codeinjection_styles":"\n    .suggested-read {\n    \tbackground-color: #e8e8e8;\n    \tpadding: 20px;\n\t}\n","comment_id":"5f974176b366d4001e86cc9e","reading_time":1,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>Recently I took a course on Udemy called <a href=\"https://www.udemy.com/web-design-secrets/learn/v4/overview\" rel=\"noopener noreferrer\">Web Design for Web Developers</a>. The course is very short and has a few simple tips that are actually really important to achieve a clean design for your website.</p><p>I advise you to take the course - it is only one hour long and it is <strong>FREE</strong> - to get a better understanding of these tips. However, I will be sharing with you what I learned in the hopes that it will help you out.</p><hr><h3 id=\"typography\">Typography</h3><ul><li>Font size should be between 15px and 25px for body text.</li><li>Headlines should have a big font size</li><li>Line height should be between 120% and 150% of font size.</li><li>Pick a font that reflects the feel of the website, and stick with it for the entire website</li></ul><hr><h3 id=\"colors\">Colors</h3><ul><li>Specify a base color</li><li>Using online tools, create a palette based on different shades of the base color or what colors go well with it.</li><li>For Call To Action buttons, use colors that will draw the attention of the user</li><li>Do not overuse Black in your design</li></ul><hr><h3 id=\"images\">Images</h3><ul><li>When putting text over images, make sure to add an overlay to the image so the text can be readable.</li><li>If you do not want to add an overlay, you could put the text in a box and give it a background color.</li><li>Another option is to blur the image.</li></ul><hr><h3 id=\"icons\">Icons</h3><ul><li>Use icons for features, services, steps, etc.</li><li>Make sure the icons are easily understood to not cause confusion, especially if they are not accompanied by text.</li><li>Label your icons.</li></ul><hr><h3 id=\"spacing-layout\">Spacing/Layout</h3><ul><li>Put whitespace between website sections to make the start and end of a section apparent.</li><li>Base the layout on what you want your audience to focus on.</li><li>Make sure the whitespace between elements is not too small that everything looks crowded</li></ul><hr><h3 id=\"conclusion\">Conclusion</h3><p>These are just a few of the helpful tips I learned from the course. To get more insight and understand the concepts more clearly, take an hour to go through the course.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>Hiring managers looking to spot the best web developers may want <a href=\"https://www.toptal.com/web#hiring-guide\" rel=\"noopener noreferrer\" target=\"_blank\">to check out this article</a> from Toptal. </p></div><!--kg-card-end: html-->","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Recently I took a course on Udemy called "},{"type":"element","tagName":"a","properties":{"href":"https://www.udemy.com/web-design-secrets/learn/v4/overview","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Web Design for Web Developers"}]},{"type":"text","value":". The course is very short and has a few simple tips that are actually really important to achieve a clean design for your website."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I advise you to take the course - it is only one hour long and it is "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"FREE"}]},{"type":"text","value":" - to get a better understanding of these tips. However, I will be sharing with you what I learned in the hopes that it will help you out."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"typography"},"children":[{"type":"text","value":"Typography"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Font size should be between 15px and 25px for body text."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Headlines should have a big font size"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Line height should be between 120% and 150% of font size."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pick a font that reflects the feel of the website, and stick with it for the entire website"}]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"colors"},"children":[{"type":"text","value":"Colors"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Specify a base color"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using online tools, create a palette based on different shades of the base color or what colors go well with it."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"For Call To Action buttons, use colors that will draw the attention of the user"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Do not overuse Black in your design"}]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"images"},"children":[{"type":"text","value":"Images"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When putting text over images, make sure to add an overlay to the image so the text can be readable."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you do not want to add an overlay, you could put the text in a box and give it a background color."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Another option is to blur the image."}]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"icons"},"children":[{"type":"text","value":"Icons"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Use icons for features, services, steps, etc."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Make sure the icons are easily understood to not cause confusion, especially if they are not accompanied by text."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Label your icons."}]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"spacing-layout"},"children":[{"type":"text","value":"Spacing/Layout"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Put whitespace between website sections to make the start and end of a section apparent."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Base the layout on what you want your audience to focus on."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Make sure the whitespace between elements is not too small that everything looks crowded"}]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These are just a few of the helpful tips I learned from the course. To get more insight and understand the concepts more clearly, take an hour to go through the course."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"div","properties":{"className":["suggested-read"]},"children":[{"type":"element","tagName":"h4","properties":{},"children":[{"type":"text","value":"Suggested Read"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hiring managers looking to spot the best web developers may want "},{"type":"element","tagName":"a","properties":{"href":"https://www.toptal.com/web#hiring-guide","rel":["noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"to check out this article"}]},{"type":"text","value":" from Toptal. "}]}]},{"type":"comment","value":"kg-card-end: html"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"typography","heading":"Typography"},{"id":"colors","heading":"Colors"},{"id":"images","heading":"Images"},{"id":"icons","heading":"Icons"},{"id":"spacing-layout","heading":"Spacing/Layout"},{"id":"conclusion","heading":"Conclusion","items":[{"id":"error-missing-id","heading":"Suggested Read"}]}]},"featureImageSharp":{"base":"photo-1542744094-3a31f272c490.jpg","publicURL":"/static/6f6b73f2356f89c8be0c82d9fe78a145/photo-1542744094-3a31f272c490.jpg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAHMohtiQwP/xAAaEAADAAMBAAAAAAAAAAAAAAABAgMAERIT/9oACAEBAAEFApT9MWKY89NJirnfKsSP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEh/9oACAEDAQE/AdqP/8QAFREBAQAAAAAAAAAAAAAAAAAAECH/2gAIAQIBAT8Bh//EAB0QAAIBBAMAAAAAAAAAAAAAAAAhEQECAxIxQWH/2gAIAQEABj8Crr02TfkXghEycn//xAAaEAADAQEBAQAAAAAAAAAAAAAAAREhYTFx/9oACAEBAAE/IYFZKaYQiS4elxU100CXH8GwMX4//9oADAMBAAIAAwAAABCTH//EABYRAQEBAAAAAAAAAAAAAAAAAAEAQf/aAAgBAwEBPxAwgpf/xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAECAQE/EHHZTb//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAhMVFBYZHR/9oACAEBAAE/EEJq6RnD8w1NMKXtt/M1JlBHSnjDy8WTyuTII/QtDB1CKb3fef/Z","aspectRatio":1.4957264957264957,"src":"/static/6f6b73f2356f89c8be0c82d9fe78a145/ea4ab/photo-1542744094-3a31f272c490.jpg","srcSet":"/static/6f6b73f2356f89c8be0c82d9fe78a145/477ba/photo-1542744094-3a31f272c490.jpg 175w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/06776/photo-1542744094-3a31f272c490.jpg 350w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/ea4ab/photo-1542744094-3a31f272c490.jpg 700w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/3055e/photo-1542744094-3a31f272c490.jpg 1050w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/eff08/photo-1542744094-3a31f272c490.jpg 1400w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/4e5f3/photo-1542744094-3a31f272c490.jpg 2000w","srcWebp":"/static/6f6b73f2356f89c8be0c82d9fe78a145/89afa/photo-1542744094-3a31f272c490.webp","srcSetWebp":"/static/6f6b73f2356f89c8be0c82d9fe78a145/9fca7/photo-1542744094-3a31f272c490.webp 175w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/37a4e/photo-1542744094-3a31f272c490.webp 350w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/89afa/photo-1542744094-3a31f272c490.webp 700w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/78e7a/photo-1542744094-3a31f272c490.webp 1050w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/03d34/photo-1542744094-3a31f272c490.webp 1400w,\n/static/6f6b73f2356f89c8be0c82d9fe78a145/49d6b/photo-1542744094-3a31f272c490.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__6127ba1b3ed159214d382e6f","title":"Quran In New Tab - Chrome Extension","slug":"quran-in-new-tab-chrome-extension","featured":false,"feature_image":"https://res-5.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/quran.jpg","excerpt":"Replace the new tab page with Quran verses and beautiful nature pictures. The verses and pictures are randomly generated hourly.","custom_excerpt":"Replace the new tab page with Quran verses and beautiful nature pictures. The verses and pictures are randomly generated hourly.","visibility":"public","created_at_pretty":"26 Oct 2020","published_at_pretty":"6 Nov 2019","updated_at_pretty":"26 Aug 2021","created_at":"2020-10-26T21:42:23.000+00:00","published_at":"2019-11-06T18:23:00.000+00:00","updated_at":"2021-08-26T17:54:06.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"projects","url":"https://backend.shahednasser.com/tag/projects/","name":"Projects","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"projects","url":"https://backend.shahednasser.com/tag/projects/","name":"Projects","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":" * Download Now\n   [https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg?hl=en]\n\nReplace the new tab page with Quran verses and beautiful nature pictures. The\nverses and pictures are randomly generated hourly. You can choose to show or\nhide your top sites.\n\nNEW I am working on adding more languages to this extension, and I need help\nwith many of them. If you think you can help in translating it, please go here\n[https://crowdin.com/project/quran-in-new-tab-extension] to start helping!\n\n\n--------------------------------------------------------------------------------\n\nRecitations\nYou can play an audio of the recitation of the verse shown. You can choose from\nthe following reciters:\n\n * Mashary Rashid Alafasy\n * Abdallah Basfar\n * Abdurrahmaan As-Sudais\n * Abdul Samad\n\nand many more.\n\n\n--------------------------------------------------------------------------------\n\nTranslations\nYou can turn on the translation for the verses. Some of the languages available\nfor translations are:\n\n * English\n * German\n * Spanish\n * Indonesian\n * Italian\n\nand many more.\n\n\n--------------------------------------------------------------------------------\n\nAthkar\nStarting from version 1.0, you can show randomly generated Athkar on your new\ntab as well.\n\n\n--------------------------------------------------------------------------------\n\nCredits\nAll Quran verses, audios and translations use the API of Al Quran Cloud\nIcons from Feather\nLogo from https://www.freeiconspng.com/img/8824\n\n\n\n--------------------------------------------------------------------------------\n\nIssues\nIf you find any issues or bugs, please create an issue on the Github Repo\n[https://github.com/shahednasser/quran-extension].","html":"<!--kg-card-begin: html--><ul class=\"actions special\">\n                    <li><a href=\"https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg?hl=en\" class=\"button large\">Download Now</a></li>\n                </ul><!--kg-card-end: html--><p>Replace the new tab page with Quran verses and beautiful nature pictures. The verses and pictures are randomly generated hourly. You can choose to show or hide your top sites.</p><p><strong>NEW </strong>I am working on adding more languages to this extension, and I need help with many of them. If you think you can help in translating it, please go <a href=\"https://crowdin.com/project/quran-in-new-tab-extension\">here</a> to start helping!</p><hr><h2 id=\"recitations\">Recitations</h2><p>You can play an audio of the recitation of the verse shown. You can choose from the following reciters:</p><ul><li>Mashary Rashid Alafasy</li><li>Abdallah Basfar</li><li>Abdurrahmaan As-Sudais</li><li>Abdul Samad</li></ul><p>and many more.</p><hr><h2 id=\"translations\">Translations</h2><p>You can turn on the translation for the verses. Some of the languages available for translations are:</p><ul><li>English</li><li>German</li><li>Spanish</li><li>Indonesian</li><li>Italian</li></ul><p>and many more.</p><hr><h2 id=\"athkar\">Athkar</h2><p>Starting from version 1.0, you can show randomly generated Athkar on your new tab as well.</p><hr><h2 id=\"credits\">Credits</h2><p>All Quran verses, audios and translations use the API of Al Quran Cloud<br>Icons from Feather<br>Logo from <a href=\"https://www.freeiconspng.com/img/8824\">https://www.freeiconspng.com/img/8824</a><br></p><hr><h2 id=\"issues\">Issues</h2><p>If you find any issues or bugs, please create an issue on the <a href=\"https://github.com/shahednasser/quran-extension\">Github Repo</a>.</p>","url":"https://backend.shahednasser.com/quran-in-new-tab-chrome-extension/","canonical_url":"https://shahednasserblog.tk/quran-in-new-tab-chrome-extension","uuid":"6cb8f7dc-9ccd-4e56-b4ad-d8e72803f26f","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5f9742bfb366d4001e86ccb9","reading_time":1,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: html--><ul class=\"actions special\">\n                    <li><a href=\"https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg?hl=en\" class=\"button large\">Download Now</a></li>\n                </ul><!--kg-card-end: html--><p>Replace the new tab page with Quran verses and beautiful nature pictures. The verses and pictures are randomly generated hourly. You can choose to show or hide your top sites.</p><p><strong>NEW </strong>I am working on adding more languages to this extension, and I need help with many of them. If you think you can help in translating it, please go <a href=\"https://crowdin.com/project/quran-in-new-tab-extension\">here</a> to start helping!</p><hr><h2 id=\"recitations\">Recitations</h2><p>You can play an audio of the recitation of the verse shown. You can choose from the following reciters:</p><ul><li>Mashary Rashid Alafasy</li><li>Abdallah Basfar</li><li>Abdurrahmaan As-Sudais</li><li>Abdul Samad</li></ul><p>and many more.</p><hr><h2 id=\"translations\">Translations</h2><p>You can turn on the translation for the verses. Some of the languages available for translations are:</p><ul><li>English</li><li>German</li><li>Spanish</li><li>Indonesian</li><li>Italian</li></ul><p>and many more.</p><hr><h2 id=\"athkar\">Athkar</h2><p>Starting from version 1.0, you can show randomly generated Athkar on your new tab as well.</p><hr><h2 id=\"credits\">Credits</h2><p>All Quran verses, audios and translations use the API of Al Quran Cloud<br>Icons from Feather<br>Logo from <a href=\"https://www.freeiconspng.com/img/8824\">https://www.freeiconspng.com/img/8824</a><br></p><hr><h2 id=\"issues\">Issues</h2><p>If you find any issues or bugs, please create an issue on the <a href=\"https://github.com/shahednasser/quran-extension\">Github Repo</a>.</p>","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"ul","properties":{"className":["actions","special"]},"children":[{"type":"text","value":"\n                    "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg?hl=en","className":["button","large"]},"children":[{"type":"text","value":"Download Now"}]}]},{"type":"text","value":"\n                "}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Replace the new tab page with Quran verses and beautiful nature pictures. The verses and pictures are randomly generated hourly. You can choose to show or hide your top sites."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NEW "}]},{"type":"text","value":"I am working on adding more languages to this extension, and I need help with many of them. If you think you can help in translating it, please go "},{"type":"element","tagName":"a","properties":{"href":"https://crowdin.com/project/quran-in-new-tab-extension"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":" to start helping!"}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"recitations"},"children":[{"type":"text","value":"Recitations"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can play an audio of the recitation of the verse shown. You can choose from the following reciters:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Mashary Rashid Alafasy"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Abdallah Basfar"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Abdurrahmaan As-Sudais"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Abdul Samad"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"and many more."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"translations"},"children":[{"type":"text","value":"Translations"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can turn on the translation for the verses. Some of the languages available for translations are:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"English"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"German"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Spanish"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Indonesian"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Italian"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"and many more."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"athkar"},"children":[{"type":"text","value":"Athkar"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Starting from version 1.0, you can show randomly generated Athkar on your new tab as well."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"credits"},"children":[{"type":"text","value":"Credits"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All Quran verses, audios and translations use the API of Al Quran Cloud"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"Icons from Feather"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"Logo from "},{"type":"element","tagName":"a","properties":{"href":"https://www.freeiconspng.com/img/8824"},"children":[{"type":"text","value":"https://www.freeiconspng.com/img/8824"}]},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"issues"},"children":[{"type":"text","value":"Issues"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you find any issues or bugs, please create an issue on the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/quran-extension"},"children":[{"type":"text","value":"Github Repo"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"recitations","heading":"Recitations"},{"id":"translations","heading":"Translations"},{"id":"athkar","heading":"Athkar"},{"id":"credits","heading":"Credits"},{"id":"issues","heading":"Issues"}]},"featureImageSharp":{"base":"quran.jpg","publicURL":"/static/34fbf15a86a81d576af29f787f7f9f04/quran.jpg","imageMeta":{"width":2000,"height":2000},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAECBAUD/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABiPXZL4zqApQRnGk//8QAHBAAAgICAwAAAAAAAAAAAAAAAQIAAxESBCEi/9oACAEBAAEFAkZwqrYjCm0zjuWm65OSUrTVfQsHf//EABYRAAMAAAAAAAAAAAAAAAAAAAAQIf/aAAgBAwEBPwEj/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/AW1Uf//EABwQAAICAgMAAAAAAAAAAAAAAAABAhESISIxYf/aAAgBAQAGPwLGMHRxizo3R2i+Rko0/BaW0L1H/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFhcZH/2gAIAQEAAT8hygnk5jjKt0hLFKb5DAWCu5Qr+0ChjpJSEaEXj1wh2imlXP/aAAwDAQACAAMAAAAQyy//AP/EABcRAQEBAQAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8QtYRev//EABgRAAIDAAAAAAAAAAAAAAAAAABRARAx/9oACAECAQE/EGKpiD//xAAdEAEAAwEAAgMAAAAAAAAAAAABABEhMUFRkaHR/9oACAEBAAE/EDnmh4F6kWROD1erfyWmXdi4b3JaDDzquW+eysWzpSybIjlo+4wwatkOOa8ybdone77bBUbUMDaZ8T//2Q==","aspectRatio":1,"src":"/static/34fbf15a86a81d576af29f787f7f9f04/ea4ab/quran.jpg","srcSet":"/static/34fbf15a86a81d576af29f787f7f9f04/477ba/quran.jpg 175w,\n/static/34fbf15a86a81d576af29f787f7f9f04/06776/quran.jpg 350w,\n/static/34fbf15a86a81d576af29f787f7f9f04/ea4ab/quran.jpg 700w,\n/static/34fbf15a86a81d576af29f787f7f9f04/3055e/quran.jpg 1050w,\n/static/34fbf15a86a81d576af29f787f7f9f04/eff08/quran.jpg 1400w,\n/static/34fbf15a86a81d576af29f787f7f9f04/4e5f3/quran.jpg 2000w","srcWebp":"/static/34fbf15a86a81d576af29f787f7f9f04/89afa/quran.webp","srcSetWebp":"/static/34fbf15a86a81d576af29f787f7f9f04/9fca7/quran.webp 175w,\n/static/34fbf15a86a81d576af29f787f7f9f04/37a4e/quran.webp 350w,\n/static/34fbf15a86a81d576af29f787f7f9f04/89afa/quran.webp 700w,\n/static/34fbf15a86a81d576af29f787f7f9f04/78e7a/quran.webp 1050w,\n/static/34fbf15a86a81d576af29f787f7f9f04/03d34/quran.webp 1400w,\n/static/34fbf15a86a81d576af29f787f7f9f04/49d6b/quran.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__61338d42d8016c9d86b23703","title":"Beginner's Guide to Magento 2: Understanding the Structure","slug":"beginners-guide-to-magento-2-understanding-the-structure","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/09/Beginner-s-Guide-to-Magento-2.png","excerpt":"In this article, you'll learn the basics of Magento 2. This article is perfect for beginners who are interested to learn how Magento works.","custom_excerpt":"In this article, you'll learn the basics of Magento 2. This article is perfect for beginners who are interested to learn how Magento works.","visibility":"public","created_at_pretty":"4 Sep 2021","published_at_pretty":"7 Sep 2021","updated_at_pretty":"13 Sep 2021","created_at":"2021-09-04T15:14:10.000+00:00","published_at":"2021-09-07T16:09:47.000+00:00","updated_at":"2021-09-13T07:12:12.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"1_ZxqU4dcMgnOkEe_YcZ01EQ.png","publicURL":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","imageMeta":{"width":2000,"height":1000},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVQoz2P4TwFgQDD//YMi/ACk4B82zX//IPHQAVabQaL/vn/5fXT9r/3L/314DTMem60/vv0+f+Dfp7cQNQwQ237uWfZjdd+PzTP+bJ119sLFXTt3Xr1y5d7du9evXb99+/bRw0euX7v26eu3/5/efV/W9WPjDJDmP3+gmn8d2fRtWsm3yQW/9iw7e+78po0bN2/aNHP6jEULFu7auXPdmrU7tm9/9uLl/18/vk0t/n3lGNjmv3A///t1bPOv3Uv//foJ9jsIPHv27MOHDxDpXz9//vv//+/jm99mVf65dQ7mbJQA+4vHw0REFUqkYAQyJEb+/cXQTHoiAQDMTzrKXUcJ/gAAAABJRU5ErkJggg==","aspectRatio":2,"src":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","srcSet":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/bcfcb/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/19d75/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/47b0f/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/71514/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 2000w","srcWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp","srcSetWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/dc8f3/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/2db4b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/f5845/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/49d6b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"ecommerce","url":"https://backend.shahednasser.com/tag/ecommerce/","name":"eCommerce","visibility":"public","feature_image":null,"description":"Learn more about eCommerce through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Magento 2 is a popular e-commerce platform that has a variety of out-of-the-box\nfeatures and high-security levels. With Magento 2, you're guaranteed to have an\ne-commerce platform that provides all the necessary functionalities you need and\nmore for your business to flourish.\n\nIn this article, you'll learn the basics of Magento 2. You'll learn about the\nstructure of Magento 2 including, modules, themes, and more, and a brief\noverview of each. This article is perfect for beginners who are interested to\nlearn how Magento works.\n\nSystem Requirements\nTo start working with the latest version of Magento 2, you'll need at least PHP\n7.4 (at the time of writing this article). You'll also need Elasticsearch\n[https://www.elastic.co] installed and running as a background service.\n\nIn addition, you need Composer installed. Composer is necessary to initiate the\ninstallation.\n\nMySQL is also required for the database of Magento 2.\n\nOnce you have these elements installed, you can start installing Magento. There\nare a few steps before you can get Magento 2 installed and working, so I suggest\nyou follow the official installation guide\n[https://devdocs.magento.com/guides/v2.4/install-gde/composer.html].\n\nDirectory Structure Overview\nWe'll go over the directory structure in Magento briefly. After you install\nMagento, this is how the directory structure should look like:\n\nWe'll briefly go over what each directory is:\n\n 1.  app: This directory is where you'll spend most of your time when\n     programming in Magento 2. It should have three directories: code which is\n     where your custom modules will go into; design which is where your custom\n     themes will go into; and etc which holds the main configuration files for\n     Magento's system and modules or settings.\n 2.  bin: This holds Magento's CLI tool. You'll use this tool to compile,\n     generate static data, run cron jobs, and more.\n 3.  dev: This tool is more related to using tools like Grunt\n     [https://gruntjs.com]. Magento 2 supports Grunt out-of-the-box. Although\n     you don't need to use it, using Grunt with Magento 2 speeds up your\n     frontend development\n     [https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt/]\n     .\n 4.  generated: when creating modules in Magento 2, you'll frequently need to\n     compile the code using the CLI tool. The generated classes and code are all\n     placed inside the generated directory.\n 5.  lib: This includes a set of libraries that are related to Magento's system.\n 6.  node_modules: Only present if you run npm install. You can use NPM packages\n     for a variety of reasons, like when you are using Grunt with Magento.\n 7.  phpserver: This directory includes the built-in PHP server.\n 8.  pub: This directory will include public media like images. It will also\n     include the generated static files of both the admin and the store. When\n     you open the website, all the pages and static files are used from this\n     directory.\n 9.  setup: This directory is only necessary when first setting up Magento 2 and\n     installing it.\n 10. var: This directory includes cache files, logs, and more.\n 11. vendor: All composer-installed libraries and packages, including Magento's\n     code, will be present in this directory.\n\nAreas\nIn Magento, there is the admin side which allows you to view all data necessary\nto the store like customers, sales, and more. It also allows you to change\nsettings in the store. This side is protected by a password and should be only\naccessed by the managers of the store.\n\nThere's also the storefront, which is the store that the users see and buy items\nfrom.\n\nThese two sides are called \"areas\". The adminhtml area refers to the admin side,\nand the frontend area refers to the storefront. When creating modules and\nthemes, you'll see that these area names are used to separate static files,\nthemes, controllers, and more from each other.\n\nViews\nIn both modules and themes, there are view files. These files are what shape\neach page, and they can be new in your module or theme or override existing\nfiles.\n\nLayouts\nLayouts are XML files. One thing you can do with them is creating page layout\ntypes. These layout types define different types of structures which can be used\nwhen creating pages. For example, by default Magento has the page layout type \n2columns-left, which will show a sidebar at the left of the page. When creating\npage layouts later, if their type is 2columns-left they'll have a left sidebar.\n\nThe second type of layout XML files is page layouts which are specific for each\npage. Their name convention is ROUTENAME_CONTROLLER_ACTION.xml, where ROUTENAME \nis defined when you create a new module, CONTROLLER is the controller inside\nthat module which is usually a directory, and ACTION is one of the action\nclasses inside that controller directory.\n\nPage layouts consist of containers and blocks. Containers are mainly just HTML\nelement containers, whereas blocks are PHP classes that have templates\nrepresenting them.\n\nTemplates\nTemplates are what the user will see when we add a block to a page's layout. By\ndefault, templates have a block variable inside the template of the class \nMagento\\Framework\\View\\Element\\Template, but you can create your own block as\nwell. If you create your own block class, you can create functions or variables\ninside it that the template can use.\n\nStatic Files\nYou can add styling through CSS and Less files. If you use Less stylesheets,\nthey'll be compiled when you deploy the static content of your store.\n\nYou can also add Javascript files. Magento 2 uses RequireJS\n[https://requirejs.org] to load these static files efficiently. So, your\nJavascript files should support it. \n\nIn Javascript, you can use Knockout [https://knockoutjs.com]. It's a Javascript\nlibrary that allows you to create dynamic HTML templates.\n\nModules\nIn Magento 2, when you want to implement new functionality that's not present in\nthe system, you want to modify or remove existing functionality or want to\noverride how Magento 2 does something, you'll need to create a module for it.\n\nDatabase Tables\nYou can do many things inside modules. You can create database tables on\ninstallation or update or add to existing database tables. You can also insert\ndata into the database.\n\nModels\nYou can create Models that represent database tables. These models can have\nrepositories or factories that will allow you to easily read, insert, update or\ndelete data.\n\nPlugins\nYou can create Plugins that allow you to perform actions before, after, or\naround public functions of any class. You can also entirely override a class and\nchange it to whatever fits your needs.\n\nSettings\nInside every module, there's an etc directory. This directory holds mainly XML\nfiles that handle the settings and configurations of the module. For example,\nhere is where you would define the route name to access the module.\n\nControllers\nIn modules, you can create Controllers. Controllers handle requests into the\nmodule. Usually, Controllers are directories inside the Controller directory of\nthe module, and inside each Controller directory is a set of PHP classes. Each\nof these PHP classes is an action, meaning they're pages or endpoints for\nrequests.\n\nBlocks\nYou can create Blocks, which are added to and rendered in pages. Blocks allow\nyou to create somewhat reusable components, each focusing on a certain\nfunctionality or information to be rendered.\n\nView Files\nModules can include all the view files mentioned in the previous section for\nboth the store and the admin side. You can create them specifically for your\nmodule or modify existing ones in other modules.\n\nCLI Commands\nInside modules, you can define CLI commands that you would use through Magento's\nCLI command.\n\nCron Jobs\nInside modules, you can define cron jobs at certain time spans and classes that\nperform tasks at the time specified for the cron job.\n\nObservers\nMagento 2 allows you to trigger events at any necessary point in your code. It\nalso allows you to listen to triggered events to perform certain actions. That's\nwhere observers come in. Observers listen to events triggered either by the same\nmodule or other modules.\n\nThemes\nMagento 2 uses themes to style your store. With themes, you can override the\nview files mentioned in previous sections that are created by modules. You can\nalso add new ones to change up the style.\n\nThemes mainly consist of view files, but they're encapsulated inside directories\nthat represent modules.\n\nInternationalization\nMagento 2 supports multiple languages in your store. This means that you can\nlocalize strings in your templates, blocks, controllers, etc...\n\nYou can also change the static files in a theme, like stylesheets, based on the\nlanguage of the store.\n\nYou can support different languages in both your theme or module. Translations\nare done through dictionaries that are CSV files. Magento also provides tools\nthat make creating dictionaries\n[https://devdocs.magento.com/guides/v2.4/config-guide/cli/config-cli-subcommands-i18n.html] \neasier.\n\nUI Components\nUI Components were introduced in later versions of Magento 2. They allow you to\ncreate layouts and pages, mainly on the admin side, using UI components that\nallow for the data to be dynamic and for the loading or saving of the data to be\nasynchronous.\n\nBy default, Magento provides a large set of UI components\n[https://devdocs.magento.com/guides/v2.4/ui_comp_guide/bk-ui_comps.html] that\nyou can use on any admin page at any given point. You can also create your own.\n\nConclusion\nThrough this brief overview, you can see a glimpse of what Magento 2's structure\nis like. It relies mainly on modules and themes, with necessary components,\nclasses, functionalities, and more inside it.\n\nBy understanding how Magneto's structure is like, you're able to start creating\nwith Magento 2 the functionalities and modifications you need for your store.","html":"<p>Magento 2 is a popular e-commerce platform that has a variety of out-of-the-box features and high-security levels. With Magento 2, you're guaranteed to have an e-commerce platform that provides all the necessary functionalities you need and more for your business to flourish.</p><p>In this article, you'll learn the basics of Magento 2. You'll learn about the structure of Magento 2 including, modules, themes, and more, and a brief overview of each. This article is perfect for beginners who are interested to learn how Magento works.</p><h2 id=\"system-requirements\">System Requirements</h2><p>To start working with the latest version of Magento 2, you'll need at least PHP 7.4 (at the time of writing this article). You'll also need <a href=\"https://www.elastic.co\">Elasticsearch</a> installed and running as a background service.</p><p>In addition, you need Composer installed. Composer is necessary to initiate the installation.</p><p>MySQL is also required for the database of Magento 2.</p><p>Once you have these elements installed, you can start installing Magento. There are a few steps before you can get Magento 2 installed and working, so I suggest you follow the <a href=\"https://devdocs.magento.com/guides/v2.4/install-gde/composer.html\">official installation guide</a>.</p><h2 id=\"directory-structure-overview\">Directory Structure Overview</h2><p>We'll go over the directory structure in Magento briefly. After you install Magento, this is how the directory structure should look like:</p><figure class=\"kg-card kg-image-card\"><img src=\"https://backend.shahednasser.com/content/images/2021/09/Screen-Shot-2021-09-04-at-6.26.52-PM.png\" class=\"kg-image\" alt loading=\"lazy\" width=\"550\" height=\"492\"></figure><p>We'll briefly go over what each directory is:</p><ol><li><strong>app</strong>: This directory is where you'll spend most of your time when programming in Magento 2. It should have three directories: <em>code</em> which is where your custom modules will go into; <em>design</em> which is where your custom themes will go into; and <em>etc</em> which holds the main configuration files for Magento's system and modules or settings.</li><li><strong>bin: </strong>This holds Magento's CLI tool. You'll use this tool to compile, generate static data, run cron jobs, and more.</li><li><strong>dev</strong>: This tool is more related to using tools like <a href=\"https://gruntjs.com\">Grunt</a>. Magento 2 supports Grunt out-of-the-box. Although you don't need to use it, using Grunt with Magento 2 <a href=\"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt/\">speeds up your frontend development</a>.</li><li><strong>generated</strong>: when creating modules in Magento 2, you'll frequently need to compile the code using the CLI tool. The generated classes and code are all placed inside the <em>generated </em>directory.</li><li><strong>lib</strong>: This includes a set of libraries that are related to Magento's system.</li><li><strong>node_modules: </strong>Only present if you run <code>npm install</code>. You can use NPM packages for a variety of reasons, like when you are using Grunt with Magento.</li><li><strong>phpserver</strong>: This directory includes the built-in PHP server.</li><li><strong>pub: </strong>This directory will include public media like images. It will also include the generated static files of both the admin and the store. When you open the website, all the pages and static files are used from this directory.</li><li><strong>setup: </strong>This directory is only necessary when first setting up Magento 2 and installing it.</li><li><strong>var: </strong>This directory includes cache files, logs, and more.</li><li><strong>vendor</strong>: All composer-installed libraries and packages, including Magento's code, will be present in this directory.</li></ol><h2 id=\"areas\">Areas</h2><p>In Magento, there is the admin side which allows you to view all data necessary to the store like customers, sales, and more. It also allows you to change settings in the store. This side is protected by a password and should be only accessed by the managers of the store.</p><p>There's also the storefront, which is the store that the users see and buy items from.</p><p>These two sides are called \"areas\". The <code>adminhtml</code> area refers to the admin side, and the <code>frontend</code> area refers to the storefront. When creating modules and themes, you'll see that these area names are used to separate static files, themes, controllers, and more from each other.</p><h2 id=\"views\">Views</h2><p>In both modules and themes, there are view files. These files are what shape each page, and they can be new in your module or theme or override existing files.</p><h3 id=\"layouts\">Layouts</h3><p>Layouts are XML files. One thing you can do with them is creating page layout types. These layout types define different types of structures which can be used when creating pages. For example, by default Magento has the page layout type <code>2columns-left</code>, which will show a sidebar at the left of the page. When creating page layouts later, if their type is <code>2columns-left</code> they'll have a left sidebar.</p><p>The second type of layout XML files is page layouts which are specific for each page. Their name convention is <code>ROUTENAME_CONTROLLER_ACTION.xml</code>, where <code>ROUTENAME</code> is defined when you create a new module, <code>CONTROLLER</code> is the controller inside that module which is usually a directory, and <code>ACTION</code> is one of the action classes inside that controller directory.</p><p>Page layouts consist of containers and blocks. Containers are mainly just HTML element containers, whereas blocks are PHP classes that have templates representing them.</p><h3 id=\"templates\">Templates</h3><p>Templates are what the user will see when we add a block to a page's layout. By default, templates have a block variable inside the template of the class <code>Magento\\Framework\\View\\Element\\Template</code>, but you can create your own block as well. If you create your own block class, you can create functions or variables inside it that the template can use.</p><h3 id=\"static-files\">Static Files</h3><p>You can add styling through CSS and Less files. If you use Less stylesheets, they'll be compiled when you deploy the static content of your store.</p><p>You can also add Javascript files. Magento 2 uses <a href=\"https://requirejs.org\">RequireJS</a> to load these static files efficiently. So, your Javascript files should support it. </p><p>In Javascript, you can use <a href=\"https://knockoutjs.com\">Knockout</a>. It's a Javascript library that allows you to create dynamic HTML templates.</p><h2 id=\"modules\">Modules</h2><p>In Magento 2, when you want to implement new functionality that's not present in the system, you want to modify or remove existing functionality or want to override how Magento 2 does something, you'll need to create a module for it.</p><h3 id=\"database-tables\">Database Tables</h3><p>You can do many things inside modules. You can create database tables on installation or update or add to existing database tables. You can also insert data into the database.</p><h3 id=\"models\">Models</h3><p>You can create Models that represent database tables. These models can have repositories or factories that will allow you to easily read, insert, update or delete data.</p><h3 id=\"plugins\">Plugins</h3><p>You can create Plugins that allow you to perform actions before, after, or around public functions of any class. You can also entirely override a class and change it to whatever fits your needs.</p><h3 id=\"settings\">Settings</h3><p>Inside every module, there's an <code>etc</code> directory. This directory holds mainly XML files that handle the settings and configurations of the module. For example, here is where you would define the route name to access the module.</p><h3 id=\"controllers\">Controllers</h3><p>In modules, you can create Controllers. Controllers handle requests into the module. Usually, Controllers are directories inside the <code>Controller</code> directory of the module, and inside each <code>Controller</code> directory is a set of PHP classes. Each of these PHP classes is an action, meaning they're pages or endpoints for requests.</p><h3 id=\"blocks\">Blocks</h3><p>You can create Blocks, which are added to and rendered in pages. Blocks allow you to create somewhat reusable components, each focusing on a certain functionality or information to be rendered.</p><h3 id=\"view-files\">View Files</h3><p>Modules can include all the view files mentioned in the previous section for both the store and the admin side. You can create them specifically for your module or modify existing ones in other modules.</p><h3 id=\"cli-commands\">CLI Commands</h3><p>Inside modules, you can define CLI commands that you would use through Magento's CLI command.</p><h3 id=\"cron-jobs\">Cron Jobs</h3><p>Inside modules, you can define cron jobs at certain time spans and classes that perform tasks at the time specified for the cron job.</p><h3 id=\"observers\">Observers</h3><p>Magento 2 allows you to trigger events at any necessary point in your code. It also allows you to listen to triggered events to perform certain actions. That's where observers come in. Observers listen to events triggered either by the same module or other modules.</p><h2 id=\"themes\">Themes</h2><p>Magento 2 uses themes to style your store. With themes, you can override the view files mentioned in previous sections that are created by modules. You can also add new ones to change up the style.</p><p>Themes mainly consist of view files, but they're encapsulated inside directories that represent modules.</p><h2 id=\"internationalization\">Internationalization</h2><p>Magento 2 supports multiple languages in your store. This means that you can localize strings in your templates, blocks, controllers, etc...</p><p>You can also change the static files in a theme, like stylesheets, based on the language of the store.</p><p>You can support different languages in both your theme or module. Translations are done through dictionaries that are CSV files. Magento also provides <a href=\"https://devdocs.magento.com/guides/v2.4/config-guide/cli/config-cli-subcommands-i18n.html\">tools that make creating dictionaries</a> easier.</p><h3 id=\"ui-components\">UI Components</h3><p>UI Components were introduced in later versions of Magento 2. They allow you to create layouts and pages, mainly on the admin side, using UI components that allow for the data to be dynamic and for the loading or saving of the data to be asynchronous.</p><p>By default, Magento provides a large set of <a href=\"https://devdocs.magento.com/guides/v2.4/ui_comp_guide/bk-ui_comps.html\">UI components</a> that you can use on any admin page at any given point. You can also create your own.</p><h2 id=\"conclusion\">Conclusion</h2><p>Through this brief overview, you can see a glimpse of what Magento 2's structure is like. It relies mainly on modules and themes, with necessary components, classes, functionalities, and more inside it.</p><p>By understanding how Magneto's structure is like, you're able to start creating with Magento 2 the functionalities and modifications you need for your store.</p>","url":"https://backend.shahednasser.com/beginners-guide-to-magento-2-understanding-the-structure/","canonical_url":null,"uuid":"c0765e4a-bf01-4026-9efb-f0a3cff58de3","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"61338d42d8016c9d86b23703","reading_time":6,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>Magento 2 is a popular e-commerce platform that has a variety of out-of-the-box features and high-security levels. With Magento 2, you're guaranteed to have an e-commerce platform that provides all the necessary functionalities you need and more for your business to flourish.</p><p>In this article, you'll learn the basics of Magento 2. You'll learn about the structure of Magento 2 including, modules, themes, and more, and a brief overview of each. This article is perfect for beginners who are interested to learn how Magento works.</p><h2 id=\"system-requirements\">System Requirements</h2><p>To start working with the latest version of Magento 2, you'll need at least PHP 7.4 (at the time of writing this article). You'll also need <a href=\"https://www.elastic.co\">Elasticsearch</a> installed and running as a background service.</p><p>In addition, you need Composer installed. Composer is necessary to initiate the installation.</p><p>MySQL is also required for the database of Magento 2.</p><p>Once you have these elements installed, you can start installing Magento. There are a few steps before you can get Magento 2 installed and working, so I suggest you follow the <a href=\"https://devdocs.magento.com/guides/v2.4/install-gde/composer.html\">official installation guide</a>.</p><h2 id=\"directory-structure-overview\">Directory Structure Overview</h2><p>We'll go over the directory structure in Magento briefly. After you install Magento, this is how the directory structure should look like:</p><figure class=\"kg-card kg-image-card\"><img src=\"https://backend.shahednasser.com/content/images/2021/09/Screen-Shot-2021-09-04-at-6.26.52-PM.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\" width=\"550\" height=\"492\"></figure><p>We'll briefly go over what each directory is:</p><ol><li><strong>app</strong>: This directory is where you'll spend most of your time when programming in Magento 2. It should have three directories: <em>code</em> which is where your custom modules will go into; <em>design</em> which is where your custom themes will go into; and <em>etc</em> which holds the main configuration files for Magento's system and modules or settings.</li><li><strong>bin: </strong>This holds Magento's CLI tool. You'll use this tool to compile, generate static data, run cron jobs, and more.</li><li><strong>dev</strong>: This tool is more related to using tools like <a href=\"https://gruntjs.com\">Grunt</a>. Magento 2 supports Grunt out-of-the-box. Although you don't need to use it, using Grunt with Magento 2 <a href=\"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt/\">speeds up your frontend development</a>.</li><li><strong>generated</strong>: when creating modules in Magento 2, you'll frequently need to compile the code using the CLI tool. The generated classes and code are all placed inside the <em>generated </em>directory.</li><li><strong>lib</strong>: This includes a set of libraries that are related to Magento's system.</li><li><strong>node_modules: </strong>Only present if you run <code class=\"language-text\">npm install</code>. You can use NPM packages for a variety of reasons, like when you are using Grunt with Magento.</li><li><strong>phpserver</strong>: This directory includes the built-in PHP server.</li><li><strong>pub: </strong>This directory will include public media like images. It will also include the generated static files of both the admin and the store. When you open the website, all the pages and static files are used from this directory.</li><li><strong>setup: </strong>This directory is only necessary when first setting up Magento 2 and installing it.</li><li><strong>var: </strong>This directory includes cache files, logs, and more.</li><li><strong>vendor</strong>: All composer-installed libraries and packages, including Magento's code, will be present in this directory.</li></ol><h2 id=\"areas\">Areas</h2><p>In Magento, there is the admin side which allows you to view all data necessary to the store like customers, sales, and more. It also allows you to change settings in the store. This side is protected by a password and should be only accessed by the managers of the store.</p><p>There's also the storefront, which is the store that the users see and buy items from.</p><p>These two sides are called \"areas\". The <code class=\"language-text\">adminhtml</code> area refers to the admin side, and the <code class=\"language-text\">frontend</code> area refers to the storefront. When creating modules and themes, you'll see that these area names are used to separate static files, themes, controllers, and more from each other.</p><h2 id=\"views\">Views</h2><p>In both modules and themes, there are view files. These files are what shape each page, and they can be new in your module or theme or override existing files.</p><h3 id=\"layouts\">Layouts</h3><p>Layouts are XML files. One thing you can do with them is creating page layout types. These layout types define different types of structures which can be used when creating pages. For example, by default Magento has the page layout type <code class=\"language-text\">2columns-left</code>, which will show a sidebar at the left of the page. When creating page layouts later, if their type is <code class=\"language-text\">2columns-left</code> they'll have a left sidebar.</p><p>The second type of layout XML files is page layouts which are specific for each page. Their name convention is <code class=\"language-text\">ROUTENAME_CONTROLLER_ACTION.xml</code>, where <code class=\"language-text\">ROUTENAME</code> is defined when you create a new module, <code class=\"language-text\">CONTROLLER</code> is the controller inside that module which is usually a directory, and <code class=\"language-text\">ACTION</code> is one of the action classes inside that controller directory.</p><p>Page layouts consist of containers and blocks. Containers are mainly just HTML element containers, whereas blocks are PHP classes that have templates representing them.</p><h3 id=\"templates\">Templates</h3><p>Templates are what the user will see when we add a block to a page's layout. By default, templates have a block variable inside the template of the class <code class=\"language-text\">Magento\\Framework\\View\\Element\\Template</code>, but you can create your own block as well. If you create your own block class, you can create functions or variables inside it that the template can use.</p><h3 id=\"static-files\">Static Files</h3><p>You can add styling through CSS and Less files. If you use Less stylesheets, they'll be compiled when you deploy the static content of your store.</p><p>You can also add Javascript files. Magento 2 uses <a href=\"https://requirejs.org\">RequireJS</a> to load these static files efficiently. So, your Javascript files should support it. </p><p>In Javascript, you can use <a href=\"https://knockoutjs.com\">Knockout</a>. It's a Javascript library that allows you to create dynamic HTML templates.</p><h2 id=\"modules\">Modules</h2><p>In Magento 2, when you want to implement new functionality that's not present in the system, you want to modify or remove existing functionality or want to override how Magento 2 does something, you'll need to create a module for it.</p><h3 id=\"database-tables\">Database Tables</h3><p>You can do many things inside modules. You can create database tables on installation or update or add to existing database tables. You can also insert data into the database.</p><h3 id=\"models\">Models</h3><p>You can create Models that represent database tables. These models can have repositories or factories that will allow you to easily read, insert, update or delete data.</p><h3 id=\"plugins\">Plugins</h3><p>You can create Plugins that allow you to perform actions before, after, or around public functions of any class. You can also entirely override a class and change it to whatever fits your needs.</p><h3 id=\"settings\">Settings</h3><p>Inside every module, there's an <code class=\"language-text\">etc</code> directory. This directory holds mainly XML files that handle the settings and configurations of the module. For example, here is where you would define the route name to access the module.</p><h3 id=\"controllers\">Controllers</h3><p>In modules, you can create Controllers. Controllers handle requests into the module. Usually, Controllers are directories inside the <code class=\"language-text\">Controller</code> directory of the module, and inside each <code class=\"language-text\">Controller</code> directory is a set of PHP classes. Each of these PHP classes is an action, meaning they're pages or endpoints for requests.</p><h3 id=\"blocks\">Blocks</h3><p>You can create Blocks, which are added to and rendered in pages. Blocks allow you to create somewhat reusable components, each focusing on a certain functionality or information to be rendered.</p><h3 id=\"view-files\">View Files</h3><p>Modules can include all the view files mentioned in the previous section for both the store and the admin side. You can create them specifically for your module or modify existing ones in other modules.</p><h3 id=\"cli-commands\">CLI Commands</h3><p>Inside modules, you can define CLI commands that you would use through Magento's CLI command.</p><h3 id=\"cron-jobs\">Cron Jobs</h3><p>Inside modules, you can define cron jobs at certain time spans and classes that perform tasks at the time specified for the cron job.</p><h3 id=\"observers\">Observers</h3><p>Magento 2 allows you to trigger events at any necessary point in your code. It also allows you to listen to triggered events to perform certain actions. That's where observers come in. Observers listen to events triggered either by the same module or other modules.</p><h2 id=\"themes\">Themes</h2><p>Magento 2 uses themes to style your store. With themes, you can override the view files mentioned in previous sections that are created by modules. You can also add new ones to change up the style.</p><p>Themes mainly consist of view files, but they're encapsulated inside directories that represent modules.</p><h2 id=\"internationalization\">Internationalization</h2><p>Magento 2 supports multiple languages in your store. This means that you can localize strings in your templates, blocks, controllers, etc...</p><p>You can also change the static files in a theme, like stylesheets, based on the language of the store.</p><p>You can support different languages in both your theme or module. Translations are done through dictionaries that are CSV files. Magento also provides <a href=\"https://devdocs.magento.com/guides/v2.4/config-guide/cli/config-cli-subcommands-i18n.html\">tools that make creating dictionaries</a> easier.</p><h3 id=\"ui-components\">UI Components</h3><p>UI Components were introduced in later versions of Magento 2. They allow you to create layouts and pages, mainly on the admin side, using UI components that allow for the data to be dynamic and for the loading or saving of the data to be asynchronous.</p><p>By default, Magento provides a large set of <a href=\"https://devdocs.magento.com/guides/v2.4/ui_comp_guide/bk-ui_comps.html\">UI components</a> that you can use on any admin page at any given point. You can also create your own.</p><h2 id=\"conclusion\">Conclusion</h2><p>Through this brief overview, you can see a glimpse of what Magento 2's structure is like. It relies mainly on modules and themes, with necessary components, classes, functionalities, and more inside it.</p><p>By understanding how Magneto's structure is like, you're able to start creating with Magento 2 the functionalities and modifications you need for your store.</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Magento 2 is a popular e-commerce platform that has a variety of out-of-the-box features and high-security levels. With Magento 2, you're guaranteed to have an e-commerce platform that provides all the necessary functionalities you need and more for your business to flourish."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this article, you'll learn the basics of Magento 2. You'll learn about the structure of Magento 2 including, modules, themes, and more, and a brief overview of each. This article is perfect for beginners who are interested to learn how Magento works."}]},{"type":"element","tagName":"h2","properties":{"id":"system-requirements"},"children":[{"type":"text","value":"System Requirements"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To start working with the latest version of Magento 2, you'll need at least PHP 7.4 (at the time of writing this article). You'll also need "},{"type":"element","tagName":"a","properties":{"href":"https://www.elastic.co"},"children":[{"type":"text","value":"Elasticsearch"}]},{"type":"text","value":" installed and running as a background service."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition, you need Composer installed. Composer is necessary to initiate the installation."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"MySQL is also required for the database of Magento 2."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you have these elements installed, you can start installing Magento. There are a few steps before you can get Magento 2 installed and working, so I suggest you follow the "},{"type":"element","tagName":"a","properties":{"href":"https://devdocs.magento.com/guides/v2.4/install-gde/composer.html"},"children":[{"type":"text","value":"official installation guide"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"directory-structure-overview"},"children":[{"type":"text","value":"Directory Structure Overview"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We'll go over the directory structure in Magento briefly. After you install Magento, this is how the directory structure should look like:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/09/Screen-Shot-2021-09-04-at-6.26.52-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":550,"height":492},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We'll briefly go over what each directory is:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app"}]},{"type":"text","value":": This directory is where you'll spend most of your time when programming in Magento 2. It should have three directories: "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" which is where your custom modules will go into; "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"design"}]},{"type":"text","value":" which is where your custom themes will go into; and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"etc"}]},{"type":"text","value":" which holds the main configuration files for Magento's system and modules or settings."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"bin: "}]},{"type":"text","value":"This holds Magento's CLI tool. You'll use this tool to compile, generate static data, run cron jobs, and more."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"dev"}]},{"type":"text","value":": This tool is more related to using tools like "},{"type":"element","tagName":"a","properties":{"href":"https://gruntjs.com"},"children":[{"type":"text","value":"Grunt"}]},{"type":"text","value":". Magento 2 supports Grunt out-of-the-box. Although you don't need to use it, using Grunt with Magento 2 "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt/"},"children":[{"type":"text","value":"speeds up your frontend development"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"generated"}]},{"type":"text","value":": when creating modules in Magento 2, you'll frequently need to compile the code using the CLI tool. The generated classes and code are all placed inside the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"generated "}]},{"type":"text","value":"directory."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"lib"}]},{"type":"text","value":": This includes a set of libraries that are related to Magento's system."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"node_modules: "}]},{"type":"text","value":"Only present if you run "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm install"}]},{"type":"text","value":". You can use NPM packages for a variety of reasons, like when you are using Grunt with Magento."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"phpserver"}]},{"type":"text","value":": This directory includes the built-in PHP server."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"pub: "}]},{"type":"text","value":"This directory will include public media like images. It will also include the generated static files of both the admin and the store. When you open the website, all the pages and static files are used from this directory."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setup: "}]},{"type":"text","value":"This directory is only necessary when first setting up Magento 2 and installing it."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"var: "}]},{"type":"text","value":"This directory includes cache files, logs, and more."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"vendor"}]},{"type":"text","value":": All composer-installed libraries and packages, including Magento's code, will be present in this directory."}]}]},{"type":"element","tagName":"h2","properties":{"id":"areas"},"children":[{"type":"text","value":"Areas"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Magento, there is the admin side which allows you to view all data necessary to the store like customers, sales, and more. It also allows you to change settings in the store. This side is protected by a password and should be only accessed by the managers of the store."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There's also the storefront, which is the store that the users see and buy items from."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These two sides are called \"areas\". The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"adminhtml"}]},{"type":"text","value":" area refers to the admin side, and the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"frontend"}]},{"type":"text","value":" area refers to the storefront. When creating modules and themes, you'll see that these area names are used to separate static files, themes, controllers, and more from each other."}]},{"type":"element","tagName":"h2","properties":{"id":"views"},"children":[{"type":"text","value":"Views"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In both modules and themes, there are view files. These files are what shape each page, and they can be new in your module or theme or override existing files."}]},{"type":"element","tagName":"h3","properties":{"id":"layouts"},"children":[{"type":"text","value":"Layouts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Layouts are XML files. One thing you can do with them is creating page layout types. These layout types define different types of structures which can be used when creating pages. For example, by default Magento has the page layout type "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"2columns-left"}]},{"type":"text","value":", which will show a sidebar at the left of the page. When creating page layouts later, if their type is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"2columns-left"}]},{"type":"text","value":" they'll have a left sidebar."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The second type of layout XML files is page layouts which are specific for each page. Their name convention is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ROUTENAME_CONTROLLER_ACTION.xml"}]},{"type":"text","value":", where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ROUTENAME"}]},{"type":"text","value":" is defined when you create a new module, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"CONTROLLER"}]},{"type":"text","value":" is the controller inside that module which is usually a directory, and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ACTION"}]},{"type":"text","value":" is one of the action classes inside that controller directory."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Page layouts consist of containers and blocks. Containers are mainly just HTML element containers, whereas blocks are PHP classes that have templates representing them."}]},{"type":"element","tagName":"h3","properties":{"id":"templates"},"children":[{"type":"text","value":"Templates"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Templates are what the user will see when we add a block to a page's layout. By default, templates have a block variable inside the template of the class "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento\\Framework\\View\\Element\\Template"}]},{"type":"text","value":", but you can create your own block as well. If you create your own block class, you can create functions or variables inside it that the template can use."}]},{"type":"element","tagName":"h3","properties":{"id":"static-files"},"children":[{"type":"text","value":"Static Files"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can add styling through CSS and Less files. If you use Less stylesheets, they'll be compiled when you deploy the static content of your store."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also add Javascript files. Magento 2 uses "},{"type":"element","tagName":"a","properties":{"href":"https://requirejs.org"},"children":[{"type":"text","value":"RequireJS"}]},{"type":"text","value":" to load these static files efficiently. So, your Javascript files should support it. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Javascript, you can use "},{"type":"element","tagName":"a","properties":{"href":"https://knockoutjs.com"},"children":[{"type":"text","value":"Knockout"}]},{"type":"text","value":". It's a Javascript library that allows you to create dynamic HTML templates."}]},{"type":"element","tagName":"h2","properties":{"id":"modules"},"children":[{"type":"text","value":"Modules"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Magento 2, when you want to implement new functionality that's not present in the system, you want to modify or remove existing functionality or want to override how Magento 2 does something, you'll need to create a module for it."}]},{"type":"element","tagName":"h3","properties":{"id":"database-tables"},"children":[{"type":"text","value":"Database Tables"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can do many things inside modules. You can create database tables on installation or update or add to existing database tables. You can also insert data into the database."}]},{"type":"element","tagName":"h3","properties":{"id":"models"},"children":[{"type":"text","value":"Models"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can create Models that represent database tables. These models can have repositories or factories that will allow you to easily read, insert, update or delete data."}]},{"type":"element","tagName":"h3","properties":{"id":"plugins"},"children":[{"type":"text","value":"Plugins"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can create Plugins that allow you to perform actions before, after, or around public functions of any class. You can also entirely override a class and change it to whatever fits your needs."}]},{"type":"element","tagName":"h3","properties":{"id":"settings"},"children":[{"type":"text","value":"Settings"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Inside every module, there's an "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"etc"}]},{"type":"text","value":" directory. This directory holds mainly XML files that handle the settings and configurations of the module. For example, here is where you would define the route name to access the module."}]},{"type":"element","tagName":"h3","properties":{"id":"controllers"},"children":[{"type":"text","value":"Controllers"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In modules, you can create Controllers. Controllers handle requests into the module. Usually, Controllers are directories inside the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Controller"}]},{"type":"text","value":" directory of the module, and inside each "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Controller"}]},{"type":"text","value":" directory is a set of PHP classes. Each of these PHP classes is an action, meaning they're pages or endpoints for requests."}]},{"type":"element","tagName":"h3","properties":{"id":"blocks"},"children":[{"type":"text","value":"Blocks"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can create Blocks, which are added to and rendered in pages. Blocks allow you to create somewhat reusable components, each focusing on a certain functionality or information to be rendered."}]},{"type":"element","tagName":"h3","properties":{"id":"view-files"},"children":[{"type":"text","value":"View Files"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Modules can include all the view files mentioned in the previous section for both the store and the admin side. You can create them specifically for your module or modify existing ones in other modules."}]},{"type":"element","tagName":"h3","properties":{"id":"cli-commands"},"children":[{"type":"text","value":"CLI Commands"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Inside modules, you can define CLI commands that you would use through Magento's CLI command."}]},{"type":"element","tagName":"h3","properties":{"id":"cron-jobs"},"children":[{"type":"text","value":"Cron Jobs"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Inside modules, you can define cron jobs at certain time spans and classes that perform tasks at the time specified for the cron job."}]},{"type":"element","tagName":"h3","properties":{"id":"observers"},"children":[{"type":"text","value":"Observers"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Magento 2 allows you to trigger events at any necessary point in your code. It also allows you to listen to triggered events to perform certain actions. That's where observers come in. Observers listen to events triggered either by the same module or other modules."}]},{"type":"element","tagName":"h2","properties":{"id":"themes"},"children":[{"type":"text","value":"Themes"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Magento 2 uses themes to style your store. With themes, you can override the view files mentioned in previous sections that are created by modules. You can also add new ones to change up the style."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Themes mainly consist of view files, but they're encapsulated inside directories that represent modules."}]},{"type":"element","tagName":"h2","properties":{"id":"internationalization"},"children":[{"type":"text","value":"Internationalization"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Magento 2 supports multiple languages in your store. This means that you can localize strings in your templates, blocks, controllers, etc..."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also change the static files in a theme, like stylesheets, based on the language of the store."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can support different languages in both your theme or module. Translations are done through dictionaries that are CSV files. Magento also provides "},{"type":"element","tagName":"a","properties":{"href":"https://devdocs.magento.com/guides/v2.4/config-guide/cli/config-cli-subcommands-i18n.html"},"children":[{"type":"text","value":"tools that make creating dictionaries"}]},{"type":"text","value":" easier."}]},{"type":"element","tagName":"h3","properties":{"id":"ui-components"},"children":[{"type":"text","value":"UI Components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"UI Components were introduced in later versions of Magento 2. They allow you to create layouts and pages, mainly on the admin side, using UI components that allow for the data to be dynamic and for the loading or saving of the data to be asynchronous."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, Magento provides a large set of "},{"type":"element","tagName":"a","properties":{"href":"https://devdocs.magento.com/guides/v2.4/ui_comp_guide/bk-ui_comps.html"},"children":[{"type":"text","value":"UI components"}]},{"type":"text","value":" that you can use on any admin page at any given point. You can also create your own."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Through this brief overview, you can see a glimpse of what Magento 2's structure is like. It relies mainly on modules and themes, with necessary components, classes, functionalities, and more inside it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By understanding how Magneto's structure is like, you're able to start creating with Magento 2 the functionalities and modifications you need for your store."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"system-requirements","heading":"System Requirements"},{"id":"directory-structure-overview","heading":"Directory Structure Overview"},{"id":"areas","heading":"Areas"},{"id":"views","heading":"Views","items":[{"id":"layouts","heading":"Layouts"},{"id":"templates","heading":"Templates"},{"id":"static-files","heading":"Static Files"}]},{"id":"modules","heading":"Modules","items":[{"id":"database-tables","heading":"Database Tables"},{"id":"models","heading":"Models"},{"id":"plugins","heading":"Plugins"},{"id":"settings","heading":"Settings"},{"id":"controllers","heading":"Controllers"},{"id":"blocks","heading":"Blocks"},{"id":"view-files","heading":"View Files"},{"id":"cli-commands","heading":"CLI Commands"},{"id":"cron-jobs","heading":"Cron Jobs"},{"id":"observers","heading":"Observers"}]},{"id":"themes","heading":"Themes"},{"id":"internationalization","heading":"Internationalization","items":[{"id":"ui-components","heading":"UI Components"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"Beginner-s-Guide-to-Magento-2.png","publicURL":"/static/b795467fbda234a01c4a207f3b175c62/Beginner-s-Guide-to-Magento-2.png","imageMeta":{"width":1080,"height":1080},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAC0ElEQVQ4y5VUS08TYRSdtrzfUEBkC5HEpbpRxMSNdh5MZxj7YKooJiqCQR4h+ExMBDUYSiILBVcq2kCZTmdajXGnf+zo/Wam7RQwYXFyJ/e7OXPOvd93uRF1HQPyNrhIFiF+FwF+D1xkHxzvovKb/09eMBwQ4VllE+2aif6xDDrVLBqUPOqjZgkNiok62Yk1oznUyjk0j5VrGqJmmXhYSWNA/ojB6wZOporov/EDveMFtGgWuhI2TuhFNComWjULbdcshJMFdCcL6HEjEVNk6ojwlLyFOmEXLeI3lqyXTQQlw28r4rcVIIiG36qnsFnMoFPaQSsR8gbrJSnqSxXRFbcRJpVJG91xC51xm9kmtWSV/UioIiaSgLDP4B2GpBzrWTiWR1/qOzjtF7joTzSqFpqVHBqVPKvxEXnEHBGRMg8l+VlwV2yWW0wsYDE+7yi6ajtn/CHqmEKmzINTwNTyJobVDRRualjVp7Giz6B4S8NFNc3OnJoqMh8h7zWcvvOgYf2ZFCFrq+iRPqNX+oRR7RV+T0oYkrfA8Va5TX5Cf4IVRWym5Pn4LGYSy0in7iKduoPZxBIeJedwSV1nNcciJLsrzOo01vR7WEtN4bV+Hy/GH2CEbB+P0MIZZROPk3Osfy/1GYY3+hSWkgs4p7xjNUcT+prr9LNW2GNxOTmPnQkdOxMpPBl/yHJ17lnlIEtz8I2/ROxdJWeak7FnuB17Wpq+j6w0VDceUFhJzLvEkYID3ihflxKM8g/4Ksves+qI2SwS2mMWOjSTgZYDLQPKt4zl2QJpVXOocVsQErIVQ2EX2kBQNBCSnMcfdEEri54afVfmOTGHNimDsPQF7eJXDMkf3B5W97F6kUaOWrQGmoQMGyCRXVbf+hVWP3RSRVuFFoWDXHm1CQaz2iRmMChvgxb1eWXj4D08rAWeTYoBwXCvzi6zGhSyOB19zwgv/CP8CwD0JW+o1IY9AAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/b795467fbda234a01c4a207f3b175c62/60290/Beginner-s-Guide-to-Magento-2.png","srcSet":"/static/b795467fbda234a01c4a207f3b175c62/847ef/Beginner-s-Guide-to-Magento-2.png 175w,\n/static/b795467fbda234a01c4a207f3b175c62/91cba/Beginner-s-Guide-to-Magento-2.png 350w,\n/static/b795467fbda234a01c4a207f3b175c62/60290/Beginner-s-Guide-to-Magento-2.png 700w,\n/static/b795467fbda234a01c4a207f3b175c62/f5f50/Beginner-s-Guide-to-Magento-2.png 1050w,\n/static/b795467fbda234a01c4a207f3b175c62/14010/Beginner-s-Guide-to-Magento-2.png 1080w","srcWebp":"/static/b795467fbda234a01c4a207f3b175c62/89afa/Beginner-s-Guide-to-Magento-2.webp","srcSetWebp":"/static/b795467fbda234a01c4a207f3b175c62/9fca7/Beginner-s-Guide-to-Magento-2.webp 175w,\n/static/b795467fbda234a01c4a207f3b175c62/37a4e/Beginner-s-Guide-to-Magento-2.webp 350w,\n/static/b795467fbda234a01c4a207f3b175c62/89afa/Beginner-s-Guide-to-Magento-2.webp 700w,\n/static/b795467fbda234a01c4a207f3b175c62/78e7a/Beginner-s-Guide-to-Magento-2.webp 1050w,\n/static/b795467fbda234a01c4a207f3b175c62/788b4/Beginner-s-Guide-to-Magento-2.webp 1080w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__6127ba1b3ed159214d382eb5","title":"Adding an Image Uploader in an Admin Form in Magento 2","slug":"adding-an-image-uploader-in-an-admin-form-in-magento-2","featured":false,"feature_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg","excerpt":"In this tutorial, we'll see how to add an ImageUploader component to a form on the admin side that allows us to upload images.","custom_excerpt":"In this tutorial, we'll see how to add an ImageUploader component to a form on the admin side that allows us to upload images.","visibility":"public","created_at_pretty":"25 Jul 2021","published_at_pretty":"26 Jul 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-07-25T09:22:36.000+00:00","published_at":"2021-07-26T15:25:44.000+00:00","updated_at":"2021-08-26T17:33:58.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"1_ZxqU4dcMgnOkEe_YcZ01EQ.png","publicURL":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","imageMeta":{"width":2000,"height":1000},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVQoz2P4TwFgQDD//YMi/ACk4B82zX//IPHQAVabQaL/vn/5fXT9r/3L/314DTMem60/vv0+f+Dfp7cQNQwQ237uWfZjdd+PzTP+bJ119sLFXTt3Xr1y5d7du9evXb99+/bRw0euX7v26eu3/5/efV/W9WPjDJDmP3+gmn8d2fRtWsm3yQW/9iw7e+78po0bN2/aNHP6jEULFu7auXPdmrU7tm9/9uLl/18/vk0t/n3lGNjmv3A///t1bPOv3Uv//foJ9jsIPHv27MOHDxDpXz9//vv//+/jm99mVf65dQ7mbJQA+4vHw0REFUqkYAQyJEb+/cXQTHoiAQDMTzrKXUcJ/gAAAABJRU5ErkJggg==","aspectRatio":2,"src":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","srcSet":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/bcfcb/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/19d75/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/47b0f/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/71514/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 2000w","srcWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp","srcSetWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/dc8f3/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/2db4b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/f5845/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/49d6b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"php","url":"https://backend.shahednasser.com/tag/php/","name":"PHP","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"Admin forms in Magento 2 are built with UI Components. There are different types\nof UI Components that allow us to create many types of fields in forms. One of\nthem is the ImageUploader\n[https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/image-uploader/?itm_source=devdocs&itm_medium=quick_search&itm_campaign=federated_search&itm_term=imageuploade] \ncomponent.\n\nIn this tutorial, we'll see how to add an ImageUploader component to a form on\nthe admin side that allows us to upload images.\n\nPrerequisites \nIn this section we'll go over the basics of creating a module, adding a menu\nitem on the admin side, and creating a grid that shows the images we uploaded\nbefore we start working on our form. If you already know how to do all of that\nor you just need to see how to create a form with the ImageUploader component,\nyou can skip this section.\n\nCreate the Module\nWe'll quickly go over how to create a module in Magento 2. Create in app/code \nthe directories VENDOR/MODULE where VENDOR is your name or your company's name\nand MODULE is the name of the module. We'll name this module ImageUploader.\n\nMake sure to replace all instances of VENDOR with the vendor name you choose, as\nit will be in every code snippet throughout the tutorial.\n\nThen, inside ImageUploader create registration.php with the following content:\n\n<?php\n\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(ComponentRegistrar::MODULE, 'VENDOR_ImageUploader', __DIR__);\n\nCreate a directory called etc and inside it create module.xml with the following\ncontent:\n\n<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module/etc/module.xsd\">\n    <module name=\"VENDOR_ImageUploader\" setup_version=\"0.0.1\" />\n</config>\n\n\nThese are the only files required to create a module. Next, we'll need to create\nthe scripts to create a table in the database to store the path of the images\nwe'll upload. Create a directory called Setup inside ImageUploader, then create\nthe file InstallSchema.php with the following content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Setup;\n\nuse Magento\\Framework\\DB\\Ddl\\Table;\nuse Magento\\Framework\\Setup\\InstallSchemaInterface;\nuse Magento\\Framework\\Setup\\SchemaSetupInterface;\nuse Magento\\Framework\\Setup\\ModuleContextInterface;\n\nclass InstallSchema implements InstallSchemaInterface {\n\n  public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)\n  {\n    $setup->startSetup();\n\n    $imagesTableName = $setup->getTable('VENDOR_images');\n    if (!$setup->getConnection()->isTableExists($imagesTableName)) {\n      $imagesTable = $setup->getConnection()->newTable($imagesTableName)\n        ->addColumn(\n          'image_id',\n          Table::TYPE_INTEGER,\n          null,\n          [\n            Table::OPTION_IDENTITY => true,\n            Table::OPTION_PRIMARY => true,\n            Table::OPTION_UNSIGNED => true,\n            Table::OPTION_NULLABLE => false,\n          ],\n          'Image Id'\n        )\n        ->addColumn(\n          'path',\n          Table::TYPE_TEXT,\n          255,\n          [\n            Table::OPTION_NULLABLE => false\n          ],\n          'Image Path'\n        );\n\n        $setup->getConnection()->createTable($imagesTable);\n    }\n\n    $setup->endSetup();\n  }\n}\n\nMake sure to replace VENDOR in the table name with the name of your vendor.\n\nNow, we'll create the necessary models for our table. First, create the\ndirectories Api/Data under ImageUploader, and inside Data create the file \nImageInterface.php with the following content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Api\\Data;\n\ninterface ImageInterface {\n  const ID = 'image_id';\n  const PATH = 'path';\n\n  public function getPath ();\n\n  public function setPath ($value);\n}\n\nThen, create the directory Model under ImageUploader and inside it create \nImage.php with the following content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Model;\n\nuse Magento\\Framework\\DataObject\\IdentityInterface;\nuse Magento\\Framework\\Model\\AbstractModel;\nuse VENDORE\\ImageUploader\\Api\\Data\\ImageInterface;\nuse VENDORE\\ImageUploader\\Model\\ResourceModel\\Image as ResourceModelImage;\n\nclass Image extends AbstractModel implements ImageInterface, IdentityInterface {\n  const CACHE_TAG = 'VENDOR_images';\n\n  public function getIdentities()\n  {\n    return [\n      self::CACHE_TAG . '_' . $this->getId(),\n    ];\n  }\n\n  protected function _construct () {\n    $this->_init(ResourceModelImage::class);\n  }\n\n  public function getPath()\n  {\n    return $this->getData(self::PATH);\n  }\n\n  public function setPath($value)\n  {\n    return $this->setData(self::PATH, $value);\n  }\n}\n\nMake sure to replace all instances of VENDOR with your vendor name.\n\nUnder the directory Model create the directory ResourceModel. Under \nResourceModel create the file Image.php with the following content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Model\\ResourceModel;\n\nuse Magento\\Framework\\Model\\ResourceModel\\Db\\AbstractDb;\n\nclass Image extends AbstractDb {\n  protected function _construct () {\n    return $this->_init('VENDOR_images', 'image_id');\n  }\n}\n\nAgain, make sure to replace VENDOR with your vendor name.\n\nUnder the ResourceModel directory create a directory called Image, and under \nImage create Collection.php with the following content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Model\\ResourceModel\\Image;\n\nuse Magento\\Framework\\Model\\ResourceModel\\Db\\Collection\\AbstractCollection;\nuse VENDOR\\ImageUploader\\Model\\Image;\nuse VENDOR\\ImageUploader\\Model\\ResourceModel\\Image as ResourceModelImage;\n\nclass Collection extends AbstractCollection {\n  protected function _construct()\n  {\n    $this->_init(Image::class, ResourceModelImage::class);\n  }\n}\n\nFinally, create the file di.xml with the following content:\n\n<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager/etc/config.xsd\">\n  <preference for=\"VENDOR\\ImageUploader\\Api\\Data\\ImageInterface\" type=\"VENDOR\\ImageUploader\\Api\\Data\\Image\" />\n</config>\n\nNow, everything is ready for our models. To enable and compile our module, run\nthe following commands in the root of the Magento project:\n\nphp bin/magento setup:upgrade\nphp bin/magento setup:di:compile\n\nIf no errors occur, our module has been created successfully.\n\nAdd the Routes\nTo add routes to be able to access our module on the admin side, create under \netc the directory adminhtml, and inside adminhtml create routes.xml with the\nfollowing content:\n\n<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App/etc/routes.xsd\">\n    <router id=\"admin\">\n        <route id=\"imageuploader\" frontName=\"imageuploader\">\n            <module name=\"VENDOR_ImageUploader\" />\n        </route>\n    </router>\n</config>\n\n\nAdd a Menu Item on The Admin Side\nIn this section, we'll add a menu item to be able to access the page to upload\nimages. First, create under etc the file acl.xml with the following content:\n\n<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Acl/etc/acl.xsd\">\n    <acl>\n        <resources>\n            <resource id=\"Magento_Backend::admin\">\n              <resource id=\"VENDOR_ImageUploader::upload\" title=\"Upload Images\" translate=\"title\" sortOrder=\"30\" />\n            </resource>\n        </resources>\n    </acl>\n</config>\n\n\nThen, inside etc/adminhtml create menu.xml with the following content:\n\n<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Backend:etc/menu.xsd\">\n    <menu>\n        <add id=\"VENDOR_ImageUploader::images_uploader\" title=\"Image Uploader\" translate=\"title\" \n          module=\"VENDOR_ImageUploader\" sortOrder=\"20\" resource=\"VENDOR_ImageUploader::upload\" />\n        <add id=\"VENDOR_ImageUploader::images\" title=\"All Images\" translate=\"title\" \n          module=\"VENDOR_ImageUploader\" sortOrder=\"0\" parent=\"VENDOR_ImageUploader::images_uploader\"\n          action=\"imageuploader/images\" resource=\"VENDOR_ImageUploader::upload\" />\n    </menu>\n</config>\n\n\nThis will create a menu item called Image Uploader and when clicking on it the\nsubmenu will include the item All Images.\n\nNow, run the following command to compile the changes:\n\nphp bin/magento setup:di:compile\n\nGo to the admin side now and login. You'll see in the sidebar a new menu item\ncalled Image Uploader.\n\nCreate the Image Listing Page\nWe'll now create the page All Images lead to, which will be a grid of the images\nuploaded.\n\nCreate first the directories Controller\\Adminhtml\\Images under ImageUploader.\nThen, create the file Index.php with the following content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Controller\\Adminhtml\\Images;\n\nclass Index extends \\Magento\\Backend\\App\\Action {\n\n  /**\n   *\n   * @var \\Magento\\Framework\\View\\Result\\PageFactory\n   */\n  protected $resultPageFactory;\n\n  public function __construct(\n    \\Magento\\Backend\\App\\Action\\Context $context,\n    \\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory\n  )\n  {\n    parent::__construct($context);\n    $this->resultPageFactory = $resultPageFactory;\n  }\n\n  public function execute()\n  {\n    /** @var \\Magento\\Backend\\Model\\View\\Result\\Page $resultPage */\n    $resultPage = $this->resultPageFactory->create();\n    $resultPage->setActiveMenu('VENDOR_ImageUploader::images_uploader');\n    $resultPage->getConfig()->getTitle()->prepend(__('Images'));\n    return $resultPage;\n  }\n}\n\nThen, under ImageUploader create the directories view/adminhtml/layout and\ninside layout create imageuploader_images_index.xml with the following content:\n\n<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\">\n  <body>\n    <referenceContainer name=\"content\">\n      <uiComponent name=\"images_list\" />\n    </referenceContainer>\n  </body>\n</page>\n\nAfter that, create under view/adminhtml the directory ui_component, and inside\nthat directory create the file images_list.xml with the following content:\n\n<?xml version=\"1.0\"?>\n<listing xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc/ui_configuration.xsd\">\n    <argument name=\"data\" xsi:type=\"array\">\n        <item name=\"js_config\" xsi:type=\"array\">\n            <item name=\"provider\" xsi:type=\"string\">images_list.images_list_data_source</item>\n        </item>\n    </argument>\n    <settings>\n        <buttons>\n            <button name=\"upload\">\n                <url path=\"*/*/upload\"/>\n                <class>primary</class>\n                <label translate=\"true\">Upload Images</label>\n            </button>\n        </buttons>\n        <spinner>images_columns</spinner>\n        <deps>\n            <dep>images_list.images_list_data_source</dep>\n        </deps>\n    </settings>\n    <dataSource name=\"images_list_data_source\" component=\"Magento_Ui/js/grid/provider\">\n        <settings>\n            <storageConfig>\n                <param name=\"indexField\" xsi:type=\"string\">image_id</param>\n            </storageConfig>\n            <updateUrl path=\"mui/index/render\"/>\n        </settings>\n        <dataProvider class=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider\" name=\"images_list_data_source\">\n            <settings>\n                <requestFieldName>id</requestFieldName>\n                <primaryFieldName>image_id</primaryFieldName>\n            </settings>\n        </dataProvider>\n    </dataSource>\n    <columns name=\"images_columns\">\n      <column name=\"image_id\" sortOrder=\"10\">\n            <settings>\n                <filter>text</filter>\n                <dataType>text</dataType>\n                <label translate=\"true\">ID</label>\n            </settings>\n        </column>\n        <column name=\"path\" component=\"Magento_Ui/js/grid/columns/thumbnail\" class=\"VENDOR\\ImageUploader\\Ui\\Component\\Columns\\Thumbnail\">\n          <settings>\n              <hasPreview>0</hasPreview>\n              <addField>false</addField>\n              <label translate=\"true\">Thumbnail</label>\n              <sortable>false</sortable>\n          </settings>\n        </column>\n    </columns>\n</listing>\n\nThis will create a grid listing that will show the uploaded images. It will show\n2 columns, the ID and a thumbnail. To show the thumbnail, we need to create the\nclass for the UI Component. Create under ImageUploader the directories \nUi\\Component\\Columns, and inside Columns create the file Thumbnail.php with the\nfollowing content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Ui\\Component\\Columns;\n\nuse Magento\\Backend\\Model\\UrlInterface;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Magento\\Ui\\Component\\Listing\\Columns\\Column;\n\nclass Thumbnail extends Column {\n\n  /**\n   *\n   * @var StoreManagerInterface\n   */\n  protected $storeManagerInterface;\n\n  public function __construct(\n    ContextInterface $context,\n    UiComponentFactory $uiComponentFactory,\n    StoreManagerInterface $storeManagerInterface,\n    array $components = [],\n    array $data = []\n  ) {\n      parent::__construct($context, $uiComponentFactory, $components, $data);\n      $this->storeManagerInterface = $storeManagerInterface;\n  }\n\n  public function prepareDataSource(array $dataSource)\n  {\n    foreach($dataSource[\"data\"][\"items\"] as &$item) {\n      if (isset($item['path'])) {\n        $url = $this->storeManagerInterface->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . $item['path'];\n        $item['path_src'] = $url;\n        $item['path_alt'] = $item['image_id'];\n        $item['path_link'] = $url;\n        $item['path_orig_src'] = $url;\n      }\n    }\n\n    return $dataSource;\n  }\n}\n\nThis class will extend Magento\\Ui\\Component\\Listing\\Columns\\Column and override\nthe function prepareDataSource. In this function, we're making changes to the \npath column to show a thumbnail. To be able to show a thumbnail using the\ncomponent Magento_Ui/js/grid/columns/thumbnail, we need to add to each row in\nthe table the fields FIELD_src, FIELD_alt, FIELD_link and FIELD_orig_src, where \nFIELD is the name of the field of the thumbnail, in this case, it's path.\n\nFinally, add the following to etc/di.xml:\n\n<type name=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory\">\n        <arguments>\n            <argument name=\"collections\" xsi:type=\"array\">\n                <item name=\"images_list_data_source\" xsi:type=\"string\">\n                    VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\Grid\\Collection\n                </item>\n            </argument>\n        </arguments>\n    </type>\n    <virtualType name=\"VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\Grid\\Collection\"\n                 type=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\SearchResult\">\n        <arguments>\n            <argument name=\"mainTable\" xsi:type=\"string\">VENDOR_images</argument>\n            <argument name=\"resourceModel\" xsi:type=\"string\">VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\n            </argument>\n        </arguments>\n    </virtualType>\n\nOur image listing page is ready. We need to compile the changes first:\n\nphp bin/magento setup:di:compile\n\nThen, log in to the admin side again and click on ImageUploader -> All Images. A\npage with an empty table will show and a button to upload new images.\n\nNow, we're ready to create the form and add the ImageUploader component to it.\n\nCreate UI Form\nFirst, we'll need to create the controller that will handle the request. Create\nunder ImageUploader\\Controller\\Adminhtml\\Images the file Upload.php with the\nfollowing content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Controller\\Adminhtml\\Images;\n\nclass Upload extends \\Magento\\Backend\\App\\Action {\n\n  /**\n   *\n   * @var \\Magento\\Framework\\View\\Result\\PageFactory\n   */\n  protected $resultPageFactory;\n\n  public function __construct(\n    \\Magento\\Backend\\App\\Action\\Context $context,\n    \\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory\n  )\n  {\n    parent::__construct($context);\n    $this->resultPageFactory = $resultPageFactory;\n  }\n\n  public function execute()\n  {\n    /** @var \\Magento\\Backend\\Model\\View\\Result\\Page $resultPage */\n    $resultPage = $this->resultPageFactory->create();\n    $resultPage->setActiveMenu('VENDOR_ImageUploader::images_uploader');\n    $resultPage->getConfig()->getTitle()->prepend(__('Upload Image'));\n    return $resultPage;\n  }\n}\n\nLike Index.php, this one just shows the page. We'll need to create the layout\nfor this page. Create under view/adminhtml/layout the file \nimageuploader_images_upload.xml with the following content:\n\n<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\">\n  <body>\n    <referenceContainer name=\"content\">\n      <uiComponent name=\"images_form\" />\n    </referenceContainer>\n  </body>\n</page>\n\nThis is just showing a UI Component called images_form, which we'll create next.\nCreate under view/adminhtml/ui_component the file images_form.xml with the\nfollowing content:\n\n<?xml version=\"1.0\"?>\n<form xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc/ui_configuration.xsd\">\n    <argument name=\"data\" xsi:type=\"array\">\n        <item name=\"js_config\" xsi:type=\"array\">\n            <item name=\"provider\" xsi:type=\"string\">images_form.images_form_data_source</item>\n        </item>\n        <item name=\"label\" xsi:type=\"string\" translate=\"true\">Upload Images</item>\n        <item name=\"reverseMetadataMerge\" xsi:type=\"boolean\">true</item>\n        <item name=\"template\" xsi:type=\"string\">templates/form/collapsible</item>\n        <item name=\"config\" xsi:type=\"array\">\n            <item name=\"dataScope\" xsi:type=\"string\">data</item>\n            <item name=\"namespace\" xsi:type=\"string\">images_form</item>\n        </item>\n    </argument>\n    <settings>\n        <buttons>\n            <button name=\"save\" class=\"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\UploadButton\"/>\n            <button name=\"back\" class=\"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\BackButton\"/>\n        </buttons>\n        <deps>\n            <dep>images_form.images_form_data_source</dep>\n        </deps>\n    </settings>\n    <dataSource name=\"images_form_data_source\">\n        <argument name=\"dataProvider\" xsi:type=\"configurableObject\">\n            <argument name=\"name\" xsi:type=\"string\">images_form_data_source</argument>\n            <argument name=\"class\" xsi:type=\"string\">VENDOR\\ImageUploader\\Ui\\Component\\Form\\DataProvider</argument>\n            <argument name=\"primaryFieldName\" xsi:type=\"string\">image_id</argument>\n            <argument name=\"requestFieldName\" xsi:type=\"string\">id</argument>\n            <argument name=\"data\" xsi:type=\"array\">\n                <item name=\"config\" xsi:type=\"array\">\n                    <item name=\"submit_url\" xsi:type=\"url\" path=\"*/*/save\"/>\n                </item>\n            </argument>\n        </argument>\n        <argument name=\"data\" xsi:type=\"array\">\n            <item name=\"js_config\" xsi:type=\"array\">\n                <item name=\"component\" xsi:type=\"string\">Magento_Ui/js/form/provider</item>\n            </item>\n        </argument>\n    </dataSource>\n    <fieldset name=\"image\">\n      <settings>\n          <label translate=\"true\">Upload Images</label>\n      </settings>\n      <field name=\"image\" formElement=\"imageUploader\">\n        <settings>\n            <label translate=\"true\">Images</label>\n            <componentType>imageUploader</componentType>\n            <validation>\n                <rule name=\"required-entry\" xsi:type=\"boolean\">true</rule>\n            </validation>\n        </settings>\n        <formElements>\n            <imageUploader>\n                <settings>\n                    <allowedExtensions>jpg jpeg png</allowedExtensions>\n                    <maxFileSize>2097152</maxFileSize>\n                    <uploaderConfig>\n                        <param xsi:type=\"string\" name=\"url\">imageuploader/images/tempUpload</param>\n                    </uploaderConfig>\n                </settings>\n            </imageUploader>\n        </formElements>\n    </field>\n  </fieldset>\n</form>\n\nThis just creates the UI Form component. Before we dive into the components and\nclasses this form needs, let's look at the ImageUploader component:\n\n<field name=\"image\" formElement=\"imageUploader\">\n    <settings>\n        <label translate=\"true\">Images</label>\n        <componentType>imageUploader</componentType>\n        <validation>\n            <rule name=\"required-entry\" xsi:type=\"boolean\">true</rule>\n        </validation>\n    </settings>\n    <formElements>\n        <imageUploader>\n            <settings>\n                <allowedExtensions>jpg jpeg png</allowedExtensions>\n                <maxFileSize>2097152</maxFileSize>\n                <uploaderConfig>\n                    <param xsi:type=\"string\" name=\"url\">imageuploader/images/tempUpload</param>\n                </uploaderConfig>\n            </settings>\n        </imageUploader>\n    </formElements>\n</field>\n\nNotice that we've defined this field as an ImageUploader through \n<componentType>imageUploader</componentType>. We've also made this field\nrequired by adding <rule name=\"required-entry\" xsi:type=\"boolean\">true</rule> to \n<validation>. Then, inside <formElements>, we're adding a couple of settings for\nthe <imageUploader>. allowedExtensions allows us to specify the extensions\nallowed, which are in this case jpg, jpeg, and png. maxFileSize is the maximum\nsize allowed for the file being uploaded. and finally, the param url inside \nuploaderConfig is the url to send to the uploaded image for temporary upload.\nThis is used to show a preview of the image being uploaded.\n\nThis form component needs a few PHP Classes to be created to be able to function\ncorrectly.\n\nFirst, we've added 2 buttons, back and upload:\n\n<button name=\"save\" class=\"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\UploadButton\"/>\n            <button name=\"back\" class=\"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\BackButton\"/>\n\nSo, let's create the classes for them. Create first the directories \nBlock\\Adminhtml\\Form. Then, create under Form the file UploadButton.php with the\nfollowing content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Block\\Adminhtml\\Form;\n\nuse Magento\\Framework\\View\\Element\\UiComponent\\Control\\ButtonProviderInterface;\n\nclass UploadButton implements ButtonProviderInterface {\n  public function getButtonData()\n  {\n    return [\n      'label' => __('Upload'),\n      'class' => 'save primary',\n      'data_attribute' => [\n          'mage-init' => ['button' => ['event' => 'save']],\n          'form-role' => 'save',\n      ],\n      'sort_order' => 90,\n    ];\n  }\n}\n\nThis button just takes the user to the save path. The save path is defined in \nimages_form.xml in this line:\n\n<item name=\"submit_url\" xsi:type=\"url\" path=\"*/*/save\"/>\n\nAlso, create the file BackButton.php with the following content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Block\\Adminhtml\\Form;\n\nuse Magento\\Backend\\Model\\UrlInterface;\nuse Magento\\Framework\\View\\Element\\UiComponent\\Control\\ButtonProviderInterface;\n\nclass BackButton implements ButtonProviderInterface {\n\n  /** @var UrlInterface */\n  protected $urlInterface;\n\n  public function __construct(\n    UrlInterface $urlInterface\n  )\n  {\n    $this->urlInterface = $urlInterface;\n  }\n  \n    public function getButtonData()\n    {\n        return [\n            'label' => __('Back'),\n            'on_click' => sprintf(\"location.href = '%s';\", $this->getBackUrl()),\n            'class' => 'back',\n            'sort_order' => 10\n        ];\n    }\n    \n    public function getBackUrl()\n    {\n        return $this->urlInterface->getUrl('*/*/');\n    }\n}\n\nThis button just takes the user back to the index page, which is the page that\nhas the image listing.\n\nNext, we need to create the following classes that are defined in \nimages_form.xml:\n\n<argument name=\"class\" xsi:type=\"string\">VENDOR\\ImageUploader\\Ui\\Component\\Form\\DataProvider</argument>\n\n\nThis is the data provider class. Usually, this class is very important when the\nform has an edit functionality. This is where the data for the record being\nedited is filled to show in the form fields.\n\nCreate under the directory Ui\\Component\\Form the file DataProvider.php with the\nfollowing content:\n\n<?php \n\nnamespace VENDOR\\ImageUploader\\Ui\\Component\\Form;\n\nuse Magento\\Framework\\Registry;\n\nclass DataProvider extends \\Magento\\Ui\\DataProvider\\AbstractDataProvider {\n  public function __construct(\n    string $name,\n    string $primaryFieldName,\n    string $requestFieldName,\n    Registry $registry,\n    \\VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\CollectionFactory $imageCollectionFactory,\n    array $meta = [],\n    array $data = []\n  )\n  {\n      parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);\n      $this->registry = $registry;\n      $this->collection = $imageCollectionFactory->create();\n  }\n\n  public function getData()\n  {\n    return [];\n  }\n\n}\n\nThis just returns an empty array since we don't have the edit functionality in\nour form.\n\nFinally, we'll create the controller that's supposed to handle the temporary\nupload of the image to show it in the preview, which is at the URL \nimageuploader/images/tempUpload. So, create under Controller\\Adminhtml\\Images \nthe file TempUpload.php with the following content:\n\n<?php\n\nnamespace VENDOR\\ImageUploader\\Controller\\Adminhtml\\Images;\n\nuse Magento\\Backend\\App\\Action\\Context;\nuse Magento\\Backend\\Model\\UrlInterface;\nuse Magento\\Framework\\Controller\\ResultFactory;\nuse Magento\\Framework\\Exception\\LocalizedException;\nuse Magento\\Framework\\Filesystem;\nuse Magento\\MediaStorage\\Model\\File\\UploaderFactory;\nuse Magento\\Store\\Model\\StoreManagerInterface;\n\nclass TempUpload extends \\Magento\\Backend\\App\\Action {\n\n  /**\n   *\n   * @var UploaderFactory\n   */\n  protected $uploaderFactory;\n\n  /** \n   * @var Filesystem\\Directory\\WriteInterface \n   */\n  protected $mediaDirectory;\n  \n  /**\n   * @var StoreManagerInterface\n   */\n  protected $storeManager;\n\n  public function __construct(\n    Context $context,\n    UploaderFactory $uploaderFactory,\n    Filesystem $filesystem,\n    StoreManagerInterface $storeManager\n  )\n  {\n    parent::__construct($context);\n    $this->uploaderFactory = $uploaderFactory;\n    $this->mediaDirectory = $filesystem->getDirectoryWrite(\\Magento\\Framework\\App\\Filesystem\\DirectoryList::MEDIA);\n    $this->storeManager = $storeManager;\n  }\n\n  public function execute()\n  {\n    $jsonResult = $this->resultFactory->create(ResultFactory::TYPE_JSON);\n    try {\n        $fileUploader = $this->uploaderFactory->create(['fileId' => 'image']);\n        $fileUploader->setAllowedExtensions(['jpg', 'jpeg', 'png']);\n        $fileUploader->setAllowRenameFiles(true);\n        $fileUploader->setAllowCreateFolders(true);\n        $fileUploader->setFilesDispersion(false);\n        $fileUploader->validate();\n        $result = $fileUploader->save($this->mediaDirectory->getAbsolutePath('tmp/imageUploader/images'));\n        $result['url'] = $this->storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA)\n            . 'tmp/imageUploader/images/' . ltrim(str_replace('\\\\', '/', $result['file']), '/');\n        return $jsonResult->setData($result);\n    } catch (LocalizedException $e) {\n        return $jsonResult->setData(['errorcode' => 0, 'error' => $e->getMessage()]);\n    } catch (\\Exception $e) {\n        error_log($e->getMessage());\n        error_log($e->getTraceAsString());\n        return $jsonResult->setData(['errorcode' => 0, 'error' => __('An error occurred, please try again later.')]);\n    }\n  }\n}\n\nLet's dissect this to understand it better:\n\n 1. We're using uploaderFactory of type \n    Magento\\MediaStorage\\Model\\File\\UploaderFactory to first get the uploaded\n    image from the request. We pass it fileId with the value image, which is the\n    name of the field. If it was named something else like \"file\" then fileId \n    will be file.\n 2. We're specifying some rules for validation next. We're setting the allowed\n    extensions with setAllowedExtensions. We're also using setAllowRenameFiles \n    to allow renaming the file uploaded on upload, setAllowCreateFolders to\n    allow creating a folder if it doesn't exist, and setFilesDispersion to\n    disable files dispersion.\n 3. Then, we're saving the temporary file to tmp/imageUploader/images under the \n    media directory in pub.\n 4. Finally, we're sending back the URL for the uploaded file.\n\nUpload and Save Image\nThe last thing we need to implement is the Save controller. This controller will\nhandle the submission of the image to finally upload it and save it in our\ndatabase. To do that, create under Controller\\Adminhtml\\Images the file Save.php \nwith the following content:\n\n<?php\n\nnamespace VENDOR\\ImageUploader\\Controller\\Adminhtml\\Images;\n\nuse Magento\\Backend\\App\\Action\\Context;\nuse Magento\\Framework\\Exception\\LocalizedException;\nuse Magento\\Framework\\Filesystem;\nuse Magento\\Framework\\Validation\\ValidationException;\nuse Magento\\MediaStorage\\Model\\File\\UploaderFactory;\n\nclass Save extends \\Magento\\Backend\\App\\Action {\n  /**\n   *\n   * @var UploaderFactory\n   */\n  protected $uploaderFactory;\n\n  /**\n   * @var \\VENDOR\\ImageUploader\\Model\\ImageFactory\n   */\n  protected $imageFactory;\n\n  /** \n   * @var Filesystem\\Directory\\WriteInterface \n   */\n  protected $mediaDirectory;\n\n  public function __construct(\n    Context $context,\n    UploaderFactory $uploaderFactory,\n    Filesystem $filesystem,\n    \\VENDOR\\ImageUploader\\Model\\ImageFactory $imageFactory\n  )\n  {\n    parent::__construct($context);\n    $this->uploaderFactory = $uploaderFactory;\n    $this->imageFactory = $imageFactory;\n    $this->mediaDirectory = $filesystem->getDirectoryWrite(\\Magento\\Framework\\App\\Filesystem\\DirectoryList::MEDIA);\n  }\n\n  public function execute()\n  {\n    try {\n      if ($this->getRequest()->getMethod() !== 'POST' || !$this->_formKeyValidator->validate($this->getRequest())) {\n        throw new LocalizedException(__('Invalid Request'));\n    }\n\n    //validate image\n    $fileUploader = null;\n    $params = $this->getRequest()->getParams();\n    try {\n        $imageId = 'image';\n        if (isset($params['image']) && count($params['image'])) {\n            $imageId = $params['image'][0];\n            if (!file_exists($imageId['tmp_name'])) {\n                $imageId['tmp_name'] = $imageId['path'] . '/' . $imageId['file'];\n            }\n        }\n        $fileUploader = $this->uploaderFactory->create(['fileId' => $imageId]);\n        $fileUploader->setAllowedExtensions(['jpg', 'jpeg', 'png']);\n        $fileUploader->setAllowRenameFiles(true);\n        $fileUploader->setAllowCreateFolders(true);\n        $fileUploader->validateFile();\n        //upload image\n        $info = $fileUploader->save($this->mediaDirectory->getAbsolutePath('imageUploader/images'));\n        /** @var \\VENDOR\\ImageUploader\\Model\\Image */\n        $image = $this->imageFactory->create();\n        $image->setPath($this->mediaDirectory->getRelativePath('imageUploader/images') . '/' . $info['file']);\n        $image->save();\n    } catch (ValidationException $e) {\n      throw new LocalizedException(__('Image extension is not supported. Only extensions allowed are jpg, jpeg and png'));\n    } catch (\\Exception $e) {\n        //if an except is thrown, no image has been uploaded\n        throw new LocalizedException(__('Image is required'));\n    }\n\n    $this->messageManager->addSuccessMessage(__('Image uploaded successfully'));\n\n    return $this->_redirect('*/*/index');\n    } catch (LocalizedException $e) {\n      $this->messageManager->addErrorMessage($e->getMessage());\n      return $this->_redirect('*/*/upload');\n    } catch (\\Exception $e) {\n        error_log($e->getMessage());\n        error_log($e->getTraceAsString());\n        $this->messageManager->addErrorMessage(__('An error occurred, please try again later.'));\n        return $this->_redirect('*/*/upload');\n    }\n\n  }\n}\n\nThis one is pretty similar to TempUpload. Again, let's dissect it:\n\n 1. We're validating the request by checking that the method is POST and the\n    form key is valid.\n 2. We're getting the params that are passed to the request.\n 3. We're checking if $params['image'] is an image, then we're setting the \n    imageId to the first image. This is because the ImageUploader can accept\n    multiple images.\n 4. After that, we're doing the same steps that we did in TempUpload. We're\n    setting some options like the allowed extensions.\n 5. We're saving the file in imageUploader/images under the media directory in \n    pub.\n 6. We're creating a new instance of Image, which is the model for the table\n    that we created in this module, and we're setting the path to the path of\n    the image uploaded. After that, we're saving the model.\n 7. If no errors occur and everything works correctly, we're sending a success\n    message and redirecting back to the index page that shows the image listing.\n\nOur form, all its components, and controllers related to it are ready. We just\nneed to compile our code:\n\nphp bin/magento setup:di:compile\n\nAfter that is done, again, log in to the admin side of your store. Click on \nImageUploader -> All Images -> Upload Images. You'll see a form with an image\nuploader. Try uploading an image by clicking on Upload next to the Images field.\nThe image uploader field will upload the image using the route \nimageuploader/images/tempupload which will upload the image to \npub/media/tmp/imageuploader/images, then returns the URL. Then, the\nImageUploader field will show a preview of the file.\n\nClick on the orange button Upload at the top right corner. This will send the\nform data to the endpoint imageuploader/images/save. This one will save the\nimage under pub/media/imageuploader/images, then save the image with the path in\nthe table we created for the module. If everything is correct, you'll be\nredirected to the listing page and you'll see the image you just uploaded.\n\nConclusion\nThis is how an ImageUploader component works! Next, you can try adding delete\nfunctionalities. You can also try adding other fields to the form, if necessary.\nIt will work perfectly well.","html":"<p>Admin forms in Magento 2 are built with UI Components. There are different types of UI Components that allow us to create many types of fields in forms. One of them is the <a href=\"https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/image-uploader/?itm_source=devdocs&amp;itm_medium=quick_search&amp;itm_campaign=federated_search&amp;itm_term=imageuploade\">ImageUploader</a> component.</p><p>In this tutorial, we'll see how to add an ImageUploader component to a form on the admin side that allows us to upload images.</p><h2 id=\"prerequisites\">Prerequisites </h2><p>In this section we'll go over the basics of creating a module, adding a menu item on the admin side, and creating a grid that shows the images we uploaded before we start working on our form. If you already know how to do all of that or you just need to see how to create a form with the ImageUploader component, you can skip this section.</p><h3 id=\"create-the-module\">Create the Module</h3><p>We'll quickly go over how to create a module in Magento 2. Create in <code>app/code</code> the directories <code>VENDOR/MODULE</code> where <code>VENDOR</code> is your name or your company's name and <code>MODULE</code> is the name of the module. We'll name this module <code>ImageUploader</code>.</p><p>Make sure to replace all instances of <code>VENDOR</code> with the vendor name you choose, as it will be in every code snippet throughout the tutorial.</p><p>Then, inside <code>ImageUploader</code> create <code>registration.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php\n\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(ComponentRegistrar::MODULE, 'VENDOR_ImageUploader', __DIR__);</code></pre><p>Create a directory called <code>etc</code> and inside it create <code>module.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module/etc/module.xsd\"&gt;\n    &lt;module name=\"VENDOR_ImageUploader\" setup_version=\"0.0.1\" /&gt;\n&lt;/config&gt;\n</code></pre><p>These are the only files required to create a module. Next, we'll need to create the scripts to create a table in the database to store the path of the images we'll upload. Create a directory called <code>Setup</code> inside <code>ImageUploader</code>, then create the file <code>InstallSchema.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Setup;\n\nuse Magento\\Framework\\DB\\Ddl\\Table;\nuse Magento\\Framework\\Setup\\InstallSchemaInterface;\nuse Magento\\Framework\\Setup\\SchemaSetupInterface;\nuse Magento\\Framework\\Setup\\ModuleContextInterface;\n\nclass InstallSchema implements InstallSchemaInterface {\n\n  public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)\n  {\n    $setup-&gt;startSetup();\n\n    $imagesTableName = $setup-&gt;getTable('VENDOR_images');\n    if (!$setup-&gt;getConnection()-&gt;isTableExists($imagesTableName)) {\n      $imagesTable = $setup-&gt;getConnection()-&gt;newTable($imagesTableName)\n        -&gt;addColumn(\n          'image_id',\n          Table::TYPE_INTEGER,\n          null,\n          [\n            Table::OPTION_IDENTITY =&gt; true,\n            Table::OPTION_PRIMARY =&gt; true,\n            Table::OPTION_UNSIGNED =&gt; true,\n            Table::OPTION_NULLABLE =&gt; false,\n          ],\n          'Image Id'\n        )\n        -&gt;addColumn(\n          'path',\n          Table::TYPE_TEXT,\n          255,\n          [\n            Table::OPTION_NULLABLE =&gt; false\n          ],\n          'Image Path'\n        );\n\n        $setup-&gt;getConnection()-&gt;createTable($imagesTable);\n    }\n\n    $setup-&gt;endSetup();\n  }\n}</code></pre><p>Make sure to replace <code>VENDOR</code> in the table name with the name of your vendor.</p><p>Now, we'll create the necessary models for our table. First, create the directories <code>Api/Data</code> under <code>ImageUploader</code>, and inside <code>Data</code> create the file <code>ImageInterface.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Api\\Data;\n\ninterface ImageInterface {\n  const ID = 'image_id';\n  const PATH = 'path';\n\n  public function getPath ();\n\n  public function setPath ($value);\n}</code></pre><p>Then, create the directory <code>Model</code> under <code>ImageUploader</code> and inside it create <code>Image.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Model;\n\nuse Magento\\Framework\\DataObject\\IdentityInterface;\nuse Magento\\Framework\\Model\\AbstractModel;\nuse VENDORE\\ImageUploader\\Api\\Data\\ImageInterface;\nuse VENDORE\\ImageUploader\\Model\\ResourceModel\\Image as ResourceModelImage;\n\nclass Image extends AbstractModel implements ImageInterface, IdentityInterface {\n  const CACHE_TAG = 'VENDOR_images';\n\n  public function getIdentities()\n  {\n    return [\n      self::CACHE_TAG . '_' . $this-&gt;getId(),\n    ];\n  }\n\n  protected function _construct () {\n    $this-&gt;_init(ResourceModelImage::class);\n  }\n\n  public function getPath()\n  {\n    return $this-&gt;getData(self::PATH);\n  }\n\n  public function setPath($value)\n  {\n    return $this-&gt;setData(self::PATH, $value);\n  }\n}</code></pre><p>Make sure to replace all instances of <code>VENDOR</code> with your vendor name.</p><p>Under the directory <code>Model</code> create the directory <code>ResourceModel</code>. Under <code>ResourceModel</code> create the file <code>Image.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Model\\ResourceModel;\n\nuse Magento\\Framework\\Model\\ResourceModel\\Db\\AbstractDb;\n\nclass Image extends AbstractDb {\n  protected function _construct () {\n    return $this-&gt;_init('VENDOR_images', 'image_id');\n  }\n}</code></pre><p>Again, make sure to replace <code>VENDOR</code> with your vendor name.</p><p>Under the <code>ResourceModel</code> directory create a directory called <code>Image</code>, and under <code>Image</code> create <code>Collection.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Model\\ResourceModel\\Image;\n\nuse Magento\\Framework\\Model\\ResourceModel\\Db\\Collection\\AbstractCollection;\nuse VENDOR\\ImageUploader\\Model\\Image;\nuse VENDOR\\ImageUploader\\Model\\ResourceModel\\Image as ResourceModelImage;\n\nclass Collection extends AbstractCollection {\n  protected function _construct()\n  {\n    $this-&gt;_init(Image::class, ResourceModelImage::class);\n  }\n}</code></pre><p>Finally, create the file <code>di.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager/etc/config.xsd\"&gt;\n  &lt;preference for=\"VENDOR\\ImageUploader\\Api\\Data\\ImageInterface\" type=\"VENDOR\\ImageUploader\\Api\\Data\\Image\" /&gt;\n&lt;/config&gt;</code></pre><p>Now, everything is ready for our models. To enable and compile our module, run the following commands in the root of the Magento project:</p><pre><code class=\"language-php\">php bin/magento setup:upgrade\nphp bin/magento setup:di:compile</code></pre><p>If no errors occur, our module has been created successfully.</p><h3 id=\"add-the-routes\">Add the Routes</h3><p>To add routes to be able to access our module on the admin side, create under <code>etc</code> the directory <code>adminhtml</code>, and inside <code>adminhtml</code> create <code>routes.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App/etc/routes.xsd\"&gt;\n    &lt;router id=\"admin\"&gt;\n        &lt;route id=\"imageuploader\" frontName=\"imageuploader\"&gt;\n            &lt;module name=\"VENDOR_ImageUploader\" /&gt;\n        &lt;/route&gt;\n    &lt;/router&gt;\n&lt;/config&gt;\n</code></pre><h3 id=\"add-a-menu-item-on-the-admin-side\">Add a Menu Item on The Admin Side</h3><p>In this section, we'll add a menu item to be able to access the page to upload images. First, create under <code>etc</code> the file <code>acl.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Acl/etc/acl.xsd\"&gt;\n    &lt;acl&gt;\n        &lt;resources&gt;\n            &lt;resource id=\"Magento_Backend::admin\"&gt;\n              &lt;resource id=\"VENDOR_ImageUploader::upload\" title=\"Upload Images\" translate=\"title\" sortOrder=\"30\" /&gt;\n            &lt;/resource&gt;\n        &lt;/resources&gt;\n    &lt;/acl&gt;\n&lt;/config&gt;\n</code></pre><p>Then, inside <code>etc/adminhtml</code> create <code>menu.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;config xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Backend:etc/menu.xsd\"&gt;\n    &lt;menu&gt;\n        &lt;add id=\"VENDOR_ImageUploader::images_uploader\" title=\"Image Uploader\" translate=\"title\" \n          module=\"VENDOR_ImageUploader\" sortOrder=\"20\" resource=\"VENDOR_ImageUploader::upload\" /&gt;\n        &lt;add id=\"VENDOR_ImageUploader::images\" title=\"All Images\" translate=\"title\" \n          module=\"VENDOR_ImageUploader\" sortOrder=\"0\" parent=\"VENDOR_ImageUploader::images_uploader\"\n          action=\"imageuploader/images\" resource=\"VENDOR_ImageUploader::upload\" /&gt;\n    &lt;/menu&gt;\n&lt;/config&gt;\n</code></pre><p>This will create a menu item called <em>Image Uploader</em> and when clicking on it the submenu will include the item <em>All Images</em>.</p><p>Now, run the following command to compile the changes:</p><pre><code class=\"language-bash\">php bin/magento setup:di:compile</code></pre><p>Go to the admin side now and login. You'll see in the sidebar a new menu item called <em>Image Uploader.</em></p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-8.18.02-PM.png\" class=\"kg-image\" alt loading=\"lazy\" width=\"1034\" height=\"1636\"></figure><h3 id=\"create-the-image-listing-page\">Create the Image Listing Page</h3><p>We'll now create the page <em>All Images </em>lead to, which will be a grid of the images uploaded.</p><p>Create first the directories <code>Controller\\Adminhtml\\Images</code> under <code>ImageUploader</code>. Then, create the file <code>Index.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Controller\\Adminhtml\\Images;\n\nclass Index extends \\Magento\\Backend\\App\\Action {\n\n  /**\n   *\n   * @var \\Magento\\Framework\\View\\Result\\PageFactory\n   */\n  protected $resultPageFactory;\n\n  public function __construct(\n    \\Magento\\Backend\\App\\Action\\Context $context,\n    \\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory\n  )\n  {\n    parent::__construct($context);\n    $this-&gt;resultPageFactory = $resultPageFactory;\n  }\n\n  public function execute()\n  {\n    /** @var \\Magento\\Backend\\Model\\View\\Result\\Page $resultPage */\n    $resultPage = $this-&gt;resultPageFactory-&gt;create();\n    $resultPage-&gt;setActiveMenu('VENDOR_ImageUploader::images_uploader');\n    $resultPage-&gt;getConfig()-&gt;getTitle()-&gt;prepend(__('Images'));\n    return $resultPage;\n  }\n}</code></pre><p>Then, under <code>ImageUploader</code> create the directories <code>view/adminhtml/layout</code> and inside <code>layout</code> create <code>imageuploader_images_index.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\"&gt;\n  &lt;body&gt;\n    &lt;referenceContainer name=\"content\"&gt;\n      &lt;uiComponent name=\"images_list\" /&gt;\n    &lt;/referenceContainer&gt;\n  &lt;/body&gt;\n&lt;/page&gt;</code></pre><p>After that, create under <code>view/adminhtml</code> the directory <code>ui_component</code>, and inside that directory create the file <code>images_list.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;listing xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc/ui_configuration.xsd\"&gt;\n    &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n        &lt;item name=\"js_config\" xsi:type=\"array\"&gt;\n            &lt;item name=\"provider\" xsi:type=\"string\"&gt;images_list.images_list_data_source&lt;/item&gt;\n        &lt;/item&gt;\n    &lt;/argument&gt;\n    &lt;settings&gt;\n        &lt;buttons&gt;\n            &lt;button name=\"upload\"&gt;\n                &lt;url path=\"*/*/upload\"/&gt;\n                &lt;class&gt;primary&lt;/class&gt;\n                &lt;label translate=\"true\"&gt;Upload Images&lt;/label&gt;\n            &lt;/button&gt;\n        &lt;/buttons&gt;\n        &lt;spinner&gt;images_columns&lt;/spinner&gt;\n        &lt;deps&gt;\n            &lt;dep&gt;images_list.images_list_data_source&lt;/dep&gt;\n        &lt;/deps&gt;\n    &lt;/settings&gt;\n    &lt;dataSource name=\"images_list_data_source\" component=\"Magento_Ui/js/grid/provider\"&gt;\n        &lt;settings&gt;\n            &lt;storageConfig&gt;\n                &lt;param name=\"indexField\" xsi:type=\"string\"&gt;image_id&lt;/param&gt;\n            &lt;/storageConfig&gt;\n            &lt;updateUrl path=\"mui/index/render\"/&gt;\n        &lt;/settings&gt;\n        &lt;dataProvider class=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider\" name=\"images_list_data_source\"&gt;\n            &lt;settings&gt;\n                &lt;requestFieldName&gt;id&lt;/requestFieldName&gt;\n                &lt;primaryFieldName&gt;image_id&lt;/primaryFieldName&gt;\n            &lt;/settings&gt;\n        &lt;/dataProvider&gt;\n    &lt;/dataSource&gt;\n    &lt;columns name=\"images_columns\"&gt;\n      &lt;column name=\"image_id\" sortOrder=\"10\"&gt;\n            &lt;settings&gt;\n                &lt;filter&gt;text&lt;/filter&gt;\n                &lt;dataType&gt;text&lt;/dataType&gt;\n                &lt;label translate=\"true\"&gt;ID&lt;/label&gt;\n            &lt;/settings&gt;\n        &lt;/column&gt;\n        &lt;column name=\"path\" component=\"Magento_Ui/js/grid/columns/thumbnail\" class=\"VENDOR\\ImageUploader\\Ui\\Component\\Columns\\Thumbnail\"&gt;\n          &lt;settings&gt;\n              &lt;hasPreview&gt;0&lt;/hasPreview&gt;\n              &lt;addField&gt;false&lt;/addField&gt;\n              &lt;label translate=\"true\"&gt;Thumbnail&lt;/label&gt;\n              &lt;sortable&gt;false&lt;/sortable&gt;\n          &lt;/settings&gt;\n        &lt;/column&gt;\n    &lt;/columns&gt;\n&lt;/listing&gt;</code></pre><p>This will create a grid listing that will show the uploaded images. It will show 2 columns, the ID and a thumbnail. To show the thumbnail, we need to create the class for the UI Component. Create under <code>ImageUploader</code> the directories <code>Ui\\Component\\Columns</code>, and inside <code>Columns</code> create the file <code>Thumbnail.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Ui\\Component\\Columns;\n\nuse Magento\\Backend\\Model\\UrlInterface;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Magento\\Ui\\Component\\Listing\\Columns\\Column;\n\nclass Thumbnail extends Column {\n\n  /**\n   *\n   * @var StoreManagerInterface\n   */\n  protected $storeManagerInterface;\n\n  public function __construct(\n    ContextInterface $context,\n    UiComponentFactory $uiComponentFactory,\n    StoreManagerInterface $storeManagerInterface,\n    array $components = [],\n    array $data = []\n  ) {\n      parent::__construct($context, $uiComponentFactory, $components, $data);\n      $this-&gt;storeManagerInterface = $storeManagerInterface;\n  }\n\n  public function prepareDataSource(array $dataSource)\n  {\n    foreach($dataSource[\"data\"][\"items\"] as &amp;$item) {\n      if (isset($item['path'])) {\n        $url = $this-&gt;storeManagerInterface-&gt;getStore()-&gt;getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . $item['path'];\n        $item['path_src'] = $url;\n        $item['path_alt'] = $item['image_id'];\n        $item['path_link'] = $url;\n        $item['path_orig_src'] = $url;\n      }\n    }\n\n    return $dataSource;\n  }\n}</code></pre><p>This class will extend <code>Magento\\Ui\\Component\\Listing\\Columns\\Column</code> and override the function <code>prepareDataSource</code>. In this function, we're making changes to the <code>path</code> column to show a thumbnail. To be able to show a thumbnail using the component <code>Magento_Ui/js/grid/columns/thumbnail</code>, we need to add to each row in the table the fields <code>FIELD_src</code>, <code>FIELD_alt</code>, <code>FIELD_link</code> and <code>FIELD_orig_src</code>, where <code>FIELD</code> is the name of the field of the thumbnail, in this case, it's <code>path</code>.</p><p>Finally, add the following to <code>etc/di.xml</code>:</p><pre><code class=\"language-xml\">&lt;type name=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory\"&gt;\n        &lt;arguments&gt;\n            &lt;argument name=\"collections\" xsi:type=\"array\"&gt;\n                &lt;item name=\"images_list_data_source\" xsi:type=\"string\"&gt;\n                    VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\Grid\\Collection\n                &lt;/item&gt;\n            &lt;/argument&gt;\n        &lt;/arguments&gt;\n    &lt;/type&gt;\n    &lt;virtualType name=\"VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\Grid\\Collection\"\n                 type=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\SearchResult\"&gt;\n        &lt;arguments&gt;\n            &lt;argument name=\"mainTable\" xsi:type=\"string\"&gt;VENDOR_images&lt;/argument&gt;\n            &lt;argument name=\"resourceModel\" xsi:type=\"string\"&gt;VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\n            &lt;/argument&gt;\n        &lt;/arguments&gt;\n    &lt;/virtualType&gt;</code></pre><p>Our image listing page is ready. We need to compile the changes first:</p><pre><code class=\"language-bash\">php bin/magento setup:di:compile</code></pre><p>Then, log in to the admin side again and click on <em>ImageUploader -&gt; All Images. </em>A page with an empty table will show and a button to upload new images.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-8.47.27-PM.png\" class=\"kg-image\" alt loading=\"lazy\" width=\"2880\" height=\"1110\"></figure><p>Now, we're ready to create the form and add the ImageUploader component to it.</p><h2 id=\"create-ui-form\">Create UI Form</h2><p>First, we'll need to create the controller that will handle the request. Create under <code>ImageUploader\\Controller\\Adminhtml\\Images</code> the file <code>Upload.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Controller\\Adminhtml\\Images;\n\nclass Upload extends \\Magento\\Backend\\App\\Action {\n\n  /**\n   *\n   * @var \\Magento\\Framework\\View\\Result\\PageFactory\n   */\n  protected $resultPageFactory;\n\n  public function __construct(\n    \\Magento\\Backend\\App\\Action\\Context $context,\n    \\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory\n  )\n  {\n    parent::__construct($context);\n    $this-&gt;resultPageFactory = $resultPageFactory;\n  }\n\n  public function execute()\n  {\n    /** @var \\Magento\\Backend\\Model\\View\\Result\\Page $resultPage */\n    $resultPage = $this-&gt;resultPageFactory-&gt;create();\n    $resultPage-&gt;setActiveMenu('VENDOR_ImageUploader::images_uploader');\n    $resultPage-&gt;getConfig()-&gt;getTitle()-&gt;prepend(__('Upload Image'));\n    return $resultPage;\n  }\n}</code></pre><p>Like <code>Index.php</code>, this one just shows the page. We'll need to create the layout for this page. Create under <code>view/adminhtml/layout</code> the file <code>imageuploader_images_upload.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\"&gt;\n  &lt;body&gt;\n    &lt;referenceContainer name=\"content\"&gt;\n      &lt;uiComponent name=\"images_form\" /&gt;\n    &lt;/referenceContainer&gt;\n  &lt;/body&gt;\n&lt;/page&gt;</code></pre><p>This is just showing a UI Component called <code>images_form</code>, which we'll create next. Create under <code>view/adminhtml/ui_component</code> the file <code>images_form.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;form xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc/ui_configuration.xsd\"&gt;\n    &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n        &lt;item name=\"js_config\" xsi:type=\"array\"&gt;\n            &lt;item name=\"provider\" xsi:type=\"string\"&gt;images_form.images_form_data_source&lt;/item&gt;\n        &lt;/item&gt;\n        &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Upload Images&lt;/item&gt;\n        &lt;item name=\"reverseMetadataMerge\" xsi:type=\"boolean\"&gt;true&lt;/item&gt;\n        &lt;item name=\"template\" xsi:type=\"string\"&gt;templates/form/collapsible&lt;/item&gt;\n        &lt;item name=\"config\" xsi:type=\"array\"&gt;\n            &lt;item name=\"dataScope\" xsi:type=\"string\"&gt;data&lt;/item&gt;\n            &lt;item name=\"namespace\" xsi:type=\"string\"&gt;images_form&lt;/item&gt;\n        &lt;/item&gt;\n    &lt;/argument&gt;\n    &lt;settings&gt;\n        &lt;buttons&gt;\n            &lt;button name=\"save\" class=\"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\UploadButton\"/&gt;\n            &lt;button name=\"back\" class=\"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\BackButton\"/&gt;\n        &lt;/buttons&gt;\n        &lt;deps&gt;\n            &lt;dep&gt;images_form.images_form_data_source&lt;/dep&gt;\n        &lt;/deps&gt;\n    &lt;/settings&gt;\n    &lt;dataSource name=\"images_form_data_source\"&gt;\n        &lt;argument name=\"dataProvider\" xsi:type=\"configurableObject\"&gt;\n            &lt;argument name=\"name\" xsi:type=\"string\"&gt;images_form_data_source&lt;/argument&gt;\n            &lt;argument name=\"class\" xsi:type=\"string\"&gt;VENDOR\\ImageUploader\\Ui\\Component\\Form\\DataProvider&lt;/argument&gt;\n            &lt;argument name=\"primaryFieldName\" xsi:type=\"string\"&gt;image_id&lt;/argument&gt;\n            &lt;argument name=\"requestFieldName\" xsi:type=\"string\"&gt;id&lt;/argument&gt;\n            &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n                &lt;item name=\"config\" xsi:type=\"array\"&gt;\n                    &lt;item name=\"submit_url\" xsi:type=\"url\" path=\"*/*/save\"/&gt;\n                &lt;/item&gt;\n            &lt;/argument&gt;\n        &lt;/argument&gt;\n        &lt;argument name=\"data\" xsi:type=\"array\"&gt;\n            &lt;item name=\"js_config\" xsi:type=\"array\"&gt;\n                &lt;item name=\"component\" xsi:type=\"string\"&gt;Magento_Ui/js/form/provider&lt;/item&gt;\n            &lt;/item&gt;\n        &lt;/argument&gt;\n    &lt;/dataSource&gt;\n    &lt;fieldset name=\"image\"&gt;\n      &lt;settings&gt;\n          &lt;label translate=\"true\"&gt;Upload Images&lt;/label&gt;\n      &lt;/settings&gt;\n      &lt;field name=\"image\" formElement=\"imageUploader\"&gt;\n        &lt;settings&gt;\n            &lt;label translate=\"true\"&gt;Images&lt;/label&gt;\n            &lt;componentType&gt;imageUploader&lt;/componentType&gt;\n            &lt;validation&gt;\n                &lt;rule name=\"required-entry\" xsi:type=\"boolean\"&gt;true&lt;/rule&gt;\n            &lt;/validation&gt;\n        &lt;/settings&gt;\n        &lt;formElements&gt;\n            &lt;imageUploader&gt;\n                &lt;settings&gt;\n                    &lt;allowedExtensions&gt;jpg jpeg png&lt;/allowedExtensions&gt;\n                    &lt;maxFileSize&gt;2097152&lt;/maxFileSize&gt;\n                    &lt;uploaderConfig&gt;\n                        &lt;param xsi:type=\"string\" name=\"url\"&gt;imageuploader/images/tempUpload&lt;/param&gt;\n                    &lt;/uploaderConfig&gt;\n                &lt;/settings&gt;\n            &lt;/imageUploader&gt;\n        &lt;/formElements&gt;\n    &lt;/field&gt;\n  &lt;/fieldset&gt;\n&lt;/form&gt;</code></pre><p>This just creates the UI Form component. Before we dive into the components and classes this form needs, let's look at the ImageUploader component:</p><pre><code class=\"language-xml\">&lt;field name=\"image\" formElement=\"imageUploader\"&gt;\n    &lt;settings&gt;\n        &lt;label translate=\"true\"&gt;Images&lt;/label&gt;\n        &lt;componentType&gt;imageUploader&lt;/componentType&gt;\n        &lt;validation&gt;\n            &lt;rule name=\"required-entry\" xsi:type=\"boolean\"&gt;true&lt;/rule&gt;\n        &lt;/validation&gt;\n    &lt;/settings&gt;\n    &lt;formElements&gt;\n        &lt;imageUploader&gt;\n            &lt;settings&gt;\n                &lt;allowedExtensions&gt;jpg jpeg png&lt;/allowedExtensions&gt;\n                &lt;maxFileSize&gt;2097152&lt;/maxFileSize&gt;\n                &lt;uploaderConfig&gt;\n                    &lt;param xsi:type=\"string\" name=\"url\"&gt;imageuploader/images/tempUpload&lt;/param&gt;\n                &lt;/uploaderConfig&gt;\n            &lt;/settings&gt;\n        &lt;/imageUploader&gt;\n    &lt;/formElements&gt;\n&lt;/field&gt;</code></pre><p>Notice that we've defined this field as an ImageUploader through <code>&lt;componentType&gt;imageUploader&lt;/componentType&gt;</code>. We've also made this field required by adding <code>&lt;rule name=\"required-entry\" xsi:type=\"boolean\"&gt;true&lt;/rule&gt;</code> to <code>&lt;validation&gt;</code>. Then, inside <code>&lt;formElements&gt;</code>, we're adding a couple of settings for the <code>&lt;imageUploader&gt;</code>. <code>allowedExtensions</code> allows us to specify the extensions allowed, which are in this case <code>jpg</code>, <code>jpeg</code>, and <code>png</code>. <code>maxFileSize</code> is the maximum size allowed for the file being uploaded. and finally, the param <code>url</code> inside <code>uploaderConfig</code> is the <code>url</code> to send to the uploaded image for temporary upload. This is used to show a preview of the image being uploaded.</p><p>This form component needs a few PHP Classes to be created to be able to function correctly.</p><p>First, we've added 2 buttons, back and upload:</p><pre><code class=\"language-xml\">&lt;button name=\"save\" class=\"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\UploadButton\"/&gt;\n            &lt;button name=\"back\" class=\"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\BackButton\"/&gt;</code></pre><p>So, let's create the classes for them. Create first the directories <code>Block\\Adminhtml\\Form</code>. Then, create under <code>Form</code> the file <code>UploadButton.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Block\\Adminhtml\\Form;\n\nuse Magento\\Framework\\View\\Element\\UiComponent\\Control\\ButtonProviderInterface;\n\nclass UploadButton implements ButtonProviderInterface {\n  public function getButtonData()\n  {\n    return [\n      'label' =&gt; __('Upload'),\n      'class' =&gt; 'save primary',\n      'data_attribute' =&gt; [\n          'mage-init' =&gt; ['button' =&gt; ['event' =&gt; 'save']],\n          'form-role' =&gt; 'save',\n      ],\n      'sort_order' =&gt; 90,\n    ];\n  }\n}</code></pre><p>This button just takes the user to the save path. The save path is defined in <code>images_form.xml</code> in this line:</p><pre><code class=\"language-xml\">&lt;item name=\"submit_url\" xsi:type=\"url\" path=\"*/*/save\"/&gt;</code></pre><p>Also, create the file <code>BackButton.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Block\\Adminhtml\\Form;\n\nuse Magento\\Backend\\Model\\UrlInterface;\nuse Magento\\Framework\\View\\Element\\UiComponent\\Control\\ButtonProviderInterface;\n\nclass BackButton implements ButtonProviderInterface {\n\n  /** @var UrlInterface */\n  protected $urlInterface;\n\n  public function __construct(\n    UrlInterface $urlInterface\n  )\n  {\n    $this-&gt;urlInterface = $urlInterface;\n  }\n  \n    public function getButtonData()\n    {\n        return [\n            'label' =&gt; __('Back'),\n            'on_click' =&gt; sprintf(\"location.href = '%s';\", $this-&gt;getBackUrl()),\n            'class' =&gt; 'back',\n            'sort_order' =&gt; 10\n        ];\n    }\n    \n    public function getBackUrl()\n    {\n        return $this-&gt;urlInterface-&gt;getUrl('*/*/');\n    }\n}</code></pre><p>This button just takes the user back to the index page, which is the page that has the image listing.</p><p>Next, we need to create the following classes that are defined in <code>images_form.xml</code>:</p><pre><code class=\"language-xml\">&lt;argument name=\"class\" xsi:type=\"string\"&gt;VENDOR\\ImageUploader\\Ui\\Component\\Form\\DataProvider&lt;/argument&gt;\n</code></pre><p>This is the data provider class. Usually, this class is very important when the form has an edit functionality. This is where the data for the record being edited is filled to show in the form fields.</p><p>Create under the directory <code>Ui\\Component\\Form</code> the file <code>DataProvider.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php \n\nnamespace VENDOR\\ImageUploader\\Ui\\Component\\Form;\n\nuse Magento\\Framework\\Registry;\n\nclass DataProvider extends \\Magento\\Ui\\DataProvider\\AbstractDataProvider {\n  public function __construct(\n    string $name,\n    string $primaryFieldName,\n    string $requestFieldName,\n    Registry $registry,\n    \\VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\CollectionFactory $imageCollectionFactory,\n    array $meta = [],\n    array $data = []\n  )\n  {\n      parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);\n      $this-&gt;registry = $registry;\n      $this-&gt;collection = $imageCollectionFactory-&gt;create();\n  }\n\n  public function getData()\n  {\n    return [];\n  }\n\n}</code></pre><p>This just returns an empty array since we don't have the edit functionality in our form.</p><p>Finally, we'll create the controller that's supposed to handle the temporary upload of the image to show it in the preview, which is at the URL <code>imageuploader/images/tempUpload</code>. So, create under <code>Controller\\Adminhtml\\Images</code> the file <code>TempUpload.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php\n\nnamespace VENDOR\\ImageUploader\\Controller\\Adminhtml\\Images;\n\nuse Magento\\Backend\\App\\Action\\Context;\nuse Magento\\Backend\\Model\\UrlInterface;\nuse Magento\\Framework\\Controller\\ResultFactory;\nuse Magento\\Framework\\Exception\\LocalizedException;\nuse Magento\\Framework\\Filesystem;\nuse Magento\\MediaStorage\\Model\\File\\UploaderFactory;\nuse Magento\\Store\\Model\\StoreManagerInterface;\n\nclass TempUpload extends \\Magento\\Backend\\App\\Action {\n\n  /**\n   *\n   * @var UploaderFactory\n   */\n  protected $uploaderFactory;\n\n  /** \n   * @var Filesystem\\Directory\\WriteInterface \n   */\n  protected $mediaDirectory;\n  \n  /**\n   * @var StoreManagerInterface\n   */\n  protected $storeManager;\n\n  public function __construct(\n    Context $context,\n    UploaderFactory $uploaderFactory,\n    Filesystem $filesystem,\n    StoreManagerInterface $storeManager\n  )\n  {\n    parent::__construct($context);\n    $this-&gt;uploaderFactory = $uploaderFactory;\n    $this-&gt;mediaDirectory = $filesystem-&gt;getDirectoryWrite(\\Magento\\Framework\\App\\Filesystem\\DirectoryList::MEDIA);\n    $this-&gt;storeManager = $storeManager;\n  }\n\n  public function execute()\n  {\n    $jsonResult = $this-&gt;resultFactory-&gt;create(ResultFactory::TYPE_JSON);\n    try {\n        $fileUploader = $this-&gt;uploaderFactory-&gt;create(['fileId' =&gt; 'image']);\n        $fileUploader-&gt;setAllowedExtensions(['jpg', 'jpeg', 'png']);\n        $fileUploader-&gt;setAllowRenameFiles(true);\n        $fileUploader-&gt;setAllowCreateFolders(true);\n        $fileUploader-&gt;setFilesDispersion(false);\n        $fileUploader-&gt;validate();\n        $result = $fileUploader-&gt;save($this-&gt;mediaDirectory-&gt;getAbsolutePath('tmp/imageUploader/images'));\n        $result['url'] = $this-&gt;storeManager-&gt;getStore()-&gt;getBaseUrl(UrlInterface::URL_TYPE_MEDIA)\n            . 'tmp/imageUploader/images/' . ltrim(str_replace('\\\\', '/', $result['file']), '/');\n        return $jsonResult-&gt;setData($result);\n    } catch (LocalizedException $e) {\n        return $jsonResult-&gt;setData(['errorcode' =&gt; 0, 'error' =&gt; $e-&gt;getMessage()]);\n    } catch (\\Exception $e) {\n        error_log($e-&gt;getMessage());\n        error_log($e-&gt;getTraceAsString());\n        return $jsonResult-&gt;setData(['errorcode' =&gt; 0, 'error' =&gt; __('An error occurred, please try again later.')]);\n    }\n  }\n}</code></pre><p>Let's dissect this to understand it better:</p><ol><li>We're using <code>uploaderFactory</code> of type <code>Magento\\MediaStorage\\Model\\File\\UploaderFactory</code> to first get the uploaded image from the request. We pass it <code>fileId</code> with the value <code>image</code>, which is the name of the field. If it was named something else like \"file\" then <code>fileId</code> will be <code>file</code>.</li><li>We're specifying some rules for validation next. We're setting the allowed extensions with <code>setAllowedExtensions</code>. We're also using <code>setAllowRenameFiles</code> to allow renaming the file uploaded on upload, <code>setAllowCreateFolders</code> to allow creating a folder if it doesn't exist, and <code>setFilesDispersion</code> to disable files dispersion.</li><li>Then, we're saving the temporary file to <code>tmp/imageUploader/images</code> under the <code>media</code> directory in <code>pub</code>.</li><li>Finally, we're sending back the URL for the uploaded file.</li></ol><h2 id=\"upload-and-save-image\">Upload and Save Image</h2><p>The last thing we need to implement is the Save controller. This controller will handle the submission of the image to finally upload it and save it in our database. To do that, create under <code>Controller\\Adminhtml\\Images</code> the file <code>Save.php</code> with the following content:</p><pre><code class=\"language-php\">&lt;?php\n\nnamespace VENDOR\\ImageUploader\\Controller\\Adminhtml\\Images;\n\nuse Magento\\Backend\\App\\Action\\Context;\nuse Magento\\Framework\\Exception\\LocalizedException;\nuse Magento\\Framework\\Filesystem;\nuse Magento\\Framework\\Validation\\ValidationException;\nuse Magento\\MediaStorage\\Model\\File\\UploaderFactory;\n\nclass Save extends \\Magento\\Backend\\App\\Action {\n  /**\n   *\n   * @var UploaderFactory\n   */\n  protected $uploaderFactory;\n\n  /**\n   * @var \\VENDOR\\ImageUploader\\Model\\ImageFactory\n   */\n  protected $imageFactory;\n\n  /** \n   * @var Filesystem\\Directory\\WriteInterface \n   */\n  protected $mediaDirectory;\n\n  public function __construct(\n    Context $context,\n    UploaderFactory $uploaderFactory,\n    Filesystem $filesystem,\n    \\VENDOR\\ImageUploader\\Model\\ImageFactory $imageFactory\n  )\n  {\n    parent::__construct($context);\n    $this-&gt;uploaderFactory = $uploaderFactory;\n    $this-&gt;imageFactory = $imageFactory;\n    $this-&gt;mediaDirectory = $filesystem-&gt;getDirectoryWrite(\\Magento\\Framework\\App\\Filesystem\\DirectoryList::MEDIA);\n  }\n\n  public function execute()\n  {\n    try {\n      if ($this-&gt;getRequest()-&gt;getMethod() !== 'POST' || !$this-&gt;_formKeyValidator-&gt;validate($this-&gt;getRequest())) {\n        throw new LocalizedException(__('Invalid Request'));\n    }\n\n    //validate image\n    $fileUploader = null;\n    $params = $this-&gt;getRequest()-&gt;getParams();\n    try {\n        $imageId = 'image';\n        if (isset($params['image']) &amp;&amp; count($params['image'])) {\n            $imageId = $params['image'][0];\n            if (!file_exists($imageId['tmp_name'])) {\n                $imageId['tmp_name'] = $imageId['path'] . '/' . $imageId['file'];\n            }\n        }\n        $fileUploader = $this-&gt;uploaderFactory-&gt;create(['fileId' =&gt; $imageId]);\n        $fileUploader-&gt;setAllowedExtensions(['jpg', 'jpeg', 'png']);\n        $fileUploader-&gt;setAllowRenameFiles(true);\n        $fileUploader-&gt;setAllowCreateFolders(true);\n        $fileUploader-&gt;validateFile();\n        //upload image\n        $info = $fileUploader-&gt;save($this-&gt;mediaDirectory-&gt;getAbsolutePath('imageUploader/images'));\n        /** @var \\VENDOR\\ImageUploader\\Model\\Image */\n        $image = $this-&gt;imageFactory-&gt;create();\n        $image-&gt;setPath($this-&gt;mediaDirectory-&gt;getRelativePath('imageUploader/images') . '/' . $info['file']);\n        $image-&gt;save();\n    } catch (ValidationException $e) {\n      throw new LocalizedException(__('Image extension is not supported. Only extensions allowed are jpg, jpeg and png'));\n    } catch (\\Exception $e) {\n        //if an except is thrown, no image has been uploaded\n        throw new LocalizedException(__('Image is required'));\n    }\n\n    $this-&gt;messageManager-&gt;addSuccessMessage(__('Image uploaded successfully'));\n\n    return $this-&gt;_redirect('*/*/index');\n    } catch (LocalizedException $e) {\n      $this-&gt;messageManager-&gt;addErrorMessage($e-&gt;getMessage());\n      return $this-&gt;_redirect('*/*/upload');\n    } catch (\\Exception $e) {\n        error_log($e-&gt;getMessage());\n        error_log($e-&gt;getTraceAsString());\n        $this-&gt;messageManager-&gt;addErrorMessage(__('An error occurred, please try again later.'));\n        return $this-&gt;_redirect('*/*/upload');\n    }\n\n  }\n}</code></pre><p>This one is pretty similar to <code>TempUpload</code>. Again, let's dissect it:</p><ol><li>We're validating the request by checking that the method is <code>POST</code> and the form key is valid.</li><li>We're getting the params that are passed to the request.</li><li>We're checking if <code>$params['image']</code> is an image, then we're setting the <code>imageId</code> to the first image. This is because the <code>ImageUploader</code> can accept multiple images.</li><li>After that, we're doing the same steps that we did in <code>TempUpload</code>. We're setting some options like the allowed extensions.</li><li>We're saving the file in <code>imageUploader/images</code> under the <code>media</code> directory in <code>pub</code>.</li><li>We're creating a new instance of <code>Image</code>, which is the model for the table that we created in this module, and we're setting the path to the path of the image uploaded. After that, we're saving the model.</li><li>If no errors occur and everything works correctly, we're sending a success message and redirecting back to the index page that shows the image listing.</li></ol><p>Our form, all its components, and controllers related to it are ready. We just need to compile our code:</p><pre><code class=\"language-bash\">php bin/magento setup:di:compile</code></pre><p>After that is done, again, log in to the admin side of your store. Click on <em>ImageUploader -&gt; All Images -&gt; Upload Images. </em>You'll see a form with an image uploader. Try uploading an image by clicking on <em>Upload</em> next to the <em>Images </em>field. The image uploader field will upload the image using the route <code>imageuploader/images/tempupload</code> which will upload the image to <code>pub/media/tmp/imageuploader/images</code>, then returns the URL. Then, the ImageUploader field will show a preview of the file.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-9.09.27-PM.png\" class=\"kg-image\" alt loading=\"lazy\" width=\"2676\" height=\"1204\"></figure><p>Click on the orange button <em>Upload </em>at the top right corner. This will send the form data to the endpoint <code>imageuploader/images/save</code>. This one will save the image under <code>pub/media/imageuploader/images</code>, then save the image with the path in the table we created for the module. If everything is correct, you'll be redirected to the listing page and you'll see the image you just uploaded.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-9.26.34-PM.png\" class=\"kg-image\" alt loading=\"lazy\" width=\"2654\" height=\"732\"></figure><h2 id=\"conclusion\">Conclusion</h2><p>This is how an ImageUploader component works! Next, you can try adding delete functionalities. You can also try adding other fields to the form, if necessary. It will work perfectly well.</p>","url":"https://backend.shahednasser.com/adding-an-image-uploader-in-an-admin-form-in-magento-2/","canonical_url":null,"uuid":"d73553d3-7ab4-4540-89ff-d33144314b4a","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"60fd2d5cb8cdd9001c7e6601","reading_time":18,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>Admin forms in Magento 2 are built with UI Components. There are different types of UI Components that allow us to create many types of fields in forms. One of them is the <a href=\"https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/image-uploader/?itm_source=devdocs&#x26;itm_medium=quick_search&#x26;itm_campaign=federated_search&#x26;itm_term=imageuploade\">ImageUploader</a> component.</p><p>In this tutorial, we'll see how to add an ImageUploader component to a form on the admin side that allows us to upload images.</p><h2 id=\"prerequisites\">Prerequisites </h2><p>In this section we'll go over the basics of creating a module, adding a menu item on the admin side, and creating a grid that shows the images we uploaded before we start working on our form. If you already know how to do all of that or you just need to see how to create a form with the ImageUploader component, you can skip this section.</p><h3 id=\"create-the-module\">Create the Module</h3><p>We'll quickly go over how to create a module in Magento 2. Create in <code class=\"language-text\">app/code</code> the directories <code class=\"language-text\">VENDOR/MODULE</code> where <code class=\"language-text\">VENDOR</code> is your name or your company's name and <code class=\"language-text\">MODULE</code> is the name of the module. We'll name this module <code class=\"language-text\">ImageUploader</code>.</p><p>Make sure to replace all instances of <code class=\"language-text\">VENDOR</code> with the vendor name you choose, as it will be in every code snippet throughout the tutorial.</p><p>Then, inside <code class=\"language-text\">ImageUploader</code> create <code class=\"language-text\">registration.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Component<span class=\"token punctuation\">\\</span>ComponentRegistrar</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token class-name static-context\">ComponentRegistrar</span><span class=\"token operator\">::</span><span class=\"token function\">register</span><span class=\"token punctuation\">(</span><span class=\"token class-name static-context\">ComponentRegistrar</span><span class=\"token operator\">::</span><span class=\"token constant\">MODULE</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'VENDOR_ImageUploader'</span><span class=\"token punctuation\">,</span> <span class=\"token constant\">__DIR__</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></span></code></pre></div><p>Create a directory called <code class=\"language-text\">etc</code> and inside it create <code class=\"language-text\">module.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>config</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:Module/etc/module.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>module</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">setup_version</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>0.0.1<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>config</span><span class=\"token punctuation\">></span></span>\n</code></pre></div><p>These are the only files required to create a module. Next, we'll need to create the scripts to create a table in the database to store the path of the images we'll upload. Create a directory called <code class=\"language-text\">Setup</code> inside <code class=\"language-text\">ImageUploader</code>, then create the file <code class=\"language-text\">InstallSchema.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Setup</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>DB<span class=\"token punctuation\">\\</span>Ddl<span class=\"token punctuation\">\\</span>Table</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Setup<span class=\"token punctuation\">\\</span>InstallSchemaInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Setup<span class=\"token punctuation\">\\</span>SchemaSetupInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Setup<span class=\"token punctuation\">\\</span>ModuleContextInterface</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">InstallSchema</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">InstallSchemaInterface</span> <span class=\"token punctuation\">{</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">install</span><span class=\"token punctuation\">(</span><span class=\"token class-name type-declaration\">SchemaSetupInterface</span> <span class=\"token variable\">$setup</span><span class=\"token punctuation\">,</span> <span class=\"token class-name type-declaration\">ModuleContextInterface</span> <span class=\"token variable\">$context</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token variable\">$setup</span><span class=\"token operator\">-></span><span class=\"token function\">startSetup</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token variable\">$imagesTableName</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$setup</span><span class=\"token operator\">-></span><span class=\"token function\">getTable</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'VENDOR_images'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token variable\">$setup</span><span class=\"token operator\">-></span><span class=\"token function\">getConnection</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">isTableExists</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$imagesTableName</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token variable\">$imagesTable</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$setup</span><span class=\"token operator\">-></span><span class=\"token function\">getConnection</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">newTable</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$imagesTableName</span><span class=\"token punctuation\">)</span>\n        <span class=\"token operator\">-></span><span class=\"token function\">addColumn</span><span class=\"token punctuation\">(</span>\n          <span class=\"token string single-quoted-string\">'image_id'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token class-name static-context\">Table</span><span class=\"token operator\">::</span><span class=\"token constant\">TYPE_INTEGER</span><span class=\"token punctuation\">,</span>\n          <span class=\"token constant\">null</span><span class=\"token punctuation\">,</span>\n          <span class=\"token punctuation\">[</span>\n            <span class=\"token class-name static-context\">Table</span><span class=\"token operator\">::</span><span class=\"token constant\">OPTION_IDENTITY</span> <span class=\"token operator\">=></span> <span class=\"token constant boolean\">true</span><span class=\"token punctuation\">,</span>\n            <span class=\"token class-name static-context\">Table</span><span class=\"token operator\">::</span><span class=\"token constant\">OPTION_PRIMARY</span> <span class=\"token operator\">=></span> <span class=\"token constant boolean\">true</span><span class=\"token punctuation\">,</span>\n            <span class=\"token class-name static-context\">Table</span><span class=\"token operator\">::</span><span class=\"token constant\">OPTION_UNSIGNED</span> <span class=\"token operator\">=></span> <span class=\"token constant boolean\">true</span><span class=\"token punctuation\">,</span>\n            <span class=\"token class-name static-context\">Table</span><span class=\"token operator\">::</span><span class=\"token constant\">OPTION_NULLABLE</span> <span class=\"token operator\">=></span> <span class=\"token constant boolean\">false</span><span class=\"token punctuation\">,</span>\n          <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n          <span class=\"token string single-quoted-string\">'Image Id'</span>\n        <span class=\"token punctuation\">)</span>\n        <span class=\"token operator\">-></span><span class=\"token function\">addColumn</span><span class=\"token punctuation\">(</span>\n          <span class=\"token string single-quoted-string\">'path'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token class-name static-context\">Table</span><span class=\"token operator\">::</span><span class=\"token constant\">TYPE_TEXT</span><span class=\"token punctuation\">,</span>\n          <span class=\"token number\">255</span><span class=\"token punctuation\">,</span>\n          <span class=\"token punctuation\">[</span>\n            <span class=\"token class-name static-context\">Table</span><span class=\"token operator\">::</span><span class=\"token constant\">OPTION_NULLABLE</span> <span class=\"token operator\">=></span> <span class=\"token constant boolean\">false</span>\n          <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n          <span class=\"token string single-quoted-string\">'Image Path'</span>\n        <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        <span class=\"token variable\">$setup</span><span class=\"token operator\">-></span><span class=\"token function\">getConnection</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">createTable</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$imagesTable</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token variable\">$setup</span><span class=\"token operator\">-></span><span class=\"token function\">endSetup</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>Make sure to replace <code class=\"language-text\">VENDOR</code> in the table name with the name of your vendor.</p><p>Now, we'll create the necessary models for our table. First, create the directories <code class=\"language-text\">Api/Data</code> under <code class=\"language-text\">ImageUploader</code>, and inside <code class=\"language-text\">Data</code> create the file <code class=\"language-text\">ImageInterface.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Api<span class=\"token punctuation\">\\</span>Data</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">interface</span> <span class=\"token class-name-definition class-name\">ImageInterface</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token constant\">ID</span> <span class=\"token operator\">=</span> <span class=\"token string single-quoted-string\">'image_id'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> <span class=\"token constant\">PATH</span> <span class=\"token operator\">=</span> <span class=\"token string single-quoted-string\">'path'</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">getPath</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">setPath</span> <span class=\"token punctuation\">(</span><span class=\"token variable\">$value</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>Then, create the directory <code class=\"language-text\">Model</code> under <code class=\"language-text\">ImageUploader</code> and inside it create <code class=\"language-text\">Image.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Model</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>DataObject<span class=\"token punctuation\">\\</span>IdentityInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>AbstractModel</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">VENDORE<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Api<span class=\"token punctuation\">\\</span>Data<span class=\"token punctuation\">\\</span>ImageInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">VENDORE<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>ResourceModel<span class=\"token punctuation\">\\</span>Image</span> <span class=\"token keyword\">as</span> ResourceModelImage<span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">Image</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AbstractModel</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">ImageInterface</span><span class=\"token punctuation\">,</span> IdentityInterface <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token constant\">CACHE_TAG</span> <span class=\"token operator\">=</span> <span class=\"token string single-quoted-string\">'VENDOR_images'</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">getIdentities</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token keyword static-context\">self</span><span class=\"token operator\">::</span><span class=\"token constant\">CACHE_TAG</span> <span class=\"token operator\">.</span> <span class=\"token string single-quoted-string\">'_'</span> <span class=\"token operator\">.</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">protected</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">_construct</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">_init</span><span class=\"token punctuation\">(</span><span class=\"token class-name static-context\">ResourceModelImage</span><span class=\"token operator\">::</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">getPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">getData</span><span class=\"token punctuation\">(</span><span class=\"token keyword static-context\">self</span><span class=\"token operator\">::</span><span class=\"token constant\">PATH</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">setPath</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$value</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">setData</span><span class=\"token punctuation\">(</span><span class=\"token keyword static-context\">self</span><span class=\"token operator\">::</span><span class=\"token constant\">PATH</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$value</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>Make sure to replace all instances of <code class=\"language-text\">VENDOR</code> with your vendor name.</p><p>Under the directory <code class=\"language-text\">Model</code> create the directory <code class=\"language-text\">ResourceModel</code>. Under <code class=\"language-text\">ResourceModel</code> create the file <code class=\"language-text\">Image.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>ResourceModel</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>ResourceModel<span class=\"token punctuation\">\\</span>Db<span class=\"token punctuation\">\\</span>AbstractDb</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">Image</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AbstractDb</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">_construct</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">_init</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'VENDOR_images'</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'image_id'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>Again, make sure to replace <code class=\"language-text\">VENDOR</code> with your vendor name.</p><p>Under the <code class=\"language-text\">ResourceModel</code> directory create a directory called <code class=\"language-text\">Image</code>, and under <code class=\"language-text\">Image</code> create <code class=\"language-text\">Collection.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>ResourceModel<span class=\"token punctuation\">\\</span>Image</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>ResourceModel<span class=\"token punctuation\">\\</span>Db<span class=\"token punctuation\">\\</span>Collection<span class=\"token punctuation\">\\</span>AbstractCollection</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>Image</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>ResourceModel<span class=\"token punctuation\">\\</span>Image</span> <span class=\"token keyword\">as</span> ResourceModelImage<span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">Collection</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AbstractCollection</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">_construct</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">_init</span><span class=\"token punctuation\">(</span><span class=\"token class-name static-context\">Image</span><span class=\"token operator\">::</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">,</span> <span class=\"token class-name static-context\">ResourceModelImage</span><span class=\"token operator\">::</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>Finally, create the file <code class=\"language-text\">di.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>config</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:ObjectManager/etc/config.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>preference</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR\\ImageUploader\\Api\\Data\\ImageInterface<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR\\ImageUploader\\Api\\Data\\Image<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>config</span><span class=\"token punctuation\">></span></span></code></pre></div><p>Now, everything is ready for our models. To enable and compile our module, run the following commands in the root of the Magento project:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\">php bin<span class=\"token operator\">/</span>magento setup<span class=\"token punctuation\">:</span>upgrade\nphp bin<span class=\"token operator\">/</span>magento setup<span class=\"token punctuation\">:</span>di<span class=\"token punctuation\">:</span>compile</code></pre></div><p>If no errors occur, our module has been created successfully.</p><h3 id=\"add-the-routes\">Add the Routes</h3><p>To add routes to be able to access our module on the admin side, create under <code class=\"language-text\">etc</code> the directory <code class=\"language-text\">adminhtml</code>, and inside <code class=\"language-text\">adminhtml</code> create <code class=\"language-text\">routes.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>config</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:App/etc/routes.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>router</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>admin<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>route</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>imageuploader<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">frontName</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>imageuploader<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>module</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>route</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>router</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>config</span><span class=\"token punctuation\">></span></span>\n</code></pre></div><h3 id=\"add-a-menu-item-on-the-admin-side\">Add a Menu Item on The Admin Side</h3><p>In this section, we'll add a menu item to be able to access the page to upload images. First, create under <code class=\"language-text\">etc</code> the file <code class=\"language-text\">acl.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>config</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:Acl/etc/acl.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>acl</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>resources</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>resource</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento_Backend::admin<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n              <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>resource</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader::upload<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">title</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Upload Images<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>title<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">sortOrder</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>30<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>resource</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>resources</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>acl</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>config</span><span class=\"token punctuation\">></span></span>\n</code></pre></div><p>Then, inside <code class=\"language-text\">etc/adminhtml</code> create <code class=\"language-text\">menu.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>config</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:module:Magento_Backend:etc/menu.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>menu</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>add</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader::images_uploader<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">title</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Image Uploader<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>title<span class=\"token punctuation\">\"</span></span> \n          <span class=\"token attr-name\">module</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">sortOrder</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>20<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">resource</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader::upload<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>add</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader::images<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">title</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>All Images<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>title<span class=\"token punctuation\">\"</span></span> \n          <span class=\"token attr-name\">module</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">sortOrder</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>0<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">parent</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader::images_uploader<span class=\"token punctuation\">\"</span></span>\n          <span class=\"token attr-name\">action</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>imageuploader/images<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">resource</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR_ImageUploader::upload<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>menu</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>config</span><span class=\"token punctuation\">></span></span>\n</code></pre></div><p>This will create a menu item called <em>Image Uploader</em> and when clicking on it the submenu will include the item <em>All Images</em>.</p><p>Now, run the following command to compile the changes:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">php bin/magento setup:di:compile</code></pre></div><p>Go to the admin side now and login. You'll see in the sidebar a new menu item called <em>Image Uploader.</em></p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-8.18.02-PM.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\" width=\"1034\" height=\"1636\"></figure><h3 id=\"create-the-image-listing-page\">Create the Image Listing Page</h3><p>We'll now create the page <em>All Images </em>lead to, which will be a grid of the images uploaded.</p><p>Create first the directories <code class=\"language-text\">Controller\\Adminhtml\\Images</code> under <code class=\"language-text\">ImageUploader</code>. Then, create the file <code class=\"language-text\">Index.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Controller<span class=\"token punctuation\">\\</span>Adminhtml<span class=\"token punctuation\">\\</span>Images</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">Index</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name class-name-fully-qualified\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Action</span> <span class=\"token punctuation\">{</span>\n\n  <span class=\"token comment\">/**\n   *\n   * @var \\Magento\\Framework\\View\\Result\\PageFactory\n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$resultPageFactory</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">__construct</span><span class=\"token punctuation\">(</span>\n    <span class=\"token class-name class-name-fully-qualified type-declaration\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Action<span class=\"token punctuation\">\\</span>Context</span> <span class=\"token variable\">$context</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name class-name-fully-qualified type-declaration\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>View<span class=\"token punctuation\">\\</span>Result<span class=\"token punctuation\">\\</span>PageFactory</span> <span class=\"token variable\">$resultPageFactory</span>\n  <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword static-context\">parent</span><span class=\"token operator\">::</span><span class=\"token function\">__construct</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$context</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">resultPageFactory</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$resultPageFactory</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">execute</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">/** @var \\Magento\\Backend\\Model\\View\\Result\\Page $resultPage */</span>\n    <span class=\"token variable\">$resultPage</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">resultPageFactory</span><span class=\"token operator\">-></span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$resultPage</span><span class=\"token operator\">-></span><span class=\"token function\">setActiveMenu</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'VENDOR_ImageUploader::images_uploader'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$resultPage</span><span class=\"token operator\">-></span><span class=\"token function\">getConfig</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">getTitle</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">prepend</span><span class=\"token punctuation\">(</span><span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'Images'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">return</span> <span class=\"token variable\">$resultPage</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>Then, under <code class=\"language-text\">ImageUploader</code> create the directories <code class=\"language-text\">view/adminhtml/layout</code> and inside <code class=\"language-text\">layout</code> create <code class=\"language-text\">imageuploader_images_index.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>page</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:View/Layout/etc/page_configuration.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>body</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceContainer</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>content<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>uiComponent</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>images_list<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>referenceContainer</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>page</span><span class=\"token punctuation\">></span></span></code></pre></div><p>After that, create under <code class=\"language-text\">view/adminhtml</code> the directory <code class=\"language-text\">ui_component</code>, and inside that directory create the file <code class=\"language-text\">images_list.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>listing</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:module:Magento_Ui:etc/ui_configuration.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>data<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>js_config<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>provider<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>images_list.images_list_data_source<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>buttons</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>button</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>upload<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>url</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>*/*/upload<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>class</span><span class=\"token punctuation\">></span></span>primary<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>class</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>label</span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Upload Images<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>label</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>button</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>buttons</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>spinner</span><span class=\"token punctuation\">></span></span>images_columns<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>spinner</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>deps</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>dep</span><span class=\"token punctuation\">></span></span>images_list.images_list_data_source<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>dep</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>deps</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>dataSource</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>images_list_data_source<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">component</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento_Ui/js/grid/provider<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>storageConfig</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>param</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>indexField<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>image_id<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>param</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>storageConfig</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>updateUrl</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>mui/index/render<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>dataProvider</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>images_list_data_source<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>requestFieldName</span><span class=\"token punctuation\">></span></span>id<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>requestFieldName</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>primaryFieldName</span><span class=\"token punctuation\">></span></span>image_id<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>primaryFieldName</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>dataProvider</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>dataSource</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>columns</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>images_columns<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>column</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>image_id<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">sortOrder</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>10<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>filter</span><span class=\"token punctuation\">></span></span>text<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>filter</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>dataType</span><span class=\"token punctuation\">></span></span>text<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>dataType</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>label</span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>ID<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>label</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>column</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>column</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>path<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">component</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento_Ui/js/grid/columns/thumbnail<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR\\ImageUploader\\Ui\\Component\\Columns\\Thumbnail<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n              <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>hasPreview</span><span class=\"token punctuation\">></span></span>0<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>hasPreview</span><span class=\"token punctuation\">></span></span>\n              <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>addField</span><span class=\"token punctuation\">></span></span>false<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>addField</span><span class=\"token punctuation\">></span></span>\n              <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>label</span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Thumbnail<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>label</span><span class=\"token punctuation\">></span></span>\n              <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>sortable</span><span class=\"token punctuation\">></span></span>false<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>sortable</span><span class=\"token punctuation\">></span></span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>column</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>columns</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>listing</span><span class=\"token punctuation\">></span></span></code></pre></div><p>This will create a grid listing that will show the uploaded images. It will show 2 columns, the ID and a thumbnail. To show the thumbnail, we need to create the class for the UI Component. Create under <code class=\"language-text\">ImageUploader</code> the directories <code class=\"language-text\">Ui\\Component\\Columns</code>, and inside <code class=\"language-text\">Columns</code> create the file <code class=\"language-text\">Thumbnail.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Ui<span class=\"token punctuation\">\\</span>Component<span class=\"token punctuation\">\\</span>Columns</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>UrlInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>View<span class=\"token punctuation\">\\</span>Element<span class=\"token punctuation\">\\</span>UiComponent<span class=\"token punctuation\">\\</span>ContextInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>View<span class=\"token punctuation\">\\</span>Element<span class=\"token punctuation\">\\</span>UiComponentFactory</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Store<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>StoreManagerInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Ui<span class=\"token punctuation\">\\</span>Component<span class=\"token punctuation\">\\</span>Listing<span class=\"token punctuation\">\\</span>Columns<span class=\"token punctuation\">\\</span>Column</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">Thumbnail</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">Column</span> <span class=\"token punctuation\">{</span>\n\n  <span class=\"token comment\">/**\n   *\n   * @var StoreManagerInterface\n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$storeManagerInterface</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">__construct</span><span class=\"token punctuation\">(</span>\n    <span class=\"token class-name type-declaration\">ContextInterface</span> <span class=\"token variable\">$context</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name type-declaration\">UiComponentFactory</span> <span class=\"token variable\">$uiComponentFactory</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name type-declaration\">StoreManagerInterface</span> <span class=\"token variable\">$storeManagerInterface</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword type-hint\">array</span> <span class=\"token variable\">$components</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword type-hint\">array</span> <span class=\"token variable\">$data</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword static-context\">parent</span><span class=\"token operator\">::</span><span class=\"token function\">__construct</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$context</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$uiComponentFactory</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$components</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$data</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">storeManagerInterface</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$storeManagerInterface</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">prepareDataSource</span><span class=\"token punctuation\">(</span><span class=\"token keyword type-hint\">array</span> <span class=\"token variable\">$dataSource</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">foreach</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$dataSource</span><span class=\"token punctuation\">[</span><span class=\"token string double-quoted-string\">\"data\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token string double-quoted-string\">\"items\"</span><span class=\"token punctuation\">]</span> <span class=\"token keyword\">as</span> <span class=\"token operator\">&#x26;</span><span class=\"token variable\">$item</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">isset</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$item</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'path'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token variable\">$url</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">storeManagerInterface</span><span class=\"token operator\">-></span><span class=\"token function\">getStore</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">getBaseUrl</span><span class=\"token punctuation\">(</span><span class=\"token class-name static-context\">UrlInterface</span><span class=\"token operator\">::</span><span class=\"token constant\">URL_TYPE_MEDIA</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">.</span> <span class=\"token variable\">$item</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'path'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$item</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'path_src'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$url</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$item</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'path_alt'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$item</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'image_id'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$item</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'path_link'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$url</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$item</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'path_orig_src'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$url</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">return</span> <span class=\"token variable\">$dataSource</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>This class will extend <code class=\"language-text\">Magento\\Ui\\Component\\Listing\\Columns\\Column</code> and override the function <code class=\"language-text\">prepareDataSource</code>. In this function, we're making changes to the <code class=\"language-text\">path</code> column to show a thumbnail. To be able to show a thumbnail using the component <code class=\"language-text\">Magento_Ui/js/grid/columns/thumbnail</code>, we need to add to each row in the table the fields <code class=\"language-text\">FIELD_src</code>, <code class=\"language-text\">FIELD_alt</code>, <code class=\"language-text\">FIELD_link</code> and <code class=\"language-text\">FIELD_orig_src</code>, where <code class=\"language-text\">FIELD</code> is the name of the field of the thumbnail, in this case, it's <code class=\"language-text\">path</code>.</p><p>Finally, add the following to <code class=\"language-text\">etc/di.xml</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>type</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>arguments</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>collections<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>images_list_data_source<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n                    VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\Grid\\Collection\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>arguments</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>type</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>virtualType</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\Grid\\Collection<span class=\"token punctuation\">\"</span></span>\n                 <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\SearchResult<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>arguments</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>mainTable<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>VENDOR_images<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>resourceModel<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>arguments</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>virtualType</span><span class=\"token punctuation\">></span></span></code></pre></div><p>Our image listing page is ready. We need to compile the changes first:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">php bin/magento setup:di:compile</code></pre></div><p>Then, log in to the admin side again and click on <em>ImageUploader -> All Images. </em>A page with an empty table will show and a button to upload new images.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-8.47.27-PM.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\" width=\"2880\" height=\"1110\"></figure><p>Now, we're ready to create the form and add the ImageUploader component to it.</p><h2 id=\"create-ui-form\">Create UI Form</h2><p>First, we'll need to create the controller that will handle the request. Create under <code class=\"language-text\">ImageUploader\\Controller\\Adminhtml\\Images</code> the file <code class=\"language-text\">Upload.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Controller<span class=\"token punctuation\">\\</span>Adminhtml<span class=\"token punctuation\">\\</span>Images</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">Upload</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name class-name-fully-qualified\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Action</span> <span class=\"token punctuation\">{</span>\n\n  <span class=\"token comment\">/**\n   *\n   * @var \\Magento\\Framework\\View\\Result\\PageFactory\n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$resultPageFactory</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">__construct</span><span class=\"token punctuation\">(</span>\n    <span class=\"token class-name class-name-fully-qualified type-declaration\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Action<span class=\"token punctuation\">\\</span>Context</span> <span class=\"token variable\">$context</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name class-name-fully-qualified type-declaration\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>View<span class=\"token punctuation\">\\</span>Result<span class=\"token punctuation\">\\</span>PageFactory</span> <span class=\"token variable\">$resultPageFactory</span>\n  <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword static-context\">parent</span><span class=\"token operator\">::</span><span class=\"token function\">__construct</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$context</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">resultPageFactory</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$resultPageFactory</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">execute</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">/** @var \\Magento\\Backend\\Model\\View\\Result\\Page $resultPage */</span>\n    <span class=\"token variable\">$resultPage</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">resultPageFactory</span><span class=\"token operator\">-></span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$resultPage</span><span class=\"token operator\">-></span><span class=\"token function\">setActiveMenu</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'VENDOR_ImageUploader::images_uploader'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$resultPage</span><span class=\"token operator\">-></span><span class=\"token function\">getConfig</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">getTitle</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">prepend</span><span class=\"token punctuation\">(</span><span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'Upload Image'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">return</span> <span class=\"token variable\">$resultPage</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>Like <code class=\"language-text\">Index.php</code>, this one just shows the page. We'll need to create the layout for this page. Create under <code class=\"language-text\">view/adminhtml/layout</code> the file <code class=\"language-text\">imageuploader_images_upload.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>page</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:View/Layout/etc/page_configuration.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>body</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceContainer</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>content<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>uiComponent</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>images_form<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>referenceContainer</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>page</span><span class=\"token punctuation\">></span></span></code></pre></div><p>This is just showing a UI Component called <code class=\"language-text\">images_form</code>, which we'll create next. Create under <code class=\"language-text\">view/adminhtml/ui_component</code> the file <code class=\"language-text\">images_form.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>form</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:module:Magento_Ui:etc/ui_configuration.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>data<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>js_config<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>provider<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>images_form.images_form_data_source<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>label<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Upload Images<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>reverseMetadataMerge<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>boolean<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>true<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>template<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>templates/form/collapsible<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>config<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>dataScope<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>data<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>namespace<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>images_form<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>buttons</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>button</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>save<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\UploadButton<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>button</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>back<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\BackButton<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>buttons</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>deps</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>dep</span><span class=\"token punctuation\">></span></span>images_form.images_form_data_source<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>dep</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>deps</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>dataSource</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>images_form_data_source<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>dataProvider<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>configurableObject<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>name<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>images_form_data_source<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>class<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>VENDOR\\ImageUploader\\Ui\\Component\\Form\\DataProvider<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>primaryFieldName<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>image_id<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>requestFieldName<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>id<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>data<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>config<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>submit_url<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>url<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>*/*/save<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>data<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>js_config<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>array<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>component<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Magento_Ui/js/form/provider<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>item</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>dataSource</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>fieldset</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>image<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n          <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>label</span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Upload Images<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>label</span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>field</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>image<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">formElement</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>imageUploader<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>label</span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Images<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>label</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>componentType</span><span class=\"token punctuation\">></span></span>imageUploader<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>componentType</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>validation</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>rule</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>required-entry<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>boolean<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>true<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>rule</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>validation</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>formElements</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>imageUploader</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>allowedExtensions</span><span class=\"token punctuation\">></span></span>jpg jpeg png<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>allowedExtensions</span><span class=\"token punctuation\">></span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>maxFileSize</span><span class=\"token punctuation\">></span></span>2097152<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>maxFileSize</span><span class=\"token punctuation\">></span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>uploaderConfig</span><span class=\"token punctuation\">></span></span>\n                        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>param</span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>url<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>imageuploader/images/tempUpload<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>param</span><span class=\"token punctuation\">></span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>uploaderConfig</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>imageUploader</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>formElements</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>field</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>fieldset</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>form</span><span class=\"token punctuation\">></span></span></code></pre></div><p>This just creates the UI Form component. Before we dive into the components and classes this form needs, let's look at the ImageUploader component:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>field</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>image<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">formElement</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>imageUploader<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>label</span> <span class=\"token attr-name\">translate</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>true<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Images<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>label</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>componentType</span><span class=\"token punctuation\">></span></span>imageUploader<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>componentType</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>validation</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>rule</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>required-entry<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>boolean<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>true<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>rule</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>validation</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>formElements</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>imageUploader</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>settings</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>allowedExtensions</span><span class=\"token punctuation\">></span></span>jpg jpeg png<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>allowedExtensions</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>maxFileSize</span><span class=\"token punctuation\">></span></span>2097152<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>maxFileSize</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>uploaderConfig</span><span class=\"token punctuation\">></span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>param</span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>url<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>imageuploader/images/tempUpload<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>param</span><span class=\"token punctuation\">></span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>uploaderConfig</span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>settings</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>imageUploader</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>formElements</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>field</span><span class=\"token punctuation\">></span></span></code></pre></div><p>Notice that we've defined this field as an ImageUploader through <code class=\"language-text\">&#x3C;componentType>imageUploader&#x3C;/componentType></code>. We've also made this field required by adding <code class=\"language-text\">&#x3C;rule name=\"required-entry\" xsi:type=\"boolean\">true&#x3C;/rule></code> to <code class=\"language-text\">&#x3C;validation></code>. Then, inside <code class=\"language-text\">&#x3C;formElements></code>, we're adding a couple of settings for the <code class=\"language-text\">&#x3C;imageUploader></code>. <code class=\"language-text\">allowedExtensions</code> allows us to specify the extensions allowed, which are in this case <code class=\"language-text\">jpg</code>, <code class=\"language-text\">jpeg</code>, and <code class=\"language-text\">png</code>. <code class=\"language-text\">maxFileSize</code> is the maximum size allowed for the file being uploaded. and finally, the param <code class=\"language-text\">url</code> inside <code class=\"language-text\">uploaderConfig</code> is the <code class=\"language-text\">url</code> to send to the uploaded image for temporary upload. This is used to show a preview of the image being uploaded.</p><p>This form component needs a few PHP Classes to be created to be able to function correctly.</p><p>First, we've added 2 buttons, back and upload:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>button</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>save<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\UploadButton<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>button</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>back<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\BackButton<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span></code></pre></div><p>So, let's create the classes for them. Create first the directories <code class=\"language-text\">Block\\Adminhtml\\Form</code>. Then, create under <code class=\"language-text\">Form</code> the file <code class=\"language-text\">UploadButton.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Block<span class=\"token punctuation\">\\</span>Adminhtml<span class=\"token punctuation\">\\</span>Form</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>View<span class=\"token punctuation\">\\</span>Element<span class=\"token punctuation\">\\</span>UiComponent<span class=\"token punctuation\">\\</span>Control<span class=\"token punctuation\">\\</span>ButtonProviderInterface</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">UploadButton</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">ButtonProviderInterface</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">getButtonData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token string single-quoted-string\">'label'</span> <span class=\"token operator\">=></span> <span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'Upload'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string single-quoted-string\">'class'</span> <span class=\"token operator\">=></span> <span class=\"token string single-quoted-string\">'save primary'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string single-quoted-string\">'data_attribute'</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span>\n          <span class=\"token string single-quoted-string\">'mage-init'</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'button'</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'event'</span> <span class=\"token operator\">=></span> <span class=\"token string single-quoted-string\">'save'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n          <span class=\"token string single-quoted-string\">'form-role'</span> <span class=\"token operator\">=></span> <span class=\"token string single-quoted-string\">'save'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string single-quoted-string\">'sort_order'</span> <span class=\"token operator\">=></span> <span class=\"token number\">90</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>This button just takes the user to the save path. The save path is defined in <code class=\"language-text\">images_form.xml</code> in this line:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>item</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>submit_url<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>url<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>*/*/save<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">/></span></span></code></pre></div><p>Also, create the file <code class=\"language-text\">BackButton.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Block<span class=\"token punctuation\">\\</span>Adminhtml<span class=\"token punctuation\">\\</span>Form</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>UrlInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>View<span class=\"token punctuation\">\\</span>Element<span class=\"token punctuation\">\\</span>UiComponent<span class=\"token punctuation\">\\</span>Control<span class=\"token punctuation\">\\</span>ButtonProviderInterface</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">BackButton</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">ButtonProviderInterface</span> <span class=\"token punctuation\">{</span>\n\n  <span class=\"token comment\">/** @var UrlInterface */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$urlInterface</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">__construct</span><span class=\"token punctuation\">(</span>\n    <span class=\"token class-name type-declaration\">UrlInterface</span> <span class=\"token variable\">$urlInterface</span>\n  <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">urlInterface</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$urlInterface</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  \n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">getButtonData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>\n            <span class=\"token string single-quoted-string\">'label'</span> <span class=\"token operator\">=></span> <span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'Back'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string single-quoted-string\">'on_click'</span> <span class=\"token operator\">=></span> <span class=\"token function\">sprintf</span><span class=\"token punctuation\">(</span><span class=\"token string double-quoted-string\">\"location.href = '%s';\"</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">getBackUrl</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string single-quoted-string\">'class'</span> <span class=\"token operator\">=></span> <span class=\"token string single-quoted-string\">'back'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string single-quoted-string\">'sort_order'</span> <span class=\"token operator\">=></span> <span class=\"token number\">10</span>\n        <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n    \n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">getBackUrl</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">urlInterface</span><span class=\"token operator\">-></span><span class=\"token function\">getUrl</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'*/*/'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>This button just takes the user back to the index page, which is the page that has the image listing.</p><p>Next, we need to create the following classes that are defined in <code class=\"language-text\">images_form.xml</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>argument</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>class<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>string<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>VENDOR\\ImageUploader\\Ui\\Component\\Form\\DataProvider<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>argument</span><span class=\"token punctuation\">></span></span>\n</code></pre></div><p>This is the data provider class. Usually, this class is very important when the form has an edit functionality. This is where the data for the record being edited is filled to show in the form fields.</p><p>Create under the directory <code class=\"language-text\">Ui\\Component\\Form</code> the file <code class=\"language-text\">DataProvider.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span> \n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Ui<span class=\"token punctuation\">\\</span>Component<span class=\"token punctuation\">\\</span>Form</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Registry</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">DataProvider</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name class-name-fully-qualified\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Ui<span class=\"token punctuation\">\\</span>DataProvider<span class=\"token punctuation\">\\</span>AbstractDataProvider</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">__construct</span><span class=\"token punctuation\">(</span>\n    <span class=\"token keyword type-hint\">string</span> <span class=\"token variable\">$name</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword type-hint\">string</span> <span class=\"token variable\">$primaryFieldName</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword type-hint\">string</span> <span class=\"token variable\">$requestFieldName</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name type-declaration\">Registry</span> <span class=\"token variable\">$registry</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name class-name-fully-qualified type-declaration\"><span class=\"token punctuation\">\\</span>VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>ResourceModel<span class=\"token punctuation\">\\</span>Image<span class=\"token punctuation\">\\</span>CollectionFactory</span> <span class=\"token variable\">$imageCollectionFactory</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword type-hint\">array</span> <span class=\"token variable\">$meta</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword type-hint\">array</span> <span class=\"token variable\">$data</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword static-context\">parent</span><span class=\"token operator\">::</span><span class=\"token function\">__construct</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$name</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$primaryFieldName</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$requestFieldName</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$meta</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$data</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">registry</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$registry</span><span class=\"token punctuation\">;</span>\n      <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">collection</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$imageCollectionFactory</span><span class=\"token operator\">-></span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">getData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>This just returns an empty array since we don't have the edit functionality in our form.</p><p>Finally, we'll create the controller that's supposed to handle the temporary upload of the image to show it in the preview, which is at the URL <code class=\"language-text\">imageuploader/images/tempUpload</code>. So, create under <code class=\"language-text\">Controller\\Adminhtml\\Images</code> the file <code class=\"language-text\">TempUpload.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span>\n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Controller<span class=\"token punctuation\">\\</span>Adminhtml<span class=\"token punctuation\">\\</span>Images</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Action<span class=\"token punctuation\">\\</span>Context</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>UrlInterface</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Controller<span class=\"token punctuation\">\\</span>ResultFactory</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Exception<span class=\"token punctuation\">\\</span>LocalizedException</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Filesystem</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>MediaStorage<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>File<span class=\"token punctuation\">\\</span>UploaderFactory</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Store<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>StoreManagerInterface</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">TempUpload</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name class-name-fully-qualified\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Action</span> <span class=\"token punctuation\">{</span>\n\n  <span class=\"token comment\">/**\n   *\n   * @var UploaderFactory\n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$uploaderFactory</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">/** \n   * @var Filesystem\\Directory\\WriteInterface \n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$mediaDirectory</span><span class=\"token punctuation\">;</span>\n  \n  <span class=\"token comment\">/**\n   * @var StoreManagerInterface\n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$storeManager</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">__construct</span><span class=\"token punctuation\">(</span>\n    <span class=\"token class-name type-declaration\">Context</span> <span class=\"token variable\">$context</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name type-declaration\">UploaderFactory</span> <span class=\"token variable\">$uploaderFactory</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name type-declaration\">Filesystem</span> <span class=\"token variable\">$filesystem</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name type-declaration\">StoreManagerInterface</span> <span class=\"token variable\">$storeManager</span>\n  <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword static-context\">parent</span><span class=\"token operator\">::</span><span class=\"token function\">__construct</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$context</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">uploaderFactory</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$uploaderFactory</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">mediaDirectory</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$filesystem</span><span class=\"token operator\">-></span><span class=\"token function\">getDirectoryWrite</span><span class=\"token punctuation\">(</span><span class=\"token class-name class-name-fully-qualified static-context\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Filesystem<span class=\"token punctuation\">\\</span>DirectoryList</span><span class=\"token operator\">::</span><span class=\"token constant\">MEDIA</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">storeManager</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$storeManager</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">execute</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token variable\">$jsonResult</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">resultFactory</span><span class=\"token operator\">-></span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token class-name static-context\">ResultFactory</span><span class=\"token operator\">::</span><span class=\"token constant\">TYPE_JSON</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">try</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token variable\">$fileUploader</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">uploaderFactory</span><span class=\"token operator\">-></span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'fileId'</span> <span class=\"token operator\">=></span> <span class=\"token string single-quoted-string\">'image'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">setAllowedExtensions</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'jpg'</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'jpeg'</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'png'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">setAllowRenameFiles</span><span class=\"token punctuation\">(</span><span class=\"token constant boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">setAllowCreateFolders</span><span class=\"token punctuation\">(</span><span class=\"token constant boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">setFilesDispersion</span><span class=\"token punctuation\">(</span><span class=\"token constant boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">validate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$result</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">save</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">mediaDirectory</span><span class=\"token operator\">-></span><span class=\"token function\">getAbsolutePath</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'tmp/imageUploader/images'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$result</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'url'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">storeManager</span><span class=\"token operator\">-></span><span class=\"token function\">getStore</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">getBaseUrl</span><span class=\"token punctuation\">(</span><span class=\"token class-name static-context\">UrlInterface</span><span class=\"token operator\">::</span><span class=\"token constant\">URL_TYPE_MEDIA</span><span class=\"token punctuation\">)</span>\n            <span class=\"token operator\">.</span> <span class=\"token string single-quoted-string\">'tmp/imageUploader/images/'</span> <span class=\"token operator\">.</span> <span class=\"token function\">ltrim</span><span class=\"token punctuation\">(</span><span class=\"token function\">str_replace</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'\\\\'</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'/'</span><span class=\"token punctuation\">,</span> <span class=\"token variable\">$result</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'file'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'/'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">return</span> <span class=\"token variable\">$jsonResult</span><span class=\"token operator\">-></span><span class=\"token function\">setData</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$result</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">LocalizedException</span> <span class=\"token variable\">$e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token variable\">$jsonResult</span><span class=\"token operator\">-></span><span class=\"token function\">setData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'errorcode'</span> <span class=\"token operator\">=></span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'error'</span> <span class=\"token operator\">=></span> <span class=\"token variable\">$e</span><span class=\"token operator\">-></span><span class=\"token function\">getMessage</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span><span class=\"token class-name class-name-fully-qualified\"><span class=\"token punctuation\">\\</span>Exception</span> <span class=\"token variable\">$e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">error_log</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$e</span><span class=\"token operator\">-></span><span class=\"token function\">getMessage</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">error_log</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$e</span><span class=\"token operator\">-></span><span class=\"token function\">getTraceAsString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">return</span> <span class=\"token variable\">$jsonResult</span><span class=\"token operator\">-></span><span class=\"token function\">setData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'errorcode'</span> <span class=\"token operator\">=></span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'error'</span> <span class=\"token operator\">=></span> <span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'An error occurred, please try again later.'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>Let's dissect this to understand it better:</p><ol><li>We're using <code class=\"language-text\">uploaderFactory</code> of type <code class=\"language-text\">Magento\\MediaStorage\\Model\\File\\UploaderFactory</code> to first get the uploaded image from the request. We pass it <code class=\"language-text\">fileId</code> with the value <code class=\"language-text\">image</code>, which is the name of the field. If it was named something else like \"file\" then <code class=\"language-text\">fileId</code> will be <code class=\"language-text\">file</code>.</li><li>We're specifying some rules for validation next. We're setting the allowed extensions with <code class=\"language-text\">setAllowedExtensions</code>. We're also using <code class=\"language-text\">setAllowRenameFiles</code> to allow renaming the file uploaded on upload, <code class=\"language-text\">setAllowCreateFolders</code> to allow creating a folder if it doesn't exist, and <code class=\"language-text\">setFilesDispersion</code> to disable files dispersion.</li><li>Then, we're saving the temporary file to <code class=\"language-text\">tmp/imageUploader/images</code> under the <code class=\"language-text\">media</code> directory in <code class=\"language-text\">pub</code>.</li><li>Finally, we're sending back the URL for the uploaded file.</li></ol><h2 id=\"upload-and-save-image\">Upload and Save Image</h2><p>The last thing we need to implement is the Save controller. This controller will handle the submission of the image to finally upload it and save it in our database. To do that, create under <code class=\"language-text\">Controller\\Adminhtml\\Images</code> the file <code class=\"language-text\">Save.php</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span>\n\n<span class=\"token keyword\">namespace</span> <span class=\"token package\">VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Controller<span class=\"token punctuation\">\\</span>Adminhtml<span class=\"token punctuation\">\\</span>Images</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Action<span class=\"token punctuation\">\\</span>Context</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Exception<span class=\"token punctuation\">\\</span>LocalizedException</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Filesystem</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Validation<span class=\"token punctuation\">\\</span>ValidationException</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>MediaStorage<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>File<span class=\"token punctuation\">\\</span>UploaderFactory</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name-definition class-name\">Save</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name class-name-fully-qualified\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Backend<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Action</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">/**\n   *\n   * @var UploaderFactory\n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$uploaderFactory</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">/**\n   * @var \\VENDOR\\ImageUploader\\Model\\ImageFactory\n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$imageFactory</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">/** \n   * @var Filesystem\\Directory\\WriteInterface \n   */</span>\n  <span class=\"token keyword\">protected</span> <span class=\"token variable\">$mediaDirectory</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">__construct</span><span class=\"token punctuation\">(</span>\n    <span class=\"token class-name type-declaration\">Context</span> <span class=\"token variable\">$context</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name type-declaration\">UploaderFactory</span> <span class=\"token variable\">$uploaderFactory</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name type-declaration\">Filesystem</span> <span class=\"token variable\">$filesystem</span><span class=\"token punctuation\">,</span>\n    <span class=\"token class-name class-name-fully-qualified type-declaration\"><span class=\"token punctuation\">\\</span>VENDOR<span class=\"token punctuation\">\\</span>ImageUploader<span class=\"token punctuation\">\\</span>Model<span class=\"token punctuation\">\\</span>ImageFactory</span> <span class=\"token variable\">$imageFactory</span>\n  <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword static-context\">parent</span><span class=\"token operator\">::</span><span class=\"token function\">__construct</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$context</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">uploaderFactory</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$uploaderFactory</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">imageFactory</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$imageFactory</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">mediaDirectory</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$filesystem</span><span class=\"token operator\">-></span><span class=\"token function\">getDirectoryWrite</span><span class=\"token punctuation\">(</span><span class=\"token class-name class-name-fully-qualified static-context\"><span class=\"token punctuation\">\\</span>Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>App<span class=\"token punctuation\">\\</span>Filesystem<span class=\"token punctuation\">\\</span>DirectoryList</span><span class=\"token operator\">::</span><span class=\"token constant\">MEDIA</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">function</span> <span class=\"token function-definition function\">execute</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">try</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">getRequest</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">getMethod</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">!==</span> <span class=\"token string single-quoted-string\">'POST'</span> <span class=\"token operator\">||</span> <span class=\"token operator\">!</span><span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">_formKeyValidator</span><span class=\"token operator\">-></span><span class=\"token function\">validate</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">getRequest</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">throw</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">LocalizedException</span><span class=\"token punctuation\">(</span><span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'Invalid Request'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token comment\">//validate image</span>\n    <span class=\"token variable\">$fileUploader</span> <span class=\"token operator\">=</span> <span class=\"token constant\">null</span><span class=\"token punctuation\">;</span>\n    <span class=\"token variable\">$params</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">getRequest</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">-></span><span class=\"token function\">getParams</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">try</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token variable\">$imageId</span> <span class=\"token operator\">=</span> <span class=\"token string single-quoted-string\">'image'</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">isset</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$params</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'image'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">&#x26;&#x26;</span> <span class=\"token function\">count</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$params</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'image'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token variable\">$imageId</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$params</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'image'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token function\">file_exists</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$imageId</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'tmp_name'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token variable\">$imageId</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'tmp_name'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$imageId</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'path'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">.</span> <span class=\"token string single-quoted-string\">'/'</span> <span class=\"token operator\">.</span> <span class=\"token variable\">$imageId</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'file'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        <span class=\"token variable\">$fileUploader</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">uploaderFactory</span><span class=\"token operator\">-></span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'fileId'</span> <span class=\"token operator\">=></span> <span class=\"token variable\">$imageId</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">setAllowedExtensions</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'jpg'</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'jpeg'</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'png'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">setAllowRenameFiles</span><span class=\"token punctuation\">(</span><span class=\"token constant boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">setAllowCreateFolders</span><span class=\"token punctuation\">(</span><span class=\"token constant boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">validateFile</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token comment\">//upload image</span>\n        <span class=\"token variable\">$info</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$fileUploader</span><span class=\"token operator\">-></span><span class=\"token function\">save</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">mediaDirectory</span><span class=\"token operator\">-></span><span class=\"token function\">getAbsolutePath</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'imageUploader/images'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token comment\">/** @var \\VENDOR\\ImageUploader\\Model\\Image */</span>\n        <span class=\"token variable\">$image</span> <span class=\"token operator\">=</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">imageFactory</span><span class=\"token operator\">-></span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$image</span><span class=\"token operator\">-></span><span class=\"token function\">setPath</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">mediaDirectory</span><span class=\"token operator\">-></span><span class=\"token function\">getRelativePath</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'imageUploader/images'</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">.</span> <span class=\"token string single-quoted-string\">'/'</span> <span class=\"token operator\">.</span> <span class=\"token variable\">$info</span><span class=\"token punctuation\">[</span><span class=\"token string single-quoted-string\">'file'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$image</span><span class=\"token operator\">-></span><span class=\"token function\">save</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">ValidationException</span> <span class=\"token variable\">$e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">throw</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">LocalizedException</span><span class=\"token punctuation\">(</span><span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'Image extension is not supported. Only extensions allowed are jpg, jpeg and png'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span><span class=\"token class-name class-name-fully-qualified\"><span class=\"token punctuation\">\\</span>Exception</span> <span class=\"token variable\">$e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">//if an except is thrown, no image has been uploaded</span>\n        <span class=\"token keyword\">throw</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">LocalizedException</span><span class=\"token punctuation\">(</span><span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'Image is required'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">messageManager</span><span class=\"token operator\">-></span><span class=\"token function\">addSuccessMessage</span><span class=\"token punctuation\">(</span><span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'Image uploaded successfully'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">return</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">_redirect</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'*/*/index'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">LocalizedException</span> <span class=\"token variable\">$e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">messageManager</span><span class=\"token operator\">-></span><span class=\"token function\">addErrorMessage</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$e</span><span class=\"token operator\">-></span><span class=\"token function\">getMessage</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">return</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">_redirect</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'*/*/upload'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span><span class=\"token class-name class-name-fully-qualified\"><span class=\"token punctuation\">\\</span>Exception</span> <span class=\"token variable\">$e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">error_log</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$e</span><span class=\"token operator\">-></span><span class=\"token function\">getMessage</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">error_log</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$e</span><span class=\"token operator\">-></span><span class=\"token function\">getTraceAsString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token property\">messageManager</span><span class=\"token operator\">-></span><span class=\"token function\">addErrorMessage</span><span class=\"token punctuation\">(</span><span class=\"token function\">__</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'An error occurred, please try again later.'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">return</span> <span class=\"token variable\">$this</span><span class=\"token operator\">-></span><span class=\"token function\">_redirect</span><span class=\"token punctuation\">(</span><span class=\"token string single-quoted-string\">'*/*/upload'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></span></code></pre></div><p>This one is pretty similar to <code class=\"language-text\">TempUpload</code>. Again, let's dissect it:</p><ol><li>We're validating the request by checking that the method is <code class=\"language-text\">POST</code> and the form key is valid.</li><li>We're getting the params that are passed to the request.</li><li>We're checking if <code class=\"language-text\">$params['image']</code> is an image, then we're setting the <code class=\"language-text\">imageId</code> to the first image. This is because the <code class=\"language-text\">ImageUploader</code> can accept multiple images.</li><li>After that, we're doing the same steps that we did in <code class=\"language-text\">TempUpload</code>. We're setting some options like the allowed extensions.</li><li>We're saving the file in <code class=\"language-text\">imageUploader/images</code> under the <code class=\"language-text\">media</code> directory in <code class=\"language-text\">pub</code>.</li><li>We're creating a new instance of <code class=\"language-text\">Image</code>, which is the model for the table that we created in this module, and we're setting the path to the path of the image uploaded. After that, we're saving the model.</li><li>If no errors occur and everything works correctly, we're sending a success message and redirecting back to the index page that shows the image listing.</li></ol><p>Our form, all its components, and controllers related to it are ready. We just need to compile our code:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">php bin/magento setup:di:compile</code></pre></div><p>After that is done, again, log in to the admin side of your store. Click on <em>ImageUploader -> All Images -> Upload Images. </em>You'll see a form with an image uploader. Try uploading an image by clicking on <em>Upload</em> next to the <em>Images </em>field. The image uploader field will upload the image using the route <code class=\"language-text\">imageuploader/images/tempupload</code> which will upload the image to <code class=\"language-text\">pub/media/tmp/imageuploader/images</code>, then returns the URL. Then, the ImageUploader field will show a preview of the file.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-9.09.27-PM.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\" width=\"2676\" height=\"1204\"></figure><p>Click on the orange button <em>Upload </em>at the top right corner. This will send the form data to the endpoint <code class=\"language-text\">imageuploader/images/save</code>. This one will save the image under <code class=\"language-text\">pub/media/imageuploader/images</code>, then save the image with the path in the table we created for the module. If everything is correct, you'll be redirected to the listing page and you'll see the image you just uploaded.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-9.26.34-PM.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\" width=\"2654\" height=\"732\"></figure><h2 id=\"conclusion\">Conclusion</h2><p>This is how an ImageUploader component works! Next, you can try adding delete functionalities. You can also try adding other fields to the form, if necessary. It will work perfectly well.</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Admin forms in Magento 2 are built with UI Components. There are different types of UI Components that allow us to create many types of fields in forms. One of them is the "},{"type":"element","tagName":"a","properties":{"href":"https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/image-uploader/?itm_source=devdocs&itm_medium=quick_search&itm_campaign=federated_search&itm_term=imageuploade"},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":" component."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, we'll see how to add an ImageUploader component to a form on the admin side that allows us to upload images."}]},{"type":"element","tagName":"h2","properties":{"id":"prerequisites"},"children":[{"type":"text","value":"Prerequisites "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this section we'll go over the basics of creating a module, adding a menu item on the admin side, and creating a grid that shows the images we uploaded before we start working on our form. If you already know how to do all of that or you just need to see how to create a form with the ImageUploader component, you can skip this section."}]},{"type":"element","tagName":"h3","properties":{"id":"create-the-module"},"children":[{"type":"text","value":"Create the Module"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We'll quickly go over how to create a module in Magento 2. Create in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app/code"}]},{"type":"text","value":" the directories "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR/MODULE"}]},{"type":"text","value":" where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR"}]},{"type":"text","value":" is your name or your company's name and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"MODULE"}]},{"type":"text","value":" is the name of the module. We'll name this module "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Make sure to replace all instances of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR"}]},{"type":"text","value":" with the vendor name you choose, as it will be in every code snippet throughout the tutorial."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":" create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"registration.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Component"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ComponentRegistrar"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"ComponentRegistrar"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"register"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"ComponentRegistrar"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"MODULE"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'VENDOR_ImageUploader'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"__DIR__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Create a directory called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"etc"}]},{"type":"text","value":" and inside it create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"module.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"config"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:Module/etc/module.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"module"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"setup_version"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"0.0.1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"config"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These are the only files required to create a module. Next, we'll need to create the scripts to create a table in the database to store the path of the images we'll upload. Create a directory called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Setup"}]},{"type":"text","value":" inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":", then create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"InstallSchema.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Setup"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"DB"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Ddl"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Table"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Setup"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"InstallSchemaInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Setup"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"SchemaSetupInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Setup"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ModuleContextInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"InstallSchema"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"implements"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"InstallSchemaInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"install"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"SchemaSetupInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$setup"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"ModuleContextInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$setup"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"startSetup"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imagesTableName"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$setup"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getTable"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'VENDOR_images'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$setup"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getConnection"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"isTableExists"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imagesTableName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imagesTable"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$setup"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getConnection"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"newTable"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imagesTableName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addColumn"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image_id'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Table"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"TYPE_INTEGER"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Table"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"OPTION_IDENTITY"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Table"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"OPTION_PRIMARY"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Table"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"OPTION_UNSIGNED"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Table"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"OPTION_NULLABLE"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Image Id'"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addColumn"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Table"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"TYPE_TEXT"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"255"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Table"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"OPTION_NULLABLE"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Image Path'"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$setup"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getConnection"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"createTable"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imagesTable"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$setup"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"endSetup"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Make sure to replace "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR"}]},{"type":"text","value":" in the table name with the name of your vendor."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we'll create the necessary models for our table. First, create the directories "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Api/Data"}]},{"type":"text","value":" under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":", and inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Data"}]},{"type":"text","value":" create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageInterface.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Api"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"interface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"ImageInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"ID"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image_id'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"PATH"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"getPath"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"setPath"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$value"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, create the directory "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Model"}]},{"type":"text","value":" under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":" and inside it create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Image.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"DataObject"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"IdentityInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"AbstractModel"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDORE"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Api"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Data"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDORE"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ResourceModel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Image"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" ResourceModelImage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"Image"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"AbstractModel"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"implements"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"ImageInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" IdentityInterface "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"CACHE_TAG"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'VENDOR_images'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"getIdentities"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"self"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"CACHE_TAG"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'_'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getId"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"_construct"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"_init"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"ResourceModelImage"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"getPath"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getData"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"self"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"PATH"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"setPath"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$value"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setData"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"self"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"PATH"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$value"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Make sure to replace all instances of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR"}]},{"type":"text","value":" with your vendor name."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Under the directory "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Model"}]},{"type":"text","value":" create the directory "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ResourceModel"}]},{"type":"text","value":". Under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ResourceModel"}]},{"type":"text","value":" create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Image.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ResourceModel"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ResourceModel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Db"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"AbstractDb"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"Image"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"AbstractDb"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"_construct"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"_init"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'VENDOR_images'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image_id'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Again, make sure to replace "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR"}]},{"type":"text","value":" with your vendor name."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Under the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ResourceModel"}]},{"type":"text","value":" directory create a directory called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Image"}]},{"type":"text","value":", and under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Image"}]},{"type":"text","value":" create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Collection.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ResourceModel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Image"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ResourceModel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Db"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Collection"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"AbstractCollection"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Image"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ResourceModel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Image"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" ResourceModelImage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"Collection"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"AbstractCollection"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"_construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"_init"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Image"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"ResourceModelImage"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"di.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"config"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:ObjectManager/etc/config.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"preference"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"for"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR\\ImageUploader\\Api\\Data\\ImageInterface"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR\\ImageUploader\\Api\\Data\\Image"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"config"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, everything is ready for our models. To enable and compile our module, run the following commands in the root of the Magento project:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"text","value":"php bin"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"magento setup"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"upgrade\nphp bin"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"magento setup"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"di"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"compile"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If no errors occur, our module has been created successfully."}]},{"type":"element","tagName":"h3","properties":{"id":"add-the-routes"},"children":[{"type":"text","value":"Add the Routes"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To add routes to be able to access our module on the admin side, create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"etc"}]},{"type":"text","value":" the directory "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"adminhtml"}]},{"type":"text","value":", and inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"adminhtml"}]},{"type":"text","value":" create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"routes.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"config"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:App/etc/routes.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"router"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"admin"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"route"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"imageuploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"frontName"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"imageuploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"module"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"route"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"router"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"config"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"add-a-menu-item-on-the-admin-side"},"children":[{"type":"text","value":"Add a Menu Item on The Admin Side"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this section, we'll add a menu item to be able to access the page to upload images. First, create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"etc"}]},{"type":"text","value":" the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"acl.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"config"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:Acl/etc/acl.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"acl"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"resources"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"resource"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento_Backend::admin"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n              "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"resource"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader::upload"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"title"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Upload Images"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"sortOrder"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"30"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"resource"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"resources"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"acl"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"config"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"etc/adminhtml"}]},{"type":"text","value":" create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"menu.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"config"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:module:Magento_Backend:etc/menu.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"menu"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"add"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader::images_uploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"title"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Image Uploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" \n          "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"module"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"sortOrder"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"20"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"resource"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader::upload"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"add"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader::images"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"title"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"All Images"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" \n          "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"module"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"sortOrder"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader::images_uploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"action"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"imageuploader/images"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"resource"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR_ImageUploader::upload"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"menu"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"config"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will create a menu item called "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Image Uploader"}]},{"type":"text","value":" and when clicking on it the submenu will include the item "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"All Images"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, run the following command to compile the changes:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"php bin/magento setup:di:compile"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Go to the admin side now and login. You'll see in the sidebar a new menu item called "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Image Uploader."}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-8.18.02-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1034,"height":1636},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"create-the-image-listing-page"},"children":[{"type":"text","value":"Create the Image Listing Page"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We'll now create the page "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"All Images "}]},{"type":"text","value":"lead to, which will be a grid of the images uploaded."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Create first the directories "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Controller\\Adminhtml\\Images"}]},{"type":"text","value":" under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":". Then, create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Index.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Controller"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Adminhtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Images"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"Index"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Action"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n   *\n   * @var \\Magento\\Framework\\View\\Result\\PageFactory\n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","type-declaration"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Action"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Context"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","type-declaration"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Result"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"PageFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPageFactory"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"resultPageFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"execute"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** @var \\Magento\\Backend\\Model\\View\\Result\\Page $resultPage */"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPage"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"resultPageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"create"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPage"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setActiveMenu"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'VENDOR_ImageUploader::images_uploader'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPage"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getTitle"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"prepend"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Images'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":" create the directories "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"view/adminhtml/layout"}]},{"type":"text","value":" and inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":" create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"imageuploader_images_index.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"page"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:View/Layout/etc/page_configuration.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceContainer"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"uiComponent"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"images_list"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"referenceContainer"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"page"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After that, create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"view/adminhtml"}]},{"type":"text","value":" the directory "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ui_component"}]},{"type":"text","value":", and inside that directory create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"images_list.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"listing"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"data"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"js_config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"provider"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"images_list.images_list_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"buttons"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"button"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"upload"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"url"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"path"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"*/*/upload"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"primary"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"label"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"Upload Images"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"button"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"buttons"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"spinner"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"images_columns"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"spinner"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"deps"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"dep"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"images_list.images_list_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"dep"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"deps"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"dataSource"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"images_list_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"component"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento_Ui/js/grid/provider"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"storageConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"param"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"indexField"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"image_id"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"param"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"storageConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"updateUrl"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"path"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"mui/index/render"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"dataProvider"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"images_list_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"requestFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"id"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"requestFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"primaryFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"image_id"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"primaryFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"dataProvider"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"dataSource"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"columns"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"images_columns"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"column"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"image_id"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"sortOrder"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"10"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"filter"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"text"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"filter"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"dataType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"text"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"dataType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"label"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"ID"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"column"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"column"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"path"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"component"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento_Ui/js/grid/columns/thumbnail"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR\\ImageUploader\\Ui\\Component\\Columns\\Thumbnail"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n              "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"hasPreview"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"0"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"hasPreview"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n              "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"addField"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"false"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"addField"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n              "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"label"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"Thumbnail"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n              "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"sortable"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"false"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"sortable"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"column"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"listing"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will create a grid listing that will show the uploaded images. It will show 2 columns, the ID and a thumbnail. To show the thumbnail, we need to create the class for the UI Component. Create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":" the directories "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Ui\\Component\\Columns"}]},{"type":"text","value":", and inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Columns"}]},{"type":"text","value":" create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Thumbnail.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Ui"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Component"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UrlInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Element"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UiComponent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ContextInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Element"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UiComponentFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Store"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"StoreManagerInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Ui"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Component"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Listing"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Columns"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Column"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"Thumbnail"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"Column"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n   *\n   * @var StoreManagerInterface\n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$storeManagerInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"ContextInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"UiComponentFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$uiComponentFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"StoreManagerInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$storeManagerInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","type-hint"]},"children":[{"type":"text","value":"array"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$components"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","type-hint"]},"children":[{"type":"text","value":"array"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$uiComponentFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$components"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"storeManagerInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$storeManagerInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"prepareDataSource"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword","type-hint"]},"children":[{"type":"text","value":"array"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$dataSource"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"foreach"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$dataSource"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"data\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"items\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&"}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"isset"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$url"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"storeManagerInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getStore"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getBaseUrl"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"UrlInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"URL_TYPE_MEDIA"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path_src'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$url"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path_alt'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image_id'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path_link'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$url"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path_orig_src'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$url"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$dataSource"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This class will extend "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento\\Ui\\Component\\Listing\\Columns\\Column"}]},{"type":"text","value":" and override the function "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"prepareDataSource"}]},{"type":"text","value":". In this function, we're making changes to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"path"}]},{"type":"text","value":" column to show a thumbnail. To be able to show a thumbnail using the component "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento_Ui/js/grid/columns/thumbnail"}]},{"type":"text","value":", we need to add to each row in the table the fields "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"FIELD_src"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"FIELD_alt"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"FIELD_link"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"FIELD_orig_src"}]},{"type":"text","value":", where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"FIELD"}]},{"type":"text","value":" is the name of the field of the thumbnail, in this case, it's "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"path"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, add the following to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"etc/di.xml"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"type"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"arguments"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"collections"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"images_list_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                    VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\Grid\\Collection\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"arguments"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"virtualType"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\\Grid\\Collection"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n                 "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\SearchResult"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"arguments"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"mainTable"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"VENDOR_images"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"resourceModel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"VENDOR\\ImageUploader\\Model\\ResourceModel\\Image\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"arguments"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"virtualType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Our image listing page is ready. We need to compile the changes first:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"php bin/magento setup:di:compile"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, log in to the admin side again and click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ImageUploader -> All Images. "}]},{"type":"text","value":"A page with an empty table will show and a button to upload new images."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-8.47.27-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2880,"height":1110},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we're ready to create the form and add the ImageUploader component to it."}]},{"type":"element","tagName":"h2","properties":{"id":"create-ui-form"},"children":[{"type":"text","value":"Create UI Form"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, we'll need to create the controller that will handle the request. Create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader\\Controller\\Adminhtml\\Images"}]},{"type":"text","value":" the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Upload.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Controller"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Adminhtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Images"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"Upload"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Action"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n   *\n   * @var \\Magento\\Framework\\View\\Result\\PageFactory\n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","type-declaration"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Action"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Context"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","type-declaration"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Result"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"PageFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPageFactory"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"resultPageFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"execute"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** @var \\Magento\\Backend\\Model\\View\\Result\\Page $resultPage */"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPage"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"resultPageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"create"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPage"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setActiveMenu"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'VENDOR_ImageUploader::images_uploader'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPage"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getTitle"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"prepend"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Upload Image'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$resultPage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Like "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Index.php"}]},{"type":"text","value":", this one just shows the page. We'll need to create the layout for this page. Create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"view/adminhtml/layout"}]},{"type":"text","value":" the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"imageuploader_images_upload.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"page"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:View/Layout/etc/page_configuration.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceContainer"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"uiComponent"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"images_form"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"referenceContainer"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"page"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is just showing a UI Component called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"images_form"}]},{"type":"text","value":", which we'll create next. Create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"view/adminhtml/ui_component"}]},{"type":"text","value":" the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"images_form.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"form"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"data"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"js_config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"provider"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"images_form.images_form_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"label"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"Upload Images"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"reverseMetadataMerge"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"boolean"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"template"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"templates/form/collapsible"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"dataScope"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"data"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"namespace"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"images_form"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"buttons"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"button"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"save"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\UploadButton"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"button"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"back"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\BackButton"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"buttons"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"deps"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"dep"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"images_form.images_form_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"dep"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"deps"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"dataSource"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"images_form_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"dataProvider"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"configurableObject"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"images_form_data_source"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"class"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"VENDOR\\ImageUploader\\Ui\\Component\\Form\\DataProvider"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"primaryFieldName"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"image_id"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"requestFieldName"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"id"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"data"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"submit_url"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"url"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"path"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"*/*/save"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"data"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"js_config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"array"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"component"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"Magento_Ui/js/form/provider"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"dataSource"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"fieldset"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"image"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"label"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"Upload Images"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"field"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"image"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"formElement"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"imageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"label"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"Images"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"componentType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"imageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"componentType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"validation"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"rule"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"required-entry"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"boolean"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"rule"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"validation"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"formElements"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"imageUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"allowedExtensions"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"jpg jpeg png"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"allowedExtensions"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"maxFileSize"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"2097152"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"maxFileSize"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"uploaderConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"param"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"url"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"imageuploader/images/tempUpload"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"param"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"uploaderConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"imageUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"formElements"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"field"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"fieldset"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"form"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This just creates the UI Form component. Before we dive into the components and classes this form needs, let's look at the ImageUploader component:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"field"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"image"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"formElement"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"imageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"label"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"translate"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"Images"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"componentType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"imageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"componentType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"validation"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"rule"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"required-entry"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"boolean"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"true"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"rule"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"validation"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"formElements"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"imageUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"allowedExtensions"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"jpg jpeg png"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"allowedExtensions"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"maxFileSize"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"2097152"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"maxFileSize"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"uploaderConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"param"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"url"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"imageuploader/images/tempUpload"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"param"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"uploaderConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"settings"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"imageUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"formElements"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"field"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that we've defined this field as an ImageUploader through "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"<componentType>imageUploader</componentType>"}]},{"type":"text","value":". We've also made this field required by adding "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"<rule name=\"required-entry\" xsi:type=\"boolean\">true</rule>"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"<validation>"}]},{"type":"text","value":". Then, inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"<formElements>"}]},{"type":"text","value":", we're adding a couple of settings for the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"<imageUploader>"}]},{"type":"text","value":". "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"allowedExtensions"}]},{"type":"text","value":" allows us to specify the extensions allowed, which are in this case "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"jpg"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":", and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"png"}]},{"type":"text","value":". "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"maxFileSize"}]},{"type":"text","value":" is the maximum size allowed for the file being uploaded. and finally, the param "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"url"}]},{"type":"text","value":" inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"uploaderConfig"}]},{"type":"text","value":" is the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"url"}]},{"type":"text","value":" to send to the uploaded image for temporary upload. This is used to show a preview of the image being uploaded."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This form component needs a few PHP Classes to be created to be able to function correctly."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, we've added 2 buttons, back and upload:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"button"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"save"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\UploadButton"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"button"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"back"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"VENDOR\\ImageUploader\\Block\\Adminhtml\\Form\\BackButton"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, let's create the classes for them. Create first the directories "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Block\\Adminhtml\\Form"}]},{"type":"text","value":". Then, create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Form"}]},{"type":"text","value":" the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"UploadButton.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Block"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Adminhtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Form"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Element"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UiComponent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Control"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ButtonProviderInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"UploadButton"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"implements"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"ButtonProviderInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"getButtonData"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'label'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Upload'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'class'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'save primary'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data_attribute'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'mage-init'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'button'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'event'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'save'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n          "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'form-role'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'save'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'sort_order'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"90"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This button just takes the user to the save path. The save path is defined in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"images_form.xml"}]},{"type":"text","value":" in this line:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"item"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"submit_url"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"url"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"path"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"*/*/save"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Also, create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"BackButton.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Block"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Adminhtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Form"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UrlInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"View"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Element"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UiComponent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Control"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ButtonProviderInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"BackButton"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"implements"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"ButtonProviderInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** @var UrlInterface */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$urlInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"UrlInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$urlInterface"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"urlInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$urlInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n  \n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"getButtonData"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'label'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Back'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'on_click'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"sprintf"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"location.href = '%s';\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getBackUrl"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'class'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'back'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'sort_order'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"10"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    \n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"getBackUrl"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"urlInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getUrl"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'*/*/'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This button just takes the user back to the index page, which is the page that has the image listing."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, we need to create the following classes that are defined in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"images_form.xml"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"argument"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"class"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"string"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"VENDOR\\ImageUploader\\Ui\\Component\\Form\\DataProvider"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"argument"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is the data provider class. Usually, this class is very important when the form has an edit functionality. This is where the data for the record being edited is filled to show in the form fields."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Create under the directory "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Ui\\Component\\Form"}]},{"type":"text","value":" the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"DataProvider.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":" \n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Ui"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Component"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Form"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Registry"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"DataProvider"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Ui"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"DataProvider"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"AbstractDataProvider"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","type-hint"]},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$name"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","type-hint"]},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$primaryFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","type-hint"]},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$requestFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"Registry"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$registry"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","type-declaration"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ResourceModel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Image"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"CollectionFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageCollectionFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","type-hint"]},"children":[{"type":"text","value":"array"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$meta"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","type-hint"]},"children":[{"type":"text","value":"array"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$name"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$primaryFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$requestFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$meta"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"registry"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$registry"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"collection"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageCollectionFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"create"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"getData"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This just returns an empty array since we don't have the edit functionality in our form."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, we'll create the controller that's supposed to handle the temporary upload of the image to show it in the preview, which is at the URL "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"imageuploader/images/tempUpload"}]},{"type":"text","value":". So, create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Controller\\Adminhtml\\Images"}]},{"type":"text","value":" the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"TempUpload.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Controller"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Adminhtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Images"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Action"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UrlInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Controller"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ResultFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Exception"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"LocalizedException"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Filesystem"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"MediaStorage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"File"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Store"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"StoreManagerInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"TempUpload"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Action"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n   *\n   * @var UploaderFactory\n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$uploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** \n   * @var Filesystem\\Directory\\WriteInterface \n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$mediaDirectory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  \n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n   * @var StoreManagerInterface\n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$storeManager"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"Context"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"UploaderFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$uploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"Filesystem"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$filesystem"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"StoreManagerInterface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$storeManager"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"uploaderFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$uploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"mediaDirectory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$filesystem"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getDirectoryWrite"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","static-context"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Filesystem"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"DirectoryList"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"MEDIA"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"storeManager"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$storeManager"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"execute"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$jsonResult"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"resultFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"create"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"ResultFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"TYPE_JSON"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"try"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"uploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"create"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'fileId'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setAllowedExtensions"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'jpg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'jpeg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'png'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setAllowRenameFiles"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setAllowCreateFolders"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setFilesDispersion"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"validate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$result"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"save"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"mediaDirectory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getAbsolutePath"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'tmp/imageUploader/images'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$result"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'url'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"storeManager"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getStore"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getBaseUrl"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"UrlInterface"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"URL_TYPE_MEDIA"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'tmp/imageUploader/images/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ltrim"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"str_replace"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'\\\\'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$result"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'file'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$jsonResult"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setData"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$result"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"LocalizedException"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$jsonResult"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setData"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'errorcode'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'error'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getMessage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Exception"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error_log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getMessage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error_log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getTraceAsString"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$jsonResult"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setData"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'errorcode'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'error'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'An error occurred, please try again later.'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's dissect this to understand it better:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We're using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"uploaderFactory"}]},{"type":"text","value":" of type "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento\\MediaStorage\\Model\\File\\UploaderFactory"}]},{"type":"text","value":" to first get the uploaded image from the request. We pass it "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"fileId"}]},{"type":"text","value":" with the value "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"image"}]},{"type":"text","value":", which is the name of the field. If it was named something else like \"file\" then "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"fileId"}]},{"type":"text","value":" will be "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"file"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We're specifying some rules for validation next. We're setting the allowed extensions with "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setAllowedExtensions"}]},{"type":"text","value":". We're also using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setAllowRenameFiles"}]},{"type":"text","value":" to allow renaming the file uploaded on upload, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setAllowCreateFolders"}]},{"type":"text","value":" to allow creating a folder if it doesn't exist, and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setFilesDispersion"}]},{"type":"text","value":" to disable files dispersion."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Then, we're saving the temporary file to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"tmp/imageUploader/images"}]},{"type":"text","value":" under the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" directory in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"pub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Finally, we're sending back the URL for the uploaded file."}]}]},{"type":"element","tagName":"h2","properties":{"id":"upload-and-save-image"},"children":[{"type":"text","value":"Upload and Save Image"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The last thing we need to implement is the Save controller. This controller will handle the submission of the image to finally upload it and save it in our database. To do that, create under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Controller\\Adminhtml\\Images"}]},{"type":"text","value":" the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Save.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"namespace"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Controller"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Adminhtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Images"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Action"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Exception"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"LocalizedException"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Filesystem"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Validation"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ValidationException"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"MediaStorage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"File"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"UploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name-definition","class-name"]},"children":[{"type":"text","value":"Save"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Backend"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Action"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n   *\n   * @var UploaderFactory\n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$uploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n   * @var \\VENDOR\\ImageUploader\\Model\\ImageFactory\n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** \n   * @var Filesystem\\Directory\\WriteInterface \n   */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"protected"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$mediaDirectory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"Context"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"UploaderFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$uploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"Filesystem"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$filesystem"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","type-declaration"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"VENDOR"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageUploader"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Model"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ImageFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageFactory"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword","static-context"]},"children":[{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__construct"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$context"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"uploaderFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$uploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"imageFactory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"mediaDirectory"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$filesystem"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getDirectoryWrite"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","static-context"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Filesystem"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"DirectoryList"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"MEDIA"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"execute"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"try"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getRequest"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getMethod"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!=="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'POST'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"||"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"_formKeyValidator"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"validate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getRequest"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"throw"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"LocalizedException"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Invalid Request'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//validate image"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$params"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getRequest"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getParams"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"try"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageId"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"isset"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$params"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"count"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$params"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageId"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$params"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'image'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"file_exists"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageId"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'tmp_name'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageId"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'tmp_name'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageId"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'path'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageId"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'file'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"uploaderFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"create"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'fileId'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$imageId"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setAllowedExtensions"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'jpg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'jpeg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'png'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setAllowRenameFiles"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setAllowCreateFolders"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","constant","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"validateFile"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//upload image"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$info"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$fileUploader"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"save"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"mediaDirectory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getAbsolutePath"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'imageUploader/images'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** @var \\VENDOR\\ImageUploader\\Model\\Image */"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$image"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"imageFactory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"create"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$image"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setPath"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"mediaDirectory"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getRelativePath"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'imageUploader/images'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$info"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'file'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$image"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"save"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"ValidationException"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"throw"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"LocalizedException"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Image extension is not supported. Only extensions allowed are jpg, jpeg and png'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Exception"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//if an except is thrown, no image has been uploaded"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"throw"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"LocalizedException"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Image is required'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"messageManager"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addSuccessMessage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Image uploaded successfully'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"_redirect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'*/*/index'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"LocalizedException"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"messageManager"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addErrorMessage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getMessage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"_redirect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'*/*/upload'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Exception"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error_log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getMessage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error_log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$e"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getTraceAsString"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"messageManager"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addErrorMessage"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'An error occurred, please try again later.'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$this"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"_redirect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'*/*/upload'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This one is pretty similar to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"TempUpload"}]},{"type":"text","value":". Again, let's dissect it:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We're validating the request by checking that the method is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"POST"}]},{"type":"text","value":" and the form key is valid."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We're getting the params that are passed to the request."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We're checking if "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$params['image']"}]},{"type":"text","value":" is an image, then we're setting the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"imageId"}]},{"type":"text","value":" to the first image. This is because the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ImageUploader"}]},{"type":"text","value":" can accept multiple images."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"After that, we're doing the same steps that we did in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"TempUpload"}]},{"type":"text","value":". We're setting some options like the allowed extensions."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We're saving the file in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"imageUploader/images"}]},{"type":"text","value":" under the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" directory in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"pub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We're creating a new instance of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Image"}]},{"type":"text","value":", which is the model for the table that we created in this module, and we're setting the path to the path of the image uploaded. After that, we're saving the model."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If no errors occur and everything works correctly, we're sending a success message and redirecting back to the index page that shows the image listing."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Our form, all its components, and controllers related to it are ready. We just need to compile our code:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"php bin/magento setup:di:compile"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After that is done, again, log in to the admin side of your store. Click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ImageUploader -> All Images -> Upload Images. "}]},{"type":"text","value":"You'll see a form with an image uploader. Try uploading an image by clicking on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Upload"}]},{"type":"text","value":" next to the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Images "}]},{"type":"text","value":"field. The image uploader field will upload the image using the route "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"imageuploader/images/tempupload"}]},{"type":"text","value":" which will upload the image to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"pub/media/tmp/imageuploader/images"}]},{"type":"text","value":", then returns the URL. Then, the ImageUploader field will show a preview of the file."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-9.09.27-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2676,"height":1204},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Click on the orange button "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Upload "}]},{"type":"text","value":"at the top right corner. This will send the form data to the endpoint "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"imageuploader/images/save"}]},{"type":"text","value":". This one will save the image under "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"pub/media/imageuploader/images"}]},{"type":"text","value":", then save the image with the path in the table we created for the module. If everything is correct, you'll be redirected to the listing page and you'll see the image you just uploaded."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-24-at-9.26.34-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2654,"height":732},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is how an ImageUploader component works! Next, you can try adding delete functionalities. You can also try adding other fields to the form, if necessary. It will work perfectly well."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"prerequisites","heading":"Prerequisites ","items":[{"id":"create-the-module","heading":"Create the Module"},{"id":"add-the-routes","heading":"Add the Routes"},{"id":"add-a-menu-item-on-the-admin-side","heading":"Add a Menu Item on The Admin Side"},{"id":"create-the-image-listing-page","heading":"Create the Image Listing Page"}]},{"id":"create-ui-form","heading":"Create UI Form"},{"id":"upload-and-save-image","heading":"Upload and Save Image"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg","publicURL":"/static/9157dd8c027b9e029d85863e32ac6e36/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg","imageMeta":{"width":2000,"height":1331},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQAE/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAVMxmcQi6o//xAAaEAACAgMAAAAAAAAAAAAAAAABAgADBBIT/9oACAEBAAEFAthye5gpyojkVm1oXM//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFX/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAQMFAAAAAAAAAAAAAAAAAAERoQIQMUGR/9oACAEBAAY/AkqHeDMCW1w//8QAHBAAAgICAwAAAAAAAAAAAAAAAREAQSExYZHR/9oACAEBAAE/ISiFHBGLhep01hX5Q8N0OJQJEIOuif/aAAwDAQACAAMAAAAQOx//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EFirLP/EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8QtxEP/8QAHxABAQACAQQDAAAAAAAAAAAAAREAIVExQWFxgZHB/9oACAEBAAE/EEAEIKvAO/rCdICYrw11iqDU3vjj5pFFaPG9fWFVudd24nX4A/M//9k=","aspectRatio":1.5086206896551724,"src":"/static/9157dd8c027b9e029d85863e32ac6e36/ea4ab/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg","srcSet":"/static/9157dd8c027b9e029d85863e32ac6e36/477ba/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg 175w,\n/static/9157dd8c027b9e029d85863e32ac6e36/06776/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg 350w,\n/static/9157dd8c027b9e029d85863e32ac6e36/ea4ab/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg 700w,\n/static/9157dd8c027b9e029d85863e32ac6e36/3055e/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg 1050w,\n/static/9157dd8c027b9e029d85863e32ac6e36/eff08/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg 1400w,\n/static/9157dd8c027b9e029d85863e32ac6e36/4e5f3/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg 2000w","srcWebp":"/static/9157dd8c027b9e029d85863e32ac6e36/89afa/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.webp","srcSetWebp":"/static/9157dd8c027b9e029d85863e32ac6e36/9fca7/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.webp 175w,\n/static/9157dd8c027b9e029d85863e32ac6e36/37a4e/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.webp 350w,\n/static/9157dd8c027b9e029d85863e32ac6e36/89afa/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.webp 700w,\n/static/9157dd8c027b9e029d85863e32ac6e36/78e7a/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.webp 1050w,\n/static/9157dd8c027b9e029d85863e32ac6e36/03d34/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.webp 1400w,\n/static/9157dd8c027b9e029d85863e32ac6e36/49d6b/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__6127ba1b3ed159214d382eb0","title":"How to Use Magento With Bootstrap, React, and Vue.js","slug":"how-to-use-magento-with-bootstrap-react-and-vue-js","featured":false,"feature_image":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg","excerpt":"In this tutorial, we'll go over how to use Bootstrap, React, and Vue.js with Magento 2.","custom_excerpt":"In this tutorial, we'll go over how to use Bootstrap, React, and Vue.js with Magento 2.","visibility":"public","created_at_pretty":"3 Jul 2021","published_at_pretty":"3 Jul 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-07-03T12:19:10.000+00:00","published_at":"2021-07-03T14:27:30.000+00:00","updated_at":"2021-08-26T17:36:20.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"1_ZxqU4dcMgnOkEe_YcZ01EQ.png","publicURL":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","imageMeta":{"width":2000,"height":1000},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVQoz2P4TwFgQDD//YMi/ACk4B82zX//IPHQAVabQaL/vn/5fXT9r/3L/314DTMem60/vv0+f+Dfp7cQNQwQ237uWfZjdd+PzTP+bJ119sLFXTt3Xr1y5d7du9evXb99+/bRw0euX7v26eu3/5/efV/W9WPjDJDmP3+gmn8d2fRtWsm3yQW/9iw7e+78po0bN2/aNHP6jEULFu7auXPdmrU7tm9/9uLl/18/vk0t/n3lGNjmv3A///t1bPOv3Uv//foJ9jsIPHv27MOHDxDpXz9//vv//+/jm99mVf65dQ7mbJQA+4vHw0REFUqkYAQyJEb+/cXQTHoiAQDMTzrKXUcJ/gAAAABJRU5ErkJggg==","aspectRatio":2,"src":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","srcSet":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/bcfcb/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/19d75/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/50033/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/47b0f/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/71514/1_ZxqU4dcMgnOkEe_YcZ01EQ.png 2000w","srcWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp","srcSetWebp":"/static/a31aa55d79836c6ec2a7d0044e4ac60d/dc8f3/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 260w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/2db4b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 520w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/e4875/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1040w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/f5845/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 1560w,\n/static/a31aa55d79836c6ec2a7d0044e4ac60d/49d6b/1_ZxqU4dcMgnOkEe_YcZ01EQ.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"magento","url":"https://backend.shahednasser.com/tag/magento/","name":"Magento","visibility":"public","feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_ZxqU4dcMgnOkEe_YcZ01EQ.png","description":"Learn more about Magento through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"react","url":"https://backend.shahednasser.com/tag/react/","name":"React","visibility":"public","feature_image":"https://images.unsplash.com/photo-1581276879432-15e50529f34b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDN8fHJlYWN0fGVufDB8fHx8MTYyMjYzMzI0MA&ixlib=rb-1.2.1&q=80&w=2000","description":"Learn more about React through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null}],"plaintext":"Magento is one of the leading e-commerce frameworks. It provides so many\nfeatures out of the box, making it everything any merchant or seller might need.\nHowever, development in Magento can be a hassle, as it is not easy to learn and\nit's not easy to integrate with some of the leading frontend frameworks or\nlibraries.\n\nIn this tutorial, we'll go over how to use Bootstrap, React, and Vue.js with\nMagento 2.\n\n\n--------------------------------------------------------------------------------\n\nPrerequisites: Create a Theme\nThis tutorial will add the libraries or frameworks in a new theme. However, if\nyou need to add them to a module it's pretty much the same process.\n\nIf you don't have a theme created, we'll quickly go over how to create a theme.\nFirst, create the directory app/design/frontend/VENDOR/THEME_NAME where VENDOR \nis your own company or your name, and THEME_NAME is the name of the theme.\n\nThen, in the theme directory create the file theme.xml:\n\n<theme xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config/etc/theme.xsd\">\n    <title>THEME_NAME</title>\n    <parent>Magento/blank</parent>\n</theme>\n\n\nMake sure to change THEME_NAME to the name of your theme. \n\nThen, create the file registration.php:\n\n<?php\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/VENDOR_NAME/THEME_NAME', __DIR__);\n\n\nMake sure to change VENDOR_NAME and THEME_NAME accordingly.\n\nFinally, create composer.json:\n\n{\n    \"name\": \"VENDOR_NAME/THEME_NAME\",\n    \"description\": \"N/A\",\n    \"type\": \"magento2-theme\",\n    \"license\": [\n        \"OSL-3.0\",\n        \"AFL-3.0\"\n    ],\n    \"config\": {\n        \"sort-packages\": true\n    },\n    \"version\": \"100.4.2\",\n    \"require\": {\n        \"php\": \"~7.3.0||~7.4.0\",\n        \"magento/framework\": \"103.0.*\"\n    },\n    \"autoload\": {\n        \"files\": [\n            \"registration.php\"\n        ]\n    }\n}\n\nAgain, make sure to change VENDOR_NAME and THEME_NAME accordingly.\n\nNow go to your Magento admin and login. Then, go to Content -> Configuration.\nClick on Edit for the Default Store View. Now, choose your theme from the\n\"Applied Theme\" dropdown and click Save Configuration.\n\n\n--------------------------------------------------------------------------------\n\nUsing Bootstrap with Magento\nBootstrap is one of the most famous CSS libraries out there. Bootstrap is used\nin so many websites that we use every day. Using it makes web development\neasier, so figuring out how to use it with Magento is useful.\n\nThere's a small difference between using Bootstrap 5 and prior versions. I'll\npoint it out when we get to it.\n\nFirst, download Bootstrap\n[https://getbootstrap.com/docs/5.0/getting-started/download/] with the version\nyou want. If you are downloading Bootstrap v5.x, you need to download Popper.js\nversion 2 [https://unpkg.com/@popperjs/core@2]. However, if you are downloading\nBootstrap v4.6 or earlier, you need to download Popper.js version 1\n[https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js].\n\nThen, extract the downloaded Bootstrap ZIP. It will have css and js directories.\nMove css/bootstrap.min.css to your theme directory and place it in \nTHEME_NAME/web/css. Also, move js/bootstrap.min.js to your theme directory and\nplace it in THEME_NAME/web/js. Finally, place popper.min.js that you downloaded\nin THEME_NAME/web/js.\n\nThen, in the root of the theme directory create requirejs-config.js. The content\nwill be slightly different depending on the version of Bootstrap you're using.\n\nIf you're using Bootstrap >= 5.0:\n\nvar config = {\n    shim:{\n        bootstrap: {\n            deps: ['jquery', '@popperjs/core']\n        }\n    },\n    map: {\n        '*': {\n            bootstrap: 'js/bootstrap.min',\n            '@popperjs/core': 'js/popper.min'\n        }\n    }\n};\n\nIf you're using prior versions:\n\nvar config = {\n    shim:{\n        bootstrap: {\n            deps: ['jquery', 'popper.js']\n        }\n    },\n    map: {\n        '*': {\n            bootstrap: 'js/bootstrap.min',\n            'popper.js': 'js/popper.min'\n        }\n    }\n};\n\nThe reason behind the difference is that in Bootstrap 5, bootstrap.min.js \nrequires @popperjs/core, whereas in prior versions bootstrap.min.js requires \npopper.js.\n\nIf you're not familiar with what requirejs-config.js does, it basically defines\nthe scripts for later use in our theme or module using RequireJS. the map key\nallows us to define the libraries we want to use under certain keys to refer to\nthem in other places. shim allows defining what the library might depend on. In\nBootstrap's case, it depends on jQuery and Popper.js\n\nThe next step is adding the CSS file for Bootstrap in the head tag of our pages.\nTo do that, create in your theme's directory the file \nMagento_Theme/layout/default_head_block.xml with the following content:\n\n<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\">\n    <head>\n        <css src=\"css/bootstrap.min.css\" />\n    </head>\n</page>\n\n Let's test that both the CSS file and JS files are working correctly. Create in\nyour theme's directory the file Magento_Theme/layout/default.xml:\n\n<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\">\n    <body>\n        <referenceContainer name=\"content\">\n            <block name=\"test-bootstrap\" class=\"Magento\\Framework\\View\\Element\\Template\" template=\"Magento_Theme::test-bootstrap.phtml\" />\n        </referenceContainer>\n    </body>\n</page>\n\nThis will add a block to the content container of our pages. Then, create the\nfile Magento_Theme/templates/test-bootstrap.phtml with the following content:\n\n<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Tooltip on top\">\n  Hover me\n</button>\n<script>\n    require(['jquery', 'bootstrap'], function ($) {\n        $('[data-bs-toggle=\"tooltip\"]').tooltip();\n    });\n</script>\n\nThis will show a button with a tooltip, which will test both Bootstrap and\nPopper's functionalities.\n\nThe integration with Bootstrap is done now. To test it out, first, use \nsetup:static-content:deploy command after clearing the var/cache, \nvar/view_preprocessed, var/page_cache, generated, and pub/static/frontend \ndirectories:\n\nphp bin/magento setup:static-content:deploy -f\n\nRecommended read - Learn how to compile front-end changes in Magento 2 easily: \nHow to Make Your Front-End Development Faster in Magento 2 Using Grunt\n[https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt]\n\nIf you go now to the home page, you should see a button that will show a tooltip\nwhen you hover it.\n\n\n--------------------------------------------------------------------------------\n\nUsing React with Magento\nIn this tutorial, we'll cover the easiest way to integrate React with Magento.\nIf you search a little online, you'll find a lot of methods using Grunt and\nother methods. In this one, we'll show the most basic way to integrate React\nwith Magento 2.\n\nFirst, download the production builds for React\n[https://unpkg.com/react@17.0.2/umd/react.production.min.js] and ReactDom\n[https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js] and place\nthem in THEME_NAME/web/js. Then, create requirejs-config.js:\n\nvar config = {\n    map: {\n        '*': {\n            'react': 'js/react.production.min',\n            'react-dom': 'js/react-dom.production.min'\n        }\n    }\n};\n\nAs mentioned above, require-config.js allows us to define the libraries or\nframeworks and refer to them by the key specified. \n\nLet's first create a Button component. Create the file \nTHEME_NAME/web/js/components/Button.js with the following content:\n\ndefine (['react'], function (React) {\n    var e = React.createElement;\n\n    function Button () {\n        return e('button', null, 'Button');\n    }\n\n    return Button;\n});\n\nNote that as we're not using Babel [https://babeljs.io/] or Webpack\n[https://webpack.js.org/], we can't write components using JSX\n[https://reactjs.org/docs/introducing-jsx.html]. So, we'll have to use the\nfunction React.createElement. For simplicity, we first store it in a new\nvariable:\n\nvar e = React.createElement;\n\nThe function takes at least three parameters. The first is the tag name of the\nelement to create, or if you're using a React component you pass the component.\nThe second parameter is either an object of props to pass to the component (for\nexample, {className: 'btn'}) or null for no props. Starting from the third\nparameter, you can pass children elements each as a parameter to the function.\n\nFinally, we return the component to be used in other components:\n\nreturn Button;\n\nNow, we'll create the main component App that will render other components.\nCreate THEME_NAME/web/js/App.js:\n\nrequire(['react', 'react-dom', 'js/components/Button'], function (React, ReactDom, Button) {\n    var e = React.createElement;\n\n    function App () {\n        return e('div', null, e(Button));\n    }\n\n    ReactDom.render(e(App), document.getElementById('root'))\n});\n\nNote that we assigned React.createElement to a new variable e. Then, in the App \ncomponent we're rendering a div element that has Button as a child component:\n\nreturn e('div', null, e(Button));\n\nNotice that in order to use the Button component, in the first parameter of \nrequire we passed in the array js/components/Button, which is the path of the\ncomponent. If you want to reference the components in an easier manner, you can\nadd them to the map object in requirejs-config.js:\n\nmap: {\n    '*': {\n        //...\n        'Button': 'js/components/Button'\n    }\n}\n\nThen, in the require function when you want to use the Button component:\n\nrequire([..., 'Button'], ...)\n\nLet's use the components we created. Create Magento_Theme/layout/default.xml \nwith the following content:\n\n<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\">\n    <head>\n        <script src=\"js/App.js\" />\n    </head>\n    <body>\n        <referenceContainer name=\"content\">\n            <block name=\"test-react\" class=\"Magento\\Framework\\View\\Element\\Template\" template=\"Magento_Theme::test-react.phtml\" />\n        </referenceContainer>\n    </body>\n</page>\n\nWe're loading js/App.js in the head of the page, and we're adding a new block in\nthe content container. Remember, this is for testing purposes, so you don't need\nto add it to the default.xml. You can add it to whatever layout or page you\nwant.\n\nNext, create Magento_Theme/templates/test-react.phtml:\n\n<div id=\"root\"></div>\n\nThe integration is done. To test it out, first use setup:static-content:deploy \ncommand after clearing the var/cache, var/view_preprocessed, var/page_cache, \ngenerated, and pub/static/frontend directories:\n\nphp bin/magento setup:static-content:deploy -f\n\nRecommended read - Learn how to compile front-end changes in Magento 2 easily: \nHow to Make Your Front-End Development Faster in Magento 2 Using Grunt\n[https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt]\n\nAfter that's done, go to the home page and you should see a button:\n\n\n--------------------------------------------------------------------------------\n\nUsing Vue with Magento\nVue is another popular Javascript framework. Integrating it with Magento is\npretty easy.\n\nFirst, download the latest version of Vue, either development\n[https://vuejs.org/js/vue.js] or production [https://vuejs.org/js/vue.min.js].\nOnce it downloads, place the JS file in THEME_NAME/web/js.\n\nNext, create requirejs-config.js with the following content:\n\nvar config = {\n    map: {\n        '*': {\n            'vue': 'js/vue.min',\n        }\n    }\n};\n\nAnd with that, we're ready to use Vue!\n\nLet's create a btn component. Create the file \nTHEME_NAME/web/js/components/Btn.js:\n\ndefine(['vue'], function (Vue) {\n    return function () {\n        Vue.component('btn', {\n            props: ['text'],\n            template: '<button>{{ text }}</button>'\n        });\n    }\n});\n\nThis will create the btn component. Next, create THEME_NAME/web/js/App.js:\n\nrequire(['vue', 'js/components/btn'], function (Vue, btn) {\n    btn ();\n\n    new Vue ({\n        el: '#root'\n    });\n});\n\nThis will get the btn component we create it to register it then create our Vue\napp.\n\nTo use the Vue app, create THEME_NAME/Magento_Theme/layouts/default.xml:\n\n<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\">\n    <head>\n        <script src=\"js/App.js\" />\n    </head>\n    <body>\n        <referenceContainer name=\"content\">\n            <block name=\"test-vue\" class=\"Magento\\Framework\\View\\Element\\Template\" template=\"Magento_Theme::test-vue.phtml\" />\n        </referenceContainer>\n    </body>\n</page>\n\nThis will add the App.js script we created to the head of the page, and will add\na new block to the content container. Remember, this is for testing purposes, so\nyou don't need to add it to the default.xml. You can add it to whatever layout\nor page you want.\n\nFinally, create THEME_NAME/Magento_Theme/templates/test-vue.phtml:\n\n<div id=\"root\">\n    <btn text=\"Button\"></btn>\n</div>\n\nThe integration is done. To test it out, first use setup:static-content:deploy \ncommand after clearing the var/cache, var/view_preprocessed, var/page_cache, \ngenerated, and pub/static/frontend directories:\n\nphp bin/magento setup:static-content:deploy -f\n\nRecommended read - Learn how to compile front-end changes in Magento 2 easily: \nHow to Make Your Front-End Development Faster in Magento 2 Using Grunt\n[https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt]\n\nAfter that's done, go to the home page and you should see a button:\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nIn this tutorial, we went over how to integrate some of the famous and widely\nused frameworks and libraries with Magento 2. Hopefully, this will help you\nexpand your Magento 2 development!","html":"<p>Magento is one of the leading e-commerce frameworks. It provides so many features out of the box, making it everything any merchant or seller might need. However, development in Magento can be a hassle, as it is not easy to learn and it's not easy to integrate with some of the leading frontend frameworks or libraries.</p><p>In this tutorial, we'll go over how to use Bootstrap, React, and Vue.js with Magento 2.</p><hr><h3 id=\"prerequisites-create-a-theme\">Prerequisites: Create a Theme</h3><p>This tutorial will add the libraries or frameworks in a new theme. However, if you need to add them to a module it's pretty much the same process.</p><p>If you don't have a theme created, we'll quickly go over how to create a theme. First, create the directory <code>app/design/frontend/VENDOR/THEME_NAME</code> where <code>VENDOR</code> is your own company or your name, and <code>THEME_NAME</code> is the name of the theme.</p><p>Then, in the theme directory create the file <code>theme.xml</code>:</p><pre><code class=\"language-xml\">&lt;theme xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config/etc/theme.xsd\"&gt;\n    &lt;title&gt;THEME_NAME&lt;/title&gt;\n    &lt;parent&gt;Magento/blank&lt;/parent&gt;\n&lt;/theme&gt;\n</code></pre><p>Make sure to change <code>THEME_NAME</code> to the name of your theme. </p><p>Then, create the file <code>registration.php</code>:</p><pre><code class=\"language-php\">&lt;?php\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/VENDOR_NAME/THEME_NAME', __DIR__);\n</code></pre><p>Make sure to change <code>VENDOR_NAME</code> and <code>THEME_NAME</code> accordingly.</p><p>Finally, create <code>composer.json</code>:</p><pre><code class=\"language-json\">{\n    \"name\": \"VENDOR_NAME/THEME_NAME\",\n    \"description\": \"N/A\",\n    \"type\": \"magento2-theme\",\n    \"license\": [\n        \"OSL-3.0\",\n        \"AFL-3.0\"\n    ],\n    \"config\": {\n        \"sort-packages\": true\n    },\n    \"version\": \"100.4.2\",\n    \"require\": {\n        \"php\": \"~7.3.0||~7.4.0\",\n        \"magento/framework\": \"103.0.*\"\n    },\n    \"autoload\": {\n        \"files\": [\n            \"registration.php\"\n        ]\n    }\n}</code></pre><p>Again, make sure to change <code>VENDOR_NAME</code> and <code>THEME_NAME</code> accordingly.</p><p>Now go to your Magento admin and login. Then, go to Content -&gt; Configuration. Click on Edit for the Default Store View. Now, choose your theme from the \"Applied Theme\" dropdown and click Save Configuration.</p><hr><h3 id=\"using-bootstrap-with-magento\">Using Bootstrap with Magento</h3><p>Bootstrap is one of the most famous CSS libraries out there. Bootstrap is used in so many websites that we use every day. Using it makes web development easier, so figuring out how to use it with Magento is useful.</p><p>There's a small difference between using Bootstrap 5 and prior versions. I'll point it out when we get to it.</p><p>First, <a href=\"https://getbootstrap.com/docs/5.0/getting-started/download/\">download Bootstrap</a> with the version you want. If you are downloading Bootstrap v5.x, you need to <a href=\"https://unpkg.com/@popperjs/core@2\">download Popper.js version 2</a>. However, if you are downloading Bootstrap v4.6 or earlier, you need to <a href=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js\">download Popper.js version 1</a>.</p><p>Then, extract the downloaded Bootstrap ZIP. It will have <code>css</code> and <code>js</code> directories. Move <code>css/bootstrap.min.css</code> to your theme directory and place it in <code>THEME_NAME/web/css</code>. Also, move <code>js/bootstrap.min.js</code> to your theme directory and place it in <code>THEME_NAME/web/js</code>. Finally, place <code>popper.min.js</code> that you downloaded in <code>THEME_NAME/web/js</code>.</p><p>Then, in the root of the theme directory create <code>requirejs-config.js</code>. The content will be slightly different depending on the version of Bootstrap you're using.</p><p>If you're using Bootstrap &gt;= 5.0:</p><pre><code class=\"language-js\">var config = {\n    shim:{\n        bootstrap: {\n            deps: ['jquery', '@popperjs/core']\n        }\n    },\n    map: {\n        '*': {\n            bootstrap: 'js/bootstrap.min',\n            '@popperjs/core': 'js/popper.min'\n        }\n    }\n};</code></pre><p>If you're using prior versions:</p><pre><code class=\"language-js\">var config = {\n    shim:{\n        bootstrap: {\n            deps: ['jquery', 'popper.js']\n        }\n    },\n    map: {\n        '*': {\n            bootstrap: 'js/bootstrap.min',\n            'popper.js': 'js/popper.min'\n        }\n    }\n};</code></pre><p>The reason behind the difference is that in Bootstrap 5, <code>bootstrap.min.js</code> requires <code>@popperjs/core</code>, whereas in prior versions <code>bootstrap.min.js</code> requires <code>popper.js</code>.</p><p>If you're not familiar with what <code>requirejs-config.js</code> does, it basically defines the scripts for later use in our theme or module using RequireJS. the <code>map</code> key allows us to define the libraries we want to use under certain keys to refer to them in other places. <code>shim</code> allows defining what the library might depend on. In Bootstrap's case, it depends on jQuery and Popper.js</p><p>The next step is adding the CSS file for Bootstrap in the <code>head</code> tag of our pages. To do that, create in your theme's directory the file <code>Magento_Theme/layout/default_head_block.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\"&gt;\n    &lt;head&gt;\n        &lt;css src=\"css/bootstrap.min.css\" /&gt;\n    &lt;/head&gt;\n&lt;/page&gt;</code></pre><p> Let's test that both the CSS file and JS files are working correctly. Create in your theme's directory the file <code>Magento_Theme/layout/default.xml</code>:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\"&gt;\n    &lt;body&gt;\n        &lt;referenceContainer name=\"content\"&gt;\n            &lt;block name=\"test-bootstrap\" class=\"Magento\\Framework\\View\\Element\\Template\" template=\"Magento_Theme::test-bootstrap.phtml\" /&gt;\n        &lt;/referenceContainer&gt;\n    &lt;/body&gt;\n&lt;/page&gt;</code></pre><p>This will add a block to the content container of our pages. Then, create the file <code>Magento_Theme/templates/test-bootstrap.phtml</code> with the following content:</p><pre><code class=\"language-phtml\">&lt;button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Tooltip on top\"&gt;\n  Hover me\n&lt;/button&gt;\n&lt;script&gt;\n    require(['jquery', 'bootstrap'], function ($) {\n        $('[data-bs-toggle=\"tooltip\"]').tooltip();\n    });\n&lt;/script&gt;</code></pre><p>This will show a button with a tooltip, which will test both Bootstrap and Popper's functionalities.</p><p>The integration with Bootstrap is done now. To test it out, first, use <code>setup:static-content:deploy</code> command after clearing the <code>var/cache</code>, <code>var/view_preprocessed</code>, <code>var/page_cache</code>, <code>generated</code>, and <code>pub/static/frontend</code> directories:</p><pre><code class=\"language-bash\">php bin/magento setup:static-content:deploy -f</code></pre><p><em>Recommended read - Learn how to compile front-end changes in Magento 2 easily: <a href=\"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt\">How to Make Your Front-End Development Faster in Magento 2 Using Grunt</a></em></p><p>If you go now to the home page, you should see a button that will show a tooltip when you hover it.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-4.09.58-PM.png\" class=\"kg-image\" alt loading=\"lazy\"></figure><hr><h3 id=\"using-react-with-magento\">Using React with Magento</h3><p>In this tutorial, we'll cover the easiest way to integrate React with Magento. If you search a little online, you'll find a lot of methods using Grunt and other methods. In this one, we'll show the most basic way to integrate React with Magento 2.</p><p>First, download the production builds for <a href=\"https://unpkg.com/react@17.0.2/umd/react.production.min.js\">React</a> and <a href=\"https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js\">ReactDom</a> and place them in <code>THEME_NAME/web/js</code>. Then, create <code>requirejs-config.js</code>:</p><pre><code class=\"language-js\">var config = {\n    map: {\n        '*': {\n            'react': 'js/react.production.min',\n            'react-dom': 'js/react-dom.production.min'\n        }\n    }\n};</code></pre><p>As mentioned above, <code>require-config.js</code> allows us to define the libraries or frameworks and refer to them by the key specified. </p><p>Let's first create a <code>Button</code> component. Create the file <code>THEME_NAME/web/js/components/Button.js</code> with the following content:</p><pre><code class=\"language-js\">define (['react'], function (React) {\n    var e = React.createElement;\n\n    function Button () {\n        return e('button', null, 'Button');\n    }\n\n    return Button;\n});</code></pre><p>Note that as we're not using <a href=\"https://babeljs.io/\">Babel</a> or <a href=\"https://webpack.js.org/\">Webpack</a>, we can't write components using <a href=\"https://reactjs.org/docs/introducing-jsx.html\">JSX</a>. So, we'll have to use the function <code>React.createElement</code>. For simplicity, we first store it in a new variable:</p><pre><code class=\"language-js\">var e = React.createElement;</code></pre><p>The function takes at least three parameters. The first is the tag name of the element to create, or if you're using a React component you pass the component. The second parameter is either an object of props to pass to the component (for example, <code>{className: 'btn'}</code>) or <code>null</code> for no props. Starting from the third parameter, you can pass children elements each as a parameter to the function.</p><p>Finally, we return the component to be used in other components:</p><pre><code class=\"language-js\">return Button;</code></pre><p>Now, we'll create the main component <code>App</code> that will render other components. Create <code>THEME_NAME/web/js/App.js</code>:</p><pre><code class=\"language-js\">require(['react', 'react-dom', 'js/components/Button'], function (React, ReactDom, Button) {\n    var e = React.createElement;\n\n    function App () {\n        return e('div', null, e(Button));\n    }\n\n    ReactDom.render(e(App), document.getElementById('root'))\n});</code></pre><p>Note that we assigned <code>React.createElement</code> to a new variable <code>e</code>. Then, in the <code>App</code> component we're rendering a <code>div</code> element that has <code>Button</code> as a child component:</p><pre><code class=\"language-js\">return e('div', null, e(Button));</code></pre><p>Notice that in order to use the <code>Button</code> component, in the first parameter of <code>require</code> we passed in the array <code>js/components/Button</code>, which is the path of the component. If you want to reference the components in an easier manner, you can add them to the <code>map</code> object in <code>requirejs-config.js</code>:</p><pre><code class=\"language-js\">map: {\n    '*': {\n        //...\n        'Button': 'js/components/Button'\n    }\n}</code></pre><p>Then, in the <code>require</code> function when you want to use the <code>Button</code> component:</p><pre><code class=\"language-js\">require([..., 'Button'], ...)</code></pre><p>Let's use the components we created. Create <code>Magento_Theme/layout/default.xml</code> with the following content:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\"&gt;\n    &lt;head&gt;\n        &lt;script src=\"js/App.js\" /&gt;\n    &lt;/head&gt;\n    &lt;body&gt;\n        &lt;referenceContainer name=\"content\"&gt;\n            &lt;block name=\"test-react\" class=\"Magento\\Framework\\View\\Element\\Template\" template=\"Magento_Theme::test-react.phtml\" /&gt;\n        &lt;/referenceContainer&gt;\n    &lt;/body&gt;\n&lt;/page&gt;</code></pre><p>We're loading <code>js/App.js</code> in the head of the page, and we're adding a new block in the <code>content</code> container. Remember, this is for testing purposes, so you don't need to add it to the <code>default.xml</code>. You can add it to whatever layout or page you want.</p><p>Next, create <code>Magento_Theme/templates/test-react.phtml</code>:</p><pre><code class=\"language-phtml\">&lt;div id=\"root\"&gt;&lt;/div&gt;</code></pre><p>The integration is done. To test it out, first use <code>setup:static-content:deploy</code> command after clearing the <code>var/cache</code>, <code>var/view_preprocessed</code>, <code>var/page_cache</code>, <code>generated</code>, and <code>pub/static/frontend</code> directories:</p><pre><code class=\"language-bash\">php bin/magento setup:static-content:deploy -f</code></pre><p><em>Recommended read - Learn how to compile front-end changes in Magento 2 easily: <a href=\"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt\">How to Make Your Front-End Development Faster in Magento 2 Using Grunt</a></em></p><p>After that's done, go to the home page and you should see a button:</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-4.38.09-PM.png\" class=\"kg-image\" alt loading=\"lazy\"></figure><hr><h3 id=\"using-vue-with-magento\">Using Vue with Magento</h3><p>Vue is another popular Javascript framework. Integrating it with Magento is pretty easy.</p><p>First, download the latest version of Vue, either <a href=\"https://vuejs.org/js/vue.js\">development</a> or <a href=\"https://vuejs.org/js/vue.min.js\">production</a>. Once it downloads, place the JS file in <code>THEME_NAME/web/js</code>.</p><p>Next, create <code>requirejs-config.js</code> with the following content:</p><pre><code class=\"language-js\">var config = {\n    map: {\n        '*': {\n            'vue': 'js/vue.min',\n        }\n    }\n};</code></pre><p>And with that, we're ready to use Vue!</p><p>Let's create a <code>btn</code> component. Create the file <code>THEME_NAME/web/js/components/Btn.js</code>:</p><pre><code class=\"language-js\">define(['vue'], function (Vue) {\n    return function () {\n        Vue.component('btn', {\n            props: ['text'],\n            template: '&lt;button&gt;{{ text }}&lt;/button&gt;'\n        });\n    }\n});</code></pre><p>This will create the <code>btn</code> component. Next, create <code>THEME_NAME/web/js/App.js</code>:</p><pre><code class=\"language-js\">require(['vue', 'js/components/btn'], function (Vue, btn) {\n    btn ();\n\n    new Vue ({\n        el: '#root'\n    });\n});</code></pre><p>This will get the <code>btn</code> component we create it to register it then create our Vue app.</p><p>To use the Vue app, create <code>THEME_NAME/Magento_Theme/layouts/default.xml</code>:</p><pre><code class=\"language-xml\">&lt;?xml version=\"1.0\"?&gt;\n&lt;page xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View/Layout/etc/page_configuration.xsd\"&gt;\n    &lt;head&gt;\n        &lt;script src=\"js/App.js\" /&gt;\n    &lt;/head&gt;\n    &lt;body&gt;\n        &lt;referenceContainer name=\"content\"&gt;\n            &lt;block name=\"test-vue\" class=\"Magento\\Framework\\View\\Element\\Template\" template=\"Magento_Theme::test-vue.phtml\" /&gt;\n        &lt;/referenceContainer&gt;\n    &lt;/body&gt;\n&lt;/page&gt;</code></pre><p>This will add the <code>App.js</code> script we created to the <code>head</code> of the page, and will add a new block to the content container. Remember, this is for testing purposes, so you don't need to add it to the <code>default.xml</code>. You can add it to whatever layout or page you want.</p><p>Finally, create <code>THEME_NAME/Magento_Theme/templates/test-vue.phtml</code>:</p><pre><code class=\"language-phtml\">&lt;div id=\"root\"&gt;\n    &lt;btn text=\"Button\"&gt;&lt;/btn&gt;\n&lt;/div&gt;</code></pre><p>The integration is done. To test it out, first use <code>setup:static-content:deploy</code> command after clearing the <code>var/cache</code>, <code>var/view_preprocessed</code>, <code>var/page_cache</code>, <code>generated</code>, and <code>pub/static/frontend</code> directories:</p><pre><code class=\"language-bash\">php bin/magento setup:static-content:deploy -f</code></pre><p><em>Recommended read - Learn how to compile front-end changes in Magento 2 easily: <a href=\"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt\">How to Make Your Front-End Development Faster in Magento 2 Using Grunt</a></em></p><p>After that's done, go to the home page and you should see a button:</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-5.08.48-PM.png\" class=\"kg-image\" alt loading=\"lazy\"></figure><hr><h3 id=\"conclusion\">Conclusion</h3><p>In this tutorial, we went over how to integrate some of the famous and widely used frameworks and libraries with Magento 2. Hopefully, this will help you expand your Magento 2 development!</p>","url":"https://backend.shahednasser.com/how-to-use-magento-with-bootstrap-react-and-vue-js/","canonical_url":null,"uuid":"01123eb9-4f22-4e17-bbb7-01e08a4aa88b","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"60e055beec756a001e8df560","reading_time":8,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>Magento is one of the leading e-commerce frameworks. It provides so many features out of the box, making it everything any merchant or seller might need. However, development in Magento can be a hassle, as it is not easy to learn and it's not easy to integrate with some of the leading frontend frameworks or libraries.</p><p>In this tutorial, we'll go over how to use Bootstrap, React, and Vue.js with Magento 2.</p><hr><h3 id=\"prerequisites-create-a-theme\">Prerequisites: Create a Theme</h3><p>This tutorial will add the libraries or frameworks in a new theme. However, if you need to add them to a module it's pretty much the same process.</p><p>If you don't have a theme created, we'll quickly go over how to create a theme. First, create the directory <code class=\"language-text\">app/design/frontend/VENDOR/THEME_NAME</code> where <code class=\"language-text\">VENDOR</code> is your own company or your name, and <code class=\"language-text\">THEME_NAME</code> is the name of the theme.</p><p>Then, in the theme directory create the file <code class=\"language-text\">theme.xml</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>theme</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:Config/etc/theme.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>title</span><span class=\"token punctuation\">></span></span>THEME_NAME<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>title</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>parent</span><span class=\"token punctuation\">></span></span>Magento/blank<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>parent</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>theme</span><span class=\"token punctuation\">></span></span>\n</code></pre></div><p>Make sure to change <code class=\"language-text\">THEME_NAME</code> to the name of your theme. </p><p>Then, create the file <code class=\"language-text\">registration.php</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"php\"><pre class=\"language-php\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&#x3C;?php</span>\n<span class=\"token keyword\">use</span> <span class=\"token package\">Magento<span class=\"token punctuation\">\\</span>Framework<span class=\"token punctuation\">\\</span>Component<span class=\"token punctuation\">\\</span>ComponentRegistrar</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token class-name static-context\">ComponentRegistrar</span><span class=\"token operator\">::</span><span class=\"token function\">register</span><span class=\"token punctuation\">(</span><span class=\"token class-name static-context\">ComponentRegistrar</span><span class=\"token operator\">::</span><span class=\"token constant\">THEME</span><span class=\"token punctuation\">,</span> <span class=\"token string single-quoted-string\">'frontend/VENDOR_NAME/THEME_NAME'</span><span class=\"token punctuation\">,</span> <span class=\"token constant\">__DIR__</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</span></code></pre></div><p>Make sure to change <code class=\"language-text\">VENDOR_NAME</code> and <code class=\"language-text\">THEME_NAME</code> accordingly.</p><p>Finally, create <code class=\"language-text\">composer.json</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n    <span class=\"token property\">\"name\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"VENDOR_NAME/THEME_NAME\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"description\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"N/A\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"magento2-theme\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"license\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token string\">\"OSL-3.0\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">\"AFL-3.0\"</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"config\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"sort-packages\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"version\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"100.4.2\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"require\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"php\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"~7.3.0||~7.4.0\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"magento/framework\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"103.0.*\"</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"autoload\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"files\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n            <span class=\"token string\">\"registration.php\"</span>\n        <span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div><p>Again, make sure to change <code class=\"language-text\">VENDOR_NAME</code> and <code class=\"language-text\">THEME_NAME</code> accordingly.</p><p>Now go to your Magento admin and login. Then, go to Content -> Configuration. Click on Edit for the Default Store View. Now, choose your theme from the \"Applied Theme\" dropdown and click Save Configuration.</p><hr><h3 id=\"using-bootstrap-with-magento\">Using Bootstrap with Magento</h3><p>Bootstrap is one of the most famous CSS libraries out there. Bootstrap is used in so many websites that we use every day. Using it makes web development easier, so figuring out how to use it with Magento is useful.</p><p>There's a small difference between using Bootstrap 5 and prior versions. I'll point it out when we get to it.</p><p>First, <a href=\"https://getbootstrap.com/docs/5.0/getting-started/download/\">download Bootstrap</a> with the version you want. If you are downloading Bootstrap v5.x, you need to <a href=\"https://unpkg.com/@popperjs/core@2\">download Popper.js version 2</a>. However, if you are downloading Bootstrap v4.6 or earlier, you need to <a href=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js\">download Popper.js version 1</a>.</p><p>Then, extract the downloaded Bootstrap ZIP. It will have <code class=\"language-text\">css</code> and <code class=\"language-text\">js</code> directories. Move <code class=\"language-text\">css/bootstrap.min.css</code> to your theme directory and place it in <code class=\"language-text\">THEME_NAME/web/css</code>. Also, move <code class=\"language-text\">js/bootstrap.min.js</code> to your theme directory and place it in <code class=\"language-text\">THEME_NAME/web/js</code>. Finally, place <code class=\"language-text\">popper.min.js</code> that you downloaded in <code class=\"language-text\">THEME_NAME/web/js</code>.</p><p>Then, in the root of the theme directory create <code class=\"language-text\">requirejs-config.js</code>. The content will be slightly different depending on the version of Bootstrap you're using.</p><p>If you're using Bootstrap >= 5.0:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">var</span> config <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">shim</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">bootstrap</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">deps</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'jquery'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'@popperjs/core'</span><span class=\"token punctuation\">]</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">map</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token string-property property\">'*'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">bootstrap</span><span class=\"token operator\">:</span> <span class=\"token string\">'js/bootstrap.min'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string-property property\">'@popperjs/core'</span><span class=\"token operator\">:</span> <span class=\"token string\">'js/popper.min'</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div><p>If you're using prior versions:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">var</span> config <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">shim</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">bootstrap</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">deps</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'jquery'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'popper.js'</span><span class=\"token punctuation\">]</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">map</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token string-property property\">'*'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">bootstrap</span><span class=\"token operator\">:</span> <span class=\"token string\">'js/bootstrap.min'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string-property property\">'popper.js'</span><span class=\"token operator\">:</span> <span class=\"token string\">'js/popper.min'</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div><p>The reason behind the difference is that in Bootstrap 5, <code class=\"language-text\">bootstrap.min.js</code> requires <code class=\"language-text\">@popperjs/core</code>, whereas in prior versions <code class=\"language-text\">bootstrap.min.js</code> requires <code class=\"language-text\">popper.js</code>.</p><p>If you're not familiar with what <code class=\"language-text\">requirejs-config.js</code> does, it basically defines the scripts for later use in our theme or module using RequireJS. the <code class=\"language-text\">map</code> key allows us to define the libraries we want to use under certain keys to refer to them in other places. <code class=\"language-text\">shim</code> allows defining what the library might depend on. In Bootstrap's case, it depends on jQuery and Popper.js</p><p>The next step is adding the CSS file for Bootstrap in the <code class=\"language-text\">head</code> tag of our pages. To do that, create in your theme's directory the file <code class=\"language-text\">Magento_Theme/layout/default_head_block.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>page</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:View/Layout/etc/page_configuration.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>head</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>css</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>css/bootstrap.min.css<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>head</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>page</span><span class=\"token punctuation\">></span></span></code></pre></div><p> Let's test that both the CSS file and JS files are working correctly. Create in your theme's directory the file <code class=\"language-text\">Magento_Theme/layout/default.xml</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>page</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:View/Layout/etc/page_configuration.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>body</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceContainer</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>content<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>block</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>test-bootstrap<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento\\Framework\\View\\Element\\Template<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">template</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento_Theme::test-bootstrap.phtml<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>referenceContainer</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>page</span><span class=\"token punctuation\">></span></span></code></pre></div><p>This will add a block to the content container of our pages. Then, create the file <code class=\"language-text\">Magento_Theme/templates/test-bootstrap.phtml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"phtml\"><pre class=\"language-phtml\"><code class=\"language-phtml\">&#x3C;button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Tooltip on top\">\n  Hover me\n&#x3C;/button>\n&#x3C;script>\n    require(['jquery', 'bootstrap'], function ($) {\n        $('[data-bs-toggle=\"tooltip\"]').tooltip();\n    });\n&#x3C;/script></code></pre></div><p>This will show a button with a tooltip, which will test both Bootstrap and Popper's functionalities.</p><p>The integration with Bootstrap is done now. To test it out, first, use <code class=\"language-text\">setup:static-content:deploy</code> command after clearing the <code class=\"language-text\">var/cache</code>, <code class=\"language-text\">var/view_preprocessed</code>, <code class=\"language-text\">var/page_cache</code>, <code class=\"language-text\">generated</code>, and <code class=\"language-text\">pub/static/frontend</code> directories:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">php bin/magento setup:static-content:deploy -f</code></pre></div><p><em>Recommended read - Learn how to compile front-end changes in Magento 2 easily: <a href=\"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt\">How to Make Your Front-End Development Faster in Magento 2 Using Grunt</a></em></p><p>If you go now to the home page, you should see a button that will show a tooltip when you hover it.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-4.09.58-PM.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\"></figure><hr><h3 id=\"using-react-with-magento\">Using React with Magento</h3><p>In this tutorial, we'll cover the easiest way to integrate React with Magento. If you search a little online, you'll find a lot of methods using Grunt and other methods. In this one, we'll show the most basic way to integrate React with Magento 2.</p><p>First, download the production builds for <a href=\"https://unpkg.com/react@17.0.2/umd/react.production.min.js\">React</a> and <a href=\"https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js\">ReactDom</a> and place them in <code class=\"language-text\">THEME_NAME/web/js</code>. Then, create <code class=\"language-text\">requirejs-config.js</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">var</span> config <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">map</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token string-property property\">'*'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token string-property property\">'react'</span><span class=\"token operator\">:</span> <span class=\"token string\">'js/react.production.min'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string-property property\">'react-dom'</span><span class=\"token operator\">:</span> <span class=\"token string\">'js/react-dom.production.min'</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div><p>As mentioned above, <code class=\"language-text\">require-config.js</code> allows us to define the libraries or frameworks and refer to them by the key specified. </p><p>Let's first create a <code class=\"language-text\">Button</code> component. Create the file <code class=\"language-text\">THEME_NAME/web/js/components/Button.js</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">define</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'react'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">React</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> e <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span>createElement<span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">function</span> <span class=\"token function\">Button</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token function\">e</span><span class=\"token punctuation\">(</span><span class=\"token string\">'button'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Button'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">return</span> Button<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><p>Note that as we're not using <a href=\"https://babeljs.io/\">Babel</a> or <a href=\"https://webpack.js.org/\">Webpack</a>, we can't write components using <a href=\"https://reactjs.org/docs/introducing-jsx.html\">JSX</a>. So, we'll have to use the function <code class=\"language-text\">React.createElement</code>. For simplicity, we first store it in a new variable:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">var</span> e <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span>createElement<span class=\"token punctuation\">;</span></code></pre></div><p>The function takes at least three parameters. The first is the tag name of the element to create, or if you're using a React component you pass the component. The second parameter is either an object of props to pass to the component (for example, <code class=\"language-text\">{className: 'btn'}</code>) or <code class=\"language-text\">null</code> for no props. Starting from the third parameter, you can pass children elements each as a parameter to the function.</p><p>Finally, we return the component to be used in other components:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">return</span> Button<span class=\"token punctuation\">;</span></code></pre></div><p>Now, we'll create the main component <code class=\"language-text\">App</code> that will render other components. Create <code class=\"language-text\">THEME_NAME/web/js/App.js</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'react'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'react-dom'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'js/components/Button'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">React<span class=\"token punctuation\">,</span> ReactDom<span class=\"token punctuation\">,</span> Button</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> e <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span>createElement<span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">function</span> <span class=\"token function\">App</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token function\">e</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span> <span class=\"token function\">e</span><span class=\"token punctuation\">(</span>Button<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    ReactDom<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token function\">e</span><span class=\"token punctuation\">(</span>App<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'root'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><p>Note that we assigned <code class=\"language-text\">React.createElement</code> to a new variable <code class=\"language-text\">e</code>. Then, in the <code class=\"language-text\">App</code> component we're rendering a <code class=\"language-text\">div</code> element that has <code class=\"language-text\">Button</code> as a child component:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">return</span> <span class=\"token function\">e</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span> <span class=\"token function\">e</span><span class=\"token punctuation\">(</span>Button<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><p>Notice that in order to use the <code class=\"language-text\">Button</code> component, in the first parameter of <code class=\"language-text\">require</code> we passed in the array <code class=\"language-text\">js/components/Button</code>, which is the path of the component. If you want to reference the components in an easier manner, you can add them to the <code class=\"language-text\">map</code> object in <code class=\"language-text\">requirejs-config.js</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token literal-property property\">map</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string-property property\">'*'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">//...</span>\n        <span class=\"token string-property property\">'Button'</span><span class=\"token operator\">:</span> <span class=\"token string\">'js/components/Button'</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div><p>Then, in the <code class=\"language-text\">require</code> function when you want to use the <code class=\"language-text\">Button</code> component:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Button'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span><span class=\"token punctuation\">)</span></code></pre></div><p>Let's use the components we created. Create <code class=\"language-text\">Magento_Theme/layout/default.xml</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>page</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:View/Layout/etc/page_configuration.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>head</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>js/App.js<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>head</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>body</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceContainer</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>content<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>block</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>test-react<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento\\Framework\\View\\Element\\Template<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">template</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento_Theme::test-react.phtml<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>referenceContainer</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>page</span><span class=\"token punctuation\">></span></span></code></pre></div><p>We're loading <code class=\"language-text\">js/App.js</code> in the head of the page, and we're adding a new block in the <code class=\"language-text\">content</code> container. Remember, this is for testing purposes, so you don't need to add it to the <code class=\"language-text\">default.xml</code>. You can add it to whatever layout or page you want.</p><p>Next, create <code class=\"language-text\">Magento_Theme/templates/test-react.phtml</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"phtml\"><pre class=\"language-phtml\"><code class=\"language-phtml\">&#x3C;div id=\"root\">&#x3C;/div></code></pre></div><p>The integration is done. To test it out, first use <code class=\"language-text\">setup:static-content:deploy</code> command after clearing the <code class=\"language-text\">var/cache</code>, <code class=\"language-text\">var/view_preprocessed</code>, <code class=\"language-text\">var/page_cache</code>, <code class=\"language-text\">generated</code>, and <code class=\"language-text\">pub/static/frontend</code> directories:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">php bin/magento setup:static-content:deploy -f</code></pre></div><p><em>Recommended read - Learn how to compile front-end changes in Magento 2 easily: <a href=\"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt\">How to Make Your Front-End Development Faster in Magento 2 Using Grunt</a></em></p><p>After that's done, go to the home page and you should see a button:</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-4.38.09-PM.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\"></figure><hr><h3 id=\"using-vue-with-magento\">Using Vue with Magento</h3><p>Vue is another popular Javascript framework. Integrating it with Magento is pretty easy.</p><p>First, download the latest version of Vue, either <a href=\"https://vuejs.org/js/vue.js\">development</a> or <a href=\"https://vuejs.org/js/vue.min.js\">production</a>. Once it downloads, place the JS file in <code class=\"language-text\">THEME_NAME/web/js</code>.</p><p>Next, create <code class=\"language-text\">requirejs-config.js</code> with the following content:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">var</span> config <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">map</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token string-property property\">'*'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token string-property property\">'vue'</span><span class=\"token operator\">:</span> <span class=\"token string\">'js/vue.min'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div><p>And with that, we're ready to use Vue!</p><p>Let's create a <code class=\"language-text\">btn</code> component. Create the file <code class=\"language-text\">THEME_NAME/web/js/components/Btn.js</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">define</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'vue'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">Vue</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        Vue<span class=\"token punctuation\">.</span><span class=\"token function\">component</span><span class=\"token punctuation\">(</span><span class=\"token string\">'btn'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">props</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'text'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> <span class=\"token string\">'&#x3C;button>{{ text }}&#x3C;/button>'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><p>This will create the <code class=\"language-text\">btn</code> component. Next, create <code class=\"language-text\">THEME_NAME/web/js/App.js</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'vue'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'js/components/btn'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">Vue<span class=\"token punctuation\">,</span> btn</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">btn</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">el</span><span class=\"token operator\">:</span> <span class=\"token string\">'#root'</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><p>This will get the <code class=\"language-text\">btn</code> component we create it to register it then create our Vue app.</p><p>To use the Vue app, create <code class=\"language-text\">THEME_NAME/Magento_Theme/layouts/default.xml</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"xml\"><pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token prolog\">&#x3C;?xml version=\"1.0\"?></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>page</span> <span class=\"token attr-name\"><span class=\"token namespace\">xmlns:</span>xsi</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2001/XMLSchema-instance<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\"><span class=\"token namespace\">xsi:</span>noNamespaceSchemaLocation</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>urn:magento:framework:View/Layout/etc/page_configuration.xsd<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>head</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>js/App.js<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>head</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>body</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>referenceContainer</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>content<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>block</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>test-vue<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento\\Framework\\View\\Element\\Template<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">template</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>Magento_Theme::test-vue.phtml<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>referenceContainer</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>page</span><span class=\"token punctuation\">></span></span></code></pre></div><p>This will add the <code class=\"language-text\">App.js</code> script we created to the <code class=\"language-text\">head</code> of the page, and will add a new block to the content container. Remember, this is for testing purposes, so you don't need to add it to the <code class=\"language-text\">default.xml</code>. You can add it to whatever layout or page you want.</p><p>Finally, create <code class=\"language-text\">THEME_NAME/Magento_Theme/templates/test-vue.phtml</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"phtml\"><pre class=\"language-phtml\"><code class=\"language-phtml\">&#x3C;div id=\"root\">\n    &#x3C;btn text=\"Button\">&#x3C;/btn>\n&#x3C;/div></code></pre></div><p>The integration is done. To test it out, first use <code class=\"language-text\">setup:static-content:deploy</code> command after clearing the <code class=\"language-text\">var/cache</code>, <code class=\"language-text\">var/view_preprocessed</code>, <code class=\"language-text\">var/page_cache</code>, <code class=\"language-text\">generated</code>, and <code class=\"language-text\">pub/static/frontend</code> directories:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">php bin/magento setup:static-content:deploy -f</code></pre></div><p><em>Recommended read - Learn how to compile front-end changes in Magento 2 easily: <a href=\"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt\">How to Make Your Front-End Development Faster in Magento 2 Using Grunt</a></em></p><p>After that's done, go to the home page and you should see a button:</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-5.08.48-PM.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\"></figure><hr><h3 id=\"conclusion\">Conclusion</h3><p>In this tutorial, we went over how to integrate some of the famous and widely used frameworks and libraries with Magento 2. Hopefully, this will help you expand your Magento 2 development!</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Magento is one of the leading e-commerce frameworks. It provides so many features out of the box, making it everything any merchant or seller might need. However, development in Magento can be a hassle, as it is not easy to learn and it's not easy to integrate with some of the leading frontend frameworks or libraries."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, we'll go over how to use Bootstrap, React, and Vue.js with Magento 2."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"prerequisites-create-a-theme"},"children":[{"type":"text","value":"Prerequisites: Create a Theme"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This tutorial will add the libraries or frameworks in a new theme. However, if you need to add them to a module it's pretty much the same process."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you don't have a theme created, we'll quickly go over how to create a theme. First, create the directory "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app/design/frontend/VENDOR/THEME_NAME"}]},{"type":"text","value":" where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR"}]},{"type":"text","value":" is your own company or your name, and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME"}]},{"type":"text","value":" is the name of the theme."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, in the theme directory create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"theme.xml"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"theme"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:Config/etc/theme.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"title"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"THEME_NAME"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"title"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"Magento/blank"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"parent"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"theme"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Make sure to change "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME"}]},{"type":"text","value":" to the name of your theme. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"registration.php"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","php","language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","delimiter","important"]},"children":[{"type":"text","value":"<?php"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","package"]},"children":[{"type":"text","value":"Magento"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Framework"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Component"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"ComponentRegistrar"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"ComponentRegistrar"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"register"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"ComponentRegistrar"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"THEME"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'frontend/VENDOR_NAME/THEME_NAME'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"__DIR__"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Make sure to change "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR_NAME"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME"}]},{"type":"text","value":" accordingly."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"composer.json"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"json"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-json"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-json"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"name\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"VENDOR_NAME/THEME_NAME\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"description\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"N/A\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"type\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"magento2-theme\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"license\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"OSL-3.0\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"AFL-3.0\""}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"config\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"sort-packages\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"version\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"100.4.2\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"require\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"php\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~7.3.0||~7.4.0\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"magento/framework\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"103.0.*\""}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"autoload\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"files\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"registration.php\""}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Again, make sure to change "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"VENDOR_NAME"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME"}]},{"type":"text","value":" accordingly."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now go to your Magento admin and login. Then, go to Content -> Configuration. Click on Edit for the Default Store View. Now, choose your theme from the \"Applied Theme\" dropdown and click Save Configuration."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"using-bootstrap-with-magento"},"children":[{"type":"text","value":"Using Bootstrap with Magento"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bootstrap is one of the most famous CSS libraries out there. Bootstrap is used in so many websites that we use every day. Using it makes web development easier, so figuring out how to use it with Magento is useful."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There's a small difference between using Bootstrap 5 and prior versions. I'll point it out when we get to it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, "},{"type":"element","tagName":"a","properties":{"href":"https://getbootstrap.com/docs/5.0/getting-started/download/"},"children":[{"type":"text","value":"download Bootstrap"}]},{"type":"text","value":" with the version you want. If you are downloading Bootstrap v5.x, you need to "},{"type":"element","tagName":"a","properties":{"href":"https://unpkg.com/@popperjs/core@2"},"children":[{"type":"text","value":"download Popper.js version 2"}]},{"type":"text","value":". However, if you are downloading Bootstrap v4.6 or earlier, you need to "},{"type":"element","tagName":"a","properties":{"href":"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"},"children":[{"type":"text","value":"download Popper.js version 1"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, extract the downloaded Bootstrap ZIP. It will have "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"css"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"js"}]},{"type":"text","value":" directories. Move "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"css/bootstrap.min.css"}]},{"type":"text","value":" to your theme directory and place it in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/css"}]},{"type":"text","value":". Also, move "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"js/bootstrap.min.js"}]},{"type":"text","value":" to your theme directory and place it in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/js"}]},{"type":"text","value":". Finally, place "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"popper.min.js"}]},{"type":"text","value":" that you downloaded in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/js"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, in the root of the theme directory create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"requirejs-config.js"}]},{"type":"text","value":". The content will be slightly different depending on the version of Bootstrap you're using."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're using Bootstrap >= 5.0:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" config "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"shim"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"bootstrap"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"deps"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'jquery'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'@popperjs/core'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"map"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'*'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"bootstrap"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/bootstrap.min'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'@popperjs/core'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/popper.min'"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're using prior versions:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" config "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"shim"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"bootstrap"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"deps"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'jquery'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'popper.js'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"map"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'*'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"bootstrap"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/bootstrap.min'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'popper.js'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/popper.min'"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The reason behind the difference is that in Bootstrap 5, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"bootstrap.min.js"}]},{"type":"text","value":" requires "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"@popperjs/core"}]},{"type":"text","value":", whereas in prior versions "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"bootstrap.min.js"}]},{"type":"text","value":" requires "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"popper.js"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're not familiar with what "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"requirejs-config.js"}]},{"type":"text","value":" does, it basically defines the scripts for later use in our theme or module using RequireJS. the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"map"}]},{"type":"text","value":" key allows us to define the libraries we want to use under certain keys to refer to them in other places. "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"shim"}]},{"type":"text","value":" allows defining what the library might depend on. In Bootstrap's case, it depends on jQuery and Popper.js"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The next step is adding the CSS file for Bootstrap in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"head"}]},{"type":"text","value":" tag of our pages. To do that, create in your theme's directory the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento_Theme/layout/default_head_block.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"page"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:View/Layout/etc/page_configuration.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"css"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"src"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"css/bootstrap.min.css"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"page"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" Let's test that both the CSS file and JS files are working correctly. Create in your theme's directory the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento_Theme/layout/default.xml"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"page"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:View/Layout/etc/page_configuration.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceContainer"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"block"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"test-bootstrap"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento\\Framework\\View\\Element\\Template"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"template"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento_Theme::test-bootstrap.phtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"referenceContainer"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"page"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will add a block to the content container of our pages. Then, create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento_Theme/templates/test-bootstrap.phtml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"phtml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-phtml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-phtml"]},"children":[{"type":"text","value":"<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Tooltip on top\">\n  Hover me\n</button>\n<script>\n    require(['jquery', 'bootstrap'], function ($) {\n        $('[data-bs-toggle=\"tooltip\"]').tooltip();\n    });\n</script>"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will show a button with a tooltip, which will test both Bootstrap and Popper's functionalities."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The integration with Bootstrap is done now. To test it out, first, use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setup:static-content:deploy"}]},{"type":"text","value":" command after clearing the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/cache"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/view_preprocessed"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/page_cache"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"generated"}]},{"type":"text","value":", and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"pub/static/frontend"}]},{"type":"text","value":" directories:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"php bin/magento setup:static-content:deploy -f"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Recommended read - Learn how to compile front-end changes in Magento 2 easily: "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt"},"children":[{"type":"text","value":"How to Make Your Front-End Development Faster in Magento 2 Using Grunt"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you go now to the home page, you should see a button that will show a tooltip when you hover it."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-4.09.58-PM.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"using-react-with-magento"},"children":[{"type":"text","value":"Using React with Magento"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, we'll cover the easiest way to integrate React with Magento. If you search a little online, you'll find a lot of methods using Grunt and other methods. In this one, we'll show the most basic way to integrate React with Magento 2."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, download the production builds for "},{"type":"element","tagName":"a","properties":{"href":"https://unpkg.com/react@17.0.2/umd/react.production.min.js"},"children":[{"type":"text","value":"React"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"},"children":[{"type":"text","value":"ReactDom"}]},{"type":"text","value":" and place them in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/js"}]},{"type":"text","value":". Then, create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"requirejs-config.js"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" config "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"map"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'*'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/react.production.min'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'react-dom'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/react-dom.production.min'"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As mentioned above, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"require-config.js"}]},{"type":"text","value":" allows us to define the libraries or frameworks and refer to them by the key specified. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's first create a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Button"}]},{"type":"text","value":" component. Create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/js/components/Button.js"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"define"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"React"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" e "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"createElement"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"Button"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'button'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Button'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" Button"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that as we're not using "},{"type":"element","tagName":"a","properties":{"href":"https://babeljs.io/"},"children":[{"type":"text","value":"Babel"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"https://webpack.js.org/"},"children":[{"type":"text","value":"Webpack"}]},{"type":"text","value":", we can't write components using "},{"type":"element","tagName":"a","properties":{"href":"https://reactjs.org/docs/introducing-jsx.html"},"children":[{"type":"text","value":"JSX"}]},{"type":"text","value":". So, we'll have to use the function "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"React.createElement"}]},{"type":"text","value":". For simplicity, we first store it in a new variable:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" e "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"createElement"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The function takes at least three parameters. The first is the tag name of the element to create, or if you're using a React component you pass the component. The second parameter is either an object of props to pass to the component (for example, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"{className: 'btn'}"}]},{"type":"text","value":") or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" for no props. Starting from the third parameter, you can pass children elements each as a parameter to the function."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, we return the component to be used in other components:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" Button"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we'll create the main component "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"App"}]},{"type":"text","value":" that will render other components. Create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/js/App.js"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"require"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react-dom'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/components/Button'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" ReactDom"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" Button"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" e "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"createElement"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"App"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'div'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"Button"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n    ReactDom"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"render"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'root'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that we assigned "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"React.createElement"}]},{"type":"text","value":" to a new variable "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"e"}]},{"type":"text","value":". Then, in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"App"}]},{"type":"text","value":" component we're rendering a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"div"}]},{"type":"text","value":" element that has "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Button"}]},{"type":"text","value":" as a child component:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'div'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"Button"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that in order to use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Button"}]},{"type":"text","value":" component, in the first parameter of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"require"}]},{"type":"text","value":" we passed in the array "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"js/components/Button"}]},{"type":"text","value":", which is the path of the component. If you want to reference the components in an easier manner, you can add them to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"map"}]},{"type":"text","value":" object in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"requirejs-config.js"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"map"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'*'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//..."}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'Button'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/components/Button'"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"require"}]},{"type":"text","value":" function when you want to use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Button"}]},{"type":"text","value":" component:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"require"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Button'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's use the components we created. Create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento_Theme/layout/default.xml"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"page"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:View/Layout/etc/page_configuration.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"script"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"src"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"js/App.js"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceContainer"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"block"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"test-react"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento\\Framework\\View\\Element\\Template"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"template"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento_Theme::test-react.phtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"referenceContainer"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"page"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We're loading "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"js/App.js"}]},{"type":"text","value":" in the head of the page, and we're adding a new block in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"content"}]},{"type":"text","value":" container. Remember, this is for testing purposes, so you don't need to add it to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"default.xml"}]},{"type":"text","value":". You can add it to whatever layout or page you want."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Magento_Theme/templates/test-react.phtml"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"phtml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-phtml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-phtml"]},"children":[{"type":"text","value":"<div id=\"root\"></div>"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The integration is done. To test it out, first use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setup:static-content:deploy"}]},{"type":"text","value":" command after clearing the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/cache"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/view_preprocessed"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/page_cache"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"generated"}]},{"type":"text","value":", and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"pub/static/frontend"}]},{"type":"text","value":" directories:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"php bin/magento setup:static-content:deploy -f"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Recommended read - Learn how to compile front-end changes in Magento 2 easily: "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt"},"children":[{"type":"text","value":"How to Make Your Front-End Development Faster in Magento 2 Using Grunt"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After that's done, go to the home page and you should see a button:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-4.38.09-PM.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"using-vue-with-magento"},"children":[{"type":"text","value":"Using Vue with Magento"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vue is another popular Javascript framework. Integrating it with Magento is pretty easy."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, download the latest version of Vue, either "},{"type":"element","tagName":"a","properties":{"href":"https://vuejs.org/js/vue.js"},"children":[{"type":"text","value":"development"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"https://vuejs.org/js/vue.min.js"},"children":[{"type":"text","value":"production"}]},{"type":"text","value":". Once it downloads, place the JS file in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/js"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"requirejs-config.js"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" config "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"map"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'*'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/vue.min'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And with that, we're ready to use Vue!"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's create a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"btn"}]},{"type":"text","value":" component. Create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/js/components/Btn.js"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"define"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"Vue"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        Vue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"component"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'btn'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"props"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'text'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"template"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'<button>{{ text }}</button>'"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will create the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"btn"}]},{"type":"text","value":" component. Next, create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/web/js/App.js"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"require"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'js/components/btn'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"Vue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" btn"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"btn"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"Vue"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"el"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'#root'"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will get the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"btn"}]},{"type":"text","value":" component we create it to register it then create our Vue app."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To use the Vue app, create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/Magento_Theme/layouts/default.xml"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prolog"]},"children":[{"type":"text","value":"<?xml version=\"1.0\"?>"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"page"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xmlns:"}]},{"type":"text","value":"xsi"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"http://www.w3.org/2001/XMLSchema-instance"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","namespace"]},"children":[{"type":"text","value":"xsi:"}]},{"type":"text","value":"noNamespaceSchemaLocation"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"urn:magento:framework:View/Layout/etc/page_configuration.xsd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"script"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"src"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"js/App.js"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"head"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"referenceContainer"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"block"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"test-vue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento\\Framework\\View\\Element\\Template"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"template"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"Magento_Theme::test-vue.phtml"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"referenceContainer"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"body"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"page"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will add the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"App.js"}]},{"type":"text","value":" script we created to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"head"}]},{"type":"text","value":" of the page, and will add a new block to the content container. Remember, this is for testing purposes, so you don't need to add it to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"default.xml"}]},{"type":"text","value":". You can add it to whatever layout or page you want."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"THEME_NAME/Magento_Theme/templates/test-vue.phtml"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"phtml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-phtml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-phtml"]},"children":[{"type":"text","value":"<div id=\"root\">\n    <btn text=\"Button\"></btn>\n</div>"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The integration is done. To test it out, first use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setup:static-content:deploy"}]},{"type":"text","value":" command after clearing the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/cache"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/view_preprocessed"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var/page_cache"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"generated"}]},{"type":"text","value":", and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"pub/static/frontend"}]},{"type":"text","value":" directories:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"php bin/magento setup:static-content:deploy -f"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Recommended read - Learn how to compile front-end changes in Magento 2 easily: "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/how-to-make-your-front-end-development-faster-in-magento-2-using-grunt"},"children":[{"type":"text","value":"How to Make Your Front-End Development Faster in Magento 2 Using Grunt"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After that's done, go to the home page and you should see a button:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Screen-Shot-2021-07-03-at-5.08.48-PM.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, we went over how to integrate some of the famous and widely used frameworks and libraries with Magento 2. Hopefully, this will help you expand your Magento 2 development!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"prerequisites-create-a-theme","heading":"Prerequisites: Create a Theme"},{"id":"using-bootstrap-with-magento","heading":"Using Bootstrap with Magento"},{"id":"using-react-with-magento","heading":"Using React with Magento"},{"id":"using-vue-with-magento","heading":"Using Vue with Magento"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg","publicURL":"/static/a7015eb32c0e1e93ca707c1f20af21fa/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg","imageMeta":{"width":2000,"height":3000},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAeABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB4qTUgXOsWKNv/8QAGRAAAQUAAAAAAAAAAAAAAAAAAQAQESEw/9oACAEBAAEFAopgjh//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAWEQADAAAAAAAAAAAAAAAAAAAAEBL/2gAIAQIBAT8Bcn//xAAUEAEAAAAAAAAAAAAAAAAAAAAw/9oACAEBAAY/Ak//xAAaEAEBAAIDAAAAAAAAAAAAAAABABAhESBB/9oACAEBAAE/IQEJd25LwwPHb//aAAwDAQACAAMAAAAQxwu8/8QAFREBAQAAAAAAAAAAAAAAAAAAESD/2gAIAQMBAT8QI//EABcRAQEBAQAAAAAAAAAAAAAAAAABETH/2gAIAQIBAT8QjYnEP//EAB0QAQEBAAICAwAAAAAAAAAAAAERACFBMVFhcYH/2gAIAQEAAT8QpDvHyS4K4ufZlr9K4UIZ6ne4CGi+v3Gs+TXf/9k=","aspectRatio":0.6653992395437263,"src":"/static/a7015eb32c0e1e93ca707c1f20af21fa/ea4ab/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg","srcSet":"/static/a7015eb32c0e1e93ca707c1f20af21fa/477ba/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg 175w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/06776/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg 350w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/ea4ab/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg 700w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/3055e/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg 1050w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/eff08/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg 1400w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/4e5f3/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.jpg 2000w","srcWebp":"/static/a7015eb32c0e1e93ca707c1f20af21fa/89afa/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.webp","srcSetWebp":"/static/a7015eb32c0e1e93ca707c1f20af21fa/9fca7/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.webp 175w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/37a4e/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.webp 350w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/89afa/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.webp 700w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/78e7a/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.webp 1050w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/03d34/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.webp 1400w,\n/static/a7015eb32c0e1e93ca707c1f20af21fa/49d6b/mohammad-rahmani-0JvWk8ox_rQ-unsplash--1-.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}]}},"pageContext":{"slug":"tips-for-magento-2-layouts","prev":"web-design-tips-for-web-developers","next":"quran-in-new-tab-chrome-extension","tag":"magento","limit":3,"skip":0,"primaryTagCount":7,"collectionPaths":{}}},"staticQueryHashes":["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}