{"id":331273,"date":"2022-03-30T15:00:52","date_gmt":"2022-03-30T15:00:52","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=331273"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=331273","title":{"rendered":"Magento 2. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0430\u0441, \u0445\u0430\u0431\u0440\u0430\u0432\u0447\u0430\u043d\u0435! \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0441\u043c\u0435\u043b\u043e\u0441\u0442\u0438 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e, \u0442\u043e\u0447\u043d\u0435\u0435 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c, \u0432 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u043a\u0430\u043a \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0442\u0435\u043c\u0435, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u0430\u043a \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n

\u0418\u0442\u0430\u043a \u043d\u0430\u0447\u043d\u0435\u043c.<\/p>\n

\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u044c, \u0438 \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u043e\u0434\u0443\u043b\u044f<\/p>\n

\nMr\/ImageDynamicConfig\/registration.php<\/summary>\n
\n
<?php  \\Magento\\Framework\\Component\\ComponentRegistrar::register(     \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,     'Mr_ImageDynamicConfig',     __DIR__ );<\/code><\/pre>\n<\/div>\n<\/details>\n
\nMr\/ImageDynamicConfig\/etc\/module.xml<\/summary>\n
\n
<?xml version=\"1.0\"?> <config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">     <module name=\"Mr_ImageDynamicConfig\" setup_version=\"1.0.0\"\/> <\/config> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c:<\/p>\n
\u0418 \u043f\u0435\u0440\u0432\u044b\u043c \u043d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u0438, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0430\u043c \u043a\u043e\u043d\u0444\u0438\u0433:<\/p>\n
\nMr\/ImageDynamicConfig\/etc\/adminhtml\/system.xml<\/summary>\n
\n
<?xml version=\"1.0\"?>  <config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"         xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Config:etc\/system_file.xsd\">     <system>         <tab id=\"mr\" translate=\"label\" sortOrder=\"400\">             <label>Mr<\/label>         <\/tab>         <section id=\"swatch\" translate=\"label\" type=\"text\" sortOrder=\"300\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">             <class>separator-top<\/class>             <label>Image Array Swatch<\/label>             <tab>mr<\/tab>             <resource>Mr_ImageDynamicConfig::config<\/resource>             <group id=\"image_serializer\" translate=\"label\" type=\"text\" sortOrder=\"140\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">                 <field id=\"image\" translate=\"label\" type=\"text\" sortOrder=\"20\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"0\">                     <label>Image<\/label>                     <frontend_model>Mr\\ImageDynamicConfig\\Block\\Adminhtml\\System\\Config\\ImageFields<\/frontend_model>                     <backend_model>Mr\\ImageDynamicConfig\\Model\\Config\\Backend\\Serialized\\ArraySerialized<\/backend_model>                     <upload_dir>var\/uploads\/swatch\/image_serializer<\/upload_dir>                 <\/field>             <\/group>         <\/section>     <\/system> <\/config> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 <frontend_model>Mr\\ImageDynamicConfig\\Block\\Adminhtml\\System\\Config\\ImageFields<\/frontend_model> \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043d\u043e\u0432\u0430, \u0438 \u043a\u043b\u0430\u0441\u0441 ImageFields \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043a \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c<\/p>\n
\nMr\/ImageDynamicConfig\/Block\/Adminhtml\/System\/Config\/ImageFields.php<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Block\\Adminhtml\\System\\Config;  use Magento\\Config\\Block\\System\\Config\\Form\\Field\\FieldArray\\AbstractFieldArray;  class ImageFields extends AbstractFieldArray {     const IMAGE_FIELD = 'image';     const NAME_FIELD = 'name';     private $imageRenderer;      protected function _prepareToRender()     {         $this->addColumn(             self::IMAGE_FIELD,             [                 'label' => __('Image'),                 'renderer' => $this->getImageRenderer()             ]         );          $this->addColumn(             self::NAME_FIELD,             [                 'label' => __('Name'),             ]         );          $this->_addAfter       = false;         $this->_addButtonLabel = __('Add');     }      private function getImageRenderer()     {         if (!$this->imageRenderer) {             $this->imageRenderer = $this->getLayout()->createBlock(                 \\Mr\\ImageDynamicConfig\\Block\\Adminhtml\\Form\\Field\\ImageColumn::class,                 '',                 ['data' => ['is_render_to_js_template' => true]]             );         }         return $this->imageRenderer;     } }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u0442\u0443\u0442 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 _prepareToRender \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \u0438 \u0435\u0441\u043b\u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u043e\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0438\u043d\u043f\u0443\u0442\u0430, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 (\u043c\u0435\u0442\u043e\u0434 getImageRenderer). \u041d\u0430 \u0441\u0442\u0440\u043e\u043a\u0435 38 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0431\u043b\u043e\u043a \\Mr\\ImageDynamicConfig\\Block\\Adminhtml\\Form\\Field\\ImageColumn, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u043d\u043f\u0443\u0442\u0430 html — \u043a\u043e\u0434 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u0430<\/p>\n
\nMr\/ImageDynamicConfig\/Block\/Adminhtml\/Form\/Field\/ImageColumn.php<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Block\\Adminhtml\\Form\\Field;  use Mr\\ImageDynamicConfig\\Block\\Adminhtml\\ImageButton;  class ImageColumn extends \\Magento\\Framework\\View\\Element\\AbstractBlock {     public function setInputName(string $value)     {         return $this->setName($value);     }      public function setInputId(string $value)     {         return $this->setId($value);     }      protected function _toHtml(): string     {         $imageButton = $this->getLayout()             ->createBlock(ImageButton::class)             ->setData('id', $this->getId())             ->setData('name', $this->getName());         return $imageButton->toHtml();     } } <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 _toHtml \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0431\u043b\u043e\u043a Mr\\ImageDynamicConfig\\Block\\Adminhtml\\ImageButton, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u043c \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442 \u0441 html — \u043a\u043e\u0434\u043e\u043c<\/p>\n
\nMr\/ImageDynamicConfig\/Block\/Adminhtml\/\/ImageButton.php<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Block\\Adminhtml;  class ImageButton extends \\Magento\\Backend\\Block\\Template {     protected $_template = 'Mr_ImageDynamicConfig::config\/array_serialize\/swatch_image.phtml';      private $assetRepository;      public function __construct(         \\Magento\\Backend\\Block\\Template\\Context $context,         \\Magento\\Framework\\View\\Asset\\Repository $assetRepository,         array $data = []     ) {         $this->assetRepository = $assetRepository;         parent::__construct($context, $data);     }      public function getAssertRepository(): \\Magento\\Framework\\View\\Asset\\Repository     {         return $this->assetRepository;     } }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 getAssertRepository \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u043b\u043d\u044b\u0439 url \u043d\u0430 css \u0444\u0430\u0439\u043b \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435.<\/p>\n
\nMr\/ImageDynamicConfig\/view\/adminhtml\/templates\/config\/array_serialize\/swatch_image.phtml<\/summary>\n
\n
<?php \/*** @var \\Mr\\ImageDynamicConfig\\Block\\Adminhtml\\ImageButton $block *\/ $css = $block->getAssertRepository()->createAsset(\"Mr_ImageDynamicConfig::css\/image_button.css\"); ?> <link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"<?php \/* @escapeNotVerified *\/echo $css->getUrl() ?>\"\/>  <div class=\"upload-file\" data-id=\"<?=$block->getId()?>\">     <div class=\"upload-file__block upload-file__block_first\">         <img class=\"upload-file__block__img\" id=\"swatch_image_image_<?= $block->getId() ?>\" src=\"\">     <\/div>     <div class=\"upload-file__block\">         <input class=\"upload-file__input\" hidden type=\"file\" name=\"<?= $block->getName() ?>\" id=\"swatch_image_input_<?= $block->getId() ?>\" value=\"\"\/>         <label class=\"upload-file__label\" for=\"swatch_image_input_<?= $block->getId() ?>\">             <?= __(\"File\") ?>         <\/label>     <\/div>     <input class=\"upload-file__input\" type=\"hidden\" id=\"<?=$block->getId()?>\"> <\/div>   <script type=\"text\/javascript\">     require([\"jquery\"], function (jq) {         jq(function () {             const id = \"<?=$block->getId()?>\"             const imageId = \"swatch_image_image_<?=$block->getId()?>\"             const data = jq(\"#\" + id).val();             if (data) {                 jq(\"#\" + imageId).attr(\"src\", data)                 jq(\"#\" + imageId).attr(\"value\", data)             }         });     }); <\/script><\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u044d\u0442\u043e\u043c \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u043f\u0443\u0442 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0438 \u0432\u044b\u0432\u043e\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u0438\u043d\u043f\u0443\u0442:<\/p>\n
<input class=\"upload-file__input\" type=\"hidden\" id=\"<?=$block->getId()?>\"><\/code><\/pre>\n
\u0430 \u043f\u043e\u0441\u043b\u0435 \u0438\u0437 \u043d\u0435\u0433\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 img \u0442\u0435\u0433 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/p>\n
jq(function () {             const id = \"<?=$block->getId()?>\"             const imageId = \"swatch_image_image_<?=$block->getId()?>\"             const data = jq(\"#\" + id).val();             if (data) {                 jq(\"#\" + imageId).attr(\"src\", data)                 jq(\"#\" + imageId).attr(\"value\", data)             }         });<\/code><\/pre>\n
\u041d\u043e, \u043a\u043e\u0433\u0434\u0430 Magento \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043e\u043d\u0430 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0439\u0442\u0438 input \u0441 id \u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 value \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041f\u043e-\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u0438\u043d\u043f\u0443\u0442 \u0438 \u0447\u0435\u0440\u0435\u0437 jquery \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u043b \u0432 source img \u043f\u0443\u0442\u044c \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443<\/p>\n
\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 frontend_model \u0438 \u043a\u0430\u043a \u0432\u044b\u0432\u0435\u0441\u0442\u0438 image input \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c  \u044d\u0442\u0430\u043f — \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a.<\/p>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f backend_model, \u0438 \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433, \u0442\u043e \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432 backend_model Magento\\Config\\Model\\Config\\Backend\\Serialized\\ArraySerialized \u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0435\u0448\u0435\u043d\u044b, \u043d\u043e ArraySerialized \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u0438 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0432\u043e\u0439 array serializer<\/p>\n
\nMr\/ImageDynamicConfig\/Model\/Config\/Backend\/Serialized\/ArraySerialized<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Model\\Config\\Backend\\Serialized;  use Magento\\Framework\\Serialize\\Serializer\\Json; use Mr\\ImageDynamicConfig\\Block\\Adminhtml\\System\\Config\\ImageFields;  class ArraySerialized extends \\Magento\\Config\\Model\\Config\\Backend\\Serialized\\ArraySerialized {     private $imageUploaderFactory;     private $imageConfig;      public function __construct(         \\Magento\\Framework\\Model\\Context $context,         \\Magento\\Framework\\Registry $registry,         \\Magento\\Framework\\App\\Config\\ScopeConfigInterface $config,         \\Magento\\Framework\\App\\Cache\\TypeListInterface $cacheTypeList,         \\Mr\\ImageDynamicConfig\\Model\\Config\\ImageConfig $imageConfig,         \\Mr\\ImageDynamicConfig\\Model\\ImageUploaderFactory $imageUploaderFactory,         \\Magento\\Framework\\Model\\ResourceModel\\AbstractResource $resource = null,         \\Magento\\Framework\\Data\\Collection\\AbstractDb $resourceCollection = null,         array $data = [],         Json $serializer = null     ) {         $this->imageUploaderFactory = $imageUploaderFactory;         $this->imageConfig = $imageConfig;         parent::__construct(             $context,             $registry,             $config,             $cacheTypeList,             $resource,             $resourceCollection,             $data,             $serializer         );     }      public function beforeSave(): ArraySerialized     {         $value = $this->getValue();         $value = $this->mapRows($value);         $this->setValue($value);         return parent::beforeSave();     }      private function mapRows(array $rows): array     {         $iconUploader = $this->imageUploaderFactory->create([             'path' => $this->getPath(),             'uploadDir' => $this->getUploadDir(),         ]);         $uploadedFiles = $iconUploader->upload();         $swatches = $this->imageConfig->getSwatches();         foreach ($rows as $id => $data) {             if (isset($uploadedFiles[$id])) {                 $rows[$id][ImageFields::IMAGE_FIELD] = $uploadedFiles[$id];                 continue;             }             if (!isset($swatches[$id])) {                 unset($swatches[$id]);             } else {                 $rows[$id] = $this->matchRow($data, $swatches[$id]);             }         }         return $rows;     }      private function matchRow(array $row, array $configTabIcon): array     {         foreach ($row as $fieldName => $value) {             if (is_array($value) && $fieldName == ImageFields::IMAGE_FIELD) {                 $row[ImageFields::IMAGE_FIELD] = $configTabIcon[ImageFields::IMAGE_FIELD];             }         }         return $row;     }      private function getUploadDir(): string     {         $fieldConfig = $this->getFieldConfig();          if (!array_key_exists('upload_dir', $fieldConfig)) {             throw new \\Magento\\Framework\\Exception\\LocalizedException(                 __('The base directory to upload file is not specified.')             );         }          if (is_array($fieldConfig['upload_dir'])) {             $uploadDir = $fieldConfig['upload_dir']['value'];             if (array_key_exists('scope_info', $fieldConfig['upload_dir'])                 && $fieldConfig['upload_dir']['scope_info']             ) {                 $uploadDir = $this->_appendScopeInfo($uploadDir);             }              if (array_key_exists('config', $fieldConfig['upload_dir'])) {                 $uploadDir = $this->getUploadDirPath($uploadDir);             }         } else {             $uploadDir = (string)$fieldConfig['upload_dir'];         }          return $uploadDir;     } }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u0422\u0443\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u043e\u0441\u0442\u0440\u0438\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043c\u0435\u0442\u043e\u0434\u0435 mapRows, \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 50-54 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 56-66 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\/\u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0442\u043e\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\/\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c<\/p>\n
\u043a\u043b\u0430\u0441\u0441 ImageUploader:<\/p>\n
\nMr\/ImageDynamicConfig\/Model\/ImageUploader.php<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Model;  use Magento\\MediaStorage\\Model\\File\\Uploader;  class ImageUploader {     private $arrayFileModifier;     private $uploaderFactory;     private $uploadDir;     private $allowExtensions;      public function __construct(         \\Mr\\ImageDynamicConfig\\Model\\ArrayFileModifier $arrayFileModifier,         \\Magento\\MediaStorage\\Model\\File\\UploaderFactory $uploaderFactory,         string $uploadDir,         array $allowExtensions     ) {         $this->arrayFileModifier = $arrayFileModifier;         $this->uploaderFactory = $uploaderFactory;         $this->uploadDir = $uploadDir;         $this->allowExtensions = $allowExtensions;     }      public function upload(): array     {         $result = [];         $files = $this->arrayFileModifier->modify();         if (!$files) {             return $result;         }          foreach ($files as $id => $file) {             try {                 $uploader = $this->uploaderFactory->create(['fileId' => $id]);                 $uploader->setAllowedExtensions($this->allowExtensions);                 $uploader->setAllowRenameFiles(true);                 $uploader->addValidateCallback('size', $this, 'validateMaxSize');                 $newFileName = $this->getNewFileName($uploader);                 $uploader->save($this->uploadDir, $newFileName);                 $result[$id] = $this->getFullFilPath($newFileName);             } catch (\\Exception $e) {                 throw new \\Magento\\Framework\\Exception\\LocalizedException(__('%1', $e->getMessage()));             }         }         return $result;     }      private function getNewFileName(Uploader $uploader): string     {         return sprintf(             '%s.%s',             uniqid(),             $uploader->getFileExtension()         );     }      private function getFullFilPath(string $filename): string     {         return sprintf(             '\/%s\/%s',             $this->uploadDir,             $filename         );     } }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u044d\u0442\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u0447\u043a\u0430 $files = $this->arrayFileModifier->modify(); \u042d\u0442\u043e\u0442 modifier \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u0435\u043b, \u0438\u0437 \u0444\u043e\u0440\u043c\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n
<\/figcaption><\/figure>\n
\u0432 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0434\u043b\u044f \u0430\u043f\u043b\u043e\u0443\u0434\u0435\u0440\u0430:<\/p>\n
<\/figcaption><\/figure>\n
\u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c id $uploader = $this->uploaderFactory->create([‘fileId’ => $id]);<\/p>\n
\u0438 \u0430\u043f\u043b\u043e\u0443\u0434\u0435\u0440 \u0437\u043d\u0430\u043b \u0441 \u0447\u0435\u043c \u0435\u043c\u0443 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n
\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0430\u0437\u043b\u0438\u043a — \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u043c<\/p>\n
\nMr\/ImageDynamicConfig\/Model\/Config\/ImageConfig<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Model\\Config;  use Magento\\Framework\\App\\Config\\ScopeConfigInterface; use Magento\\Framework\\Serialize\\SerializerInterface;  class ImageConfig {     const XML_PATH_IMAGE_SERIALIZER = 'swatch\/image_serializer\/';      private $scopeConfig;     private $serializer;      public function __construct(         SerializerInterface $serializer,         ScopeConfigInterface $scopeConfig     ) {         $this->scopeConfig = $scopeConfig;         $this->serializer = $serializer;     }          public function getSwatches(): array     {         $data = $this->scopeConfig->getValue(self::XML_PATH_IMAGE_SERIALIZER . 'image');         if (!$data) {             return [];         }         return $this->serializer->unserialize($data);     } }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u0418 \u0441\u0430\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
<\/figcaption><\/figure>\n
<\/figcaption><\/figure>\n
\u042d\u043f\u0438\u043b\u043e\u0433<\/p>\n
\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435<\/a><\/p>\n
\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0443-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0438\/\u0438\u043b\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f\/\u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f\/\u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438. <\/p>\n
\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/658167\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0430\u0441, \u0445\u0430\u0431\u0440\u0430\u0432\u0447\u0430\u043d\u0435! \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0441\u043c\u0435\u043b\u043e\u0441\u0442\u0438 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e, \u0442\u043e\u0447\u043d\u0435\u0435 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c, \u0432 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u043a\u0430\u043a \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0442\u0435\u043c\u0435, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u0430\u043a \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n
\u0418\u0442\u0430\u043a \u043d\u0430\u0447\u043d\u0435\u043c.<\/p>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u044c, \u0438 \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u043e\u0434\u0443\u043b\u044f<\/p>\n
\nMr\/ImageDynamicConfig\/registration.php<\/summary>\n
\n
<?php  \\Magento\\Framework\\Component\\ComponentRegistrar::register(     \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,     'Mr_ImageDynamicConfig',     __DIR__ );<\/code><\/pre>\n<\/div>\n<\/details>\n
\nMr\/ImageDynamicConfig\/etc\/module.xml<\/summary>\n
\n
<?xml version=\"1.0\"?> <config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">     <module name=\"Mr_ImageDynamicConfig\" setup_version=\"1.0.0\"\/> <\/config> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c:<\/p>\n
\u0418 \u043f\u0435\u0440\u0432\u044b\u043c \u043d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u0438, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0430\u043c \u043a\u043e\u043d\u0444\u0438\u0433:<\/p>\n
\nMr\/ImageDynamicConfig\/etc\/adminhtml\/system.xml<\/summary>\n
\n
<?xml version=\"1.0\"?>  <config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"         xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Config:etc\/system_file.xsd\">     <system>         <tab id=\"mr\" translate=\"label\" sortOrder=\"400\">             <label>Mr<\/label>         <\/tab>         <section id=\"swatch\" translate=\"label\" type=\"text\" sortOrder=\"300\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">             <class>separator-top<\/class>             <label>Image Array Swatch<\/label>             <tab>mr<\/tab>             <resource>Mr_ImageDynamicConfig::config<\/resource>             <group id=\"image_serializer\" translate=\"label\" type=\"text\" sortOrder=\"140\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">                 <field id=\"image\" translate=\"label\" type=\"text\" sortOrder=\"20\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"0\">                     <label>Image<\/label>                     <frontend_model>Mr\\ImageDynamicConfig\\Block\\Adminhtml\\System\\Config\\ImageFields<\/frontend_model>                     <backend_model>Mr\\ImageDynamicConfig\\Model\\Config\\Backend\\Serialized\\ArraySerialized<\/backend_model>                     <upload_dir>var\/uploads\/swatch\/image_serializer<\/upload_dir>                 <\/field>             <\/group>         <\/section>     <\/system> <\/config> <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 <frontend_model>Mr\\ImageDynamicConfig\\Block\\Adminhtml\\System\\Config\\ImageFields<\/frontend_model> \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043d\u043e\u0432\u0430, \u0438 \u043a\u043b\u0430\u0441\u0441 ImageFields \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043a \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c<\/p>\n
\nMr\/ImageDynamicConfig\/Block\/Adminhtml\/System\/Config\/ImageFields.php<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Block\\Adminhtml\\System\\Config;  use Magento\\Config\\Block\\System\\Config\\Form\\Field\\FieldArray\\AbstractFieldArray;  class ImageFields extends AbstractFieldArray {     const IMAGE_FIELD = 'image';     const NAME_FIELD = 'name';     private $imageRenderer;      protected function _prepareToRender()     {         $this->addColumn(             self::IMAGE_FIELD,             [                 'label' => __('Image'),                 'renderer' => $this->getImageRenderer()             ]         );          $this->addColumn(             self::NAME_FIELD,             [                 'label' => __('Name'),             ]         );          $this->_addAfter       = false;         $this->_addButtonLabel = __('Add');     }      private function getImageRenderer()     {         if (!$this->imageRenderer) {             $this->imageRenderer = $this->getLayout()->createBlock(                 \\Mr\\ImageDynamicConfig\\Block\\Adminhtml\\Form\\Field\\ImageColumn::class,                 '',                 ['data' => ['is_render_to_js_template' => true]]             );         }         return $this->imageRenderer;     } }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u0442\u0443\u0442 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 _prepareToRender \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \u0438 \u0435\u0441\u043b\u0438 \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u043e\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0438\u043d\u043f\u0443\u0442\u0430, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 (\u043c\u0435\u0442\u043e\u0434 getImageRenderer). \u041d\u0430 \u0441\u0442\u0440\u043e\u043a\u0435 38 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0431\u043b\u043e\u043a \\Mr\\ImageDynamicConfig\\Block\\Adminhtml\\Form\\Field\\ImageColumn, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u043d\u043f\u0443\u0442\u0430 html — \u043a\u043e\u0434 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u0430<\/p>\n
\nMr\/ImageDynamicConfig\/Block\/Adminhtml\/Form\/Field\/ImageColumn.php<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Block\\Adminhtml\\Form\\Field;  use Mr\\ImageDynamicConfig\\Block\\Adminhtml\\ImageButton;  class ImageColumn extends \\Magento\\Framework\\View\\Element\\AbstractBlock {     public function setInputName(string $value)     {         return $this->setName($value);     }      public function setInputId(string $value)     {         return $this->setId($value);     }      protected function _toHtml(): string     {         $imageButton = $this->getLayout()             ->createBlock(ImageButton::class)             ->setData('id', $this->getId())             ->setData('name', $this->getName());         return $imageButton->toHtml();     } } <\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 _toHtml \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0431\u043b\u043e\u043a Mr\\ImageDynamicConfig\\Block\\Adminhtml\\ImageButton, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u043c \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442 \u0441 html — \u043a\u043e\u0434\u043e\u043c<\/p>\n
\nMr\/ImageDynamicConfig\/Block\/Adminhtml\/\/ImageButton.php<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Block\\Adminhtml;  class ImageButton extends \\Magento\\Backend\\Block\\Template {     protected $_template = 'Mr_ImageDynamicConfig::config\/array_serialize\/swatch_image.phtml';      private $assetRepository;      public function __construct(         \\Magento\\Backend\\Block\\Template\\Context $context,         \\Magento\\Framework\\View\\Asset\\Repository $assetRepository,         array $data = []     ) {         $this->assetRepository = $assetRepository;         parent::__construct($context, $data);     }      public function getAssertRepository(): \\Magento\\Framework\\View\\Asset\\Repository     {         return $this->assetRepository;     } }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 getAssertRepository \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u043b\u043d\u044b\u0439 url \u043d\u0430 css \u0444\u0430\u0439\u043b \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435.<\/p>\n
\nMr\/ImageDynamicConfig\/view\/adminhtml\/templates\/config\/array_serialize\/swatch_image.phtml<\/summary>\n
\n
<?php \/*** @var \\Mr\\ImageDynamicConfig\\Block\\Adminhtml\\ImageButton $block *\/ $css = $block->getAssertRepository()->createAsset(\"Mr_ImageDynamicConfig::css\/image_button.css\"); ?> <link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"<?php \/* @escapeNotVerified *\/echo $css->getUrl() ?>\"\/>  <div class=\"upload-file\" data-id=\"<?=$block->getId()?>\">     <div class=\"upload-file__block upload-file__block_first\">         <img class=\"upload-file__block__img\" id=\"swatch_image_image_<?= $block->getId() ?>\" src=\"\">     <\/div>     <div class=\"upload-file__block\">         <input class=\"upload-file__input\" hidden type=\"file\" name=\"<?= $block->getName() ?>\" id=\"swatch_image_input_<?= $block->getId() ?>\" value=\"\"\/>         <label class=\"upload-file__label\" for=\"swatch_image_input_<?= $block->getId() ?>\">             <?= __(\"File\") ?>         <\/label>     <\/div>     <input class=\"upload-file__input\" type=\"hidden\" id=\"<?=$block->getId()?>\"> <\/div>   <script type=\"text\/javascript\">     require([\"jquery\"], function (jq) {         jq(function () {             const id = \"<?=$block->getId()?>\"             const imageId = \"swatch_image_image_<?=$block->getId()?>\"             const data = jq(\"#\" + id).val();             if (data) {                 jq(\"#\" + imageId).attr(\"src\", data)                 jq(\"#\" + imageId).attr(\"value\", data)             }         });     }); <\/script><\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u044d\u0442\u043e\u043c \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u043f\u0443\u0442 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0438 \u0432\u044b\u0432\u043e\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u0438\u043d\u043f\u0443\u0442:<\/p>\n
<input class=\"upload-file__input\" type=\"hidden\" id=\"<?=$block->getId()?>\"><\/code><\/pre>\n
\u0430 \u043f\u043e\u0441\u043b\u0435 \u0438\u0437 \u043d\u0435\u0433\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 img \u0442\u0435\u0433 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/p>\n
jq(function () {             const id = \"<?=$block->getId()?>\"             const imageId = \"swatch_image_image_<?=$block->getId()?>\"             const data = jq(\"#\" + id).val();             if (data) {                 jq(\"#\" + imageId).attr(\"src\", data)                 jq(\"#\" + imageId).attr(\"value\", data)             }         });<\/code><\/pre>\n
\u041d\u043e, \u043a\u043e\u0433\u0434\u0430 Magento \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043e\u043d\u0430 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0439\u0442\u0438 input \u0441 id \u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 value \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041f\u043e-\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u0438\u043d\u043f\u0443\u0442 \u0438 \u0447\u0435\u0440\u0435\u0437 jquery \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u043b \u0432 source img \u043f\u0443\u0442\u044c \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443<\/p>\n
\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 frontend_model \u0438 \u043a\u0430\u043a \u0432\u044b\u0432\u0435\u0441\u0442\u0438 image input \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c  \u044d\u0442\u0430\u043f — \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a.<\/p>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f backend_model, \u0438 \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433, \u0442\u043e \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432 backend_model Magento\\Config\\Model\\Config\\Backend\\Serialized\\ArraySerialized \u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0435\u0448\u0435\u043d\u044b, \u043d\u043e ArraySerialized \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u0438 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0432\u043e\u0439 array serializer<\/p>\n
\nMr\/ImageDynamicConfig\/Model\/Config\/Backend\/Serialized\/ArraySerialized<\/summary>\n
\n
<?php declare(strict_types=1);  namespace Mr\\ImageDynamicConfig\\Model\\Config\\Backend\\Serialized;  use Magento\\Framework\\Serialize\\Serializer\\Json; use Mr\\ImageDynamicConfig\\Block\\Adminhtml\\System\\Config\\ImageFields;  class ArraySerialized extends \\Magento\\Config\\Model\\Config\\Backend\\Serialized\\ArraySerialized {     private $imageUploaderFactory;     private $imageConfig;      public function __construct(         \\Magento\\Framework\\Model\\Context $context,         \\Magento\\Framework\\Registry $registry,         \\Magento\\Framework\\App\\Config\\ScopeConfigInterface $config,         \\Magento\\Framework\\App\\Cache\\TypeListInterface $cacheTypeList,         \\Mr\\ImageDynamicConfig\\Model\\Config\\ImageConfig $imageConfig,         \\Mr\\ImageDynamicConfig\\Model\\ImageUploaderFactory $imageUploaderFactory,         \\Magento\\Framework\\Model\\ResourceModel\\AbstractResource $resource = null,         \\Magento\\Framework\\Data\\Collection\\AbstractDb $resourceCollection = null,         array $data = [],         Json $serializer = null     ) {         $this->imageUploaderFactory = $imageUploaderFactory;         $this->imageConfig = $imageConfig;         parent::__construct(             $context,             $registry,             $config,             $cacheTypeList,             $resource,  <\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-331273","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/331273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=331273"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/331273\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=331273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=331273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=331273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}