0

I have a place on each side where I need to get the loaded picture by the user from the admin panel.

The admin panel has similar functionality and I want to copy it and display this image in the template that is in the subject.

The finished section is responsible for the logo, Admin-> Design-> Configuration-> Select store end click Edit-> Header-> Add Image

How to implement this, provide an example code or article

  • So you want same functionality for your admin form. right? – Ranganathan Nov 5 at 11:30
  • @Ranganathan Yes, I need to copy it, but it will be responsible for another part and display different pictures on different pages, depending on the store – ann karsksya Nov 5 at 11:56
  • Where do you want to implement this? – Ranganathan Nov 5 at 11:57
  • @Ranganathan loading a picture in the admin panel Admin->Design->Configuration->Select store end click Edit->Header->Add Image. image display app/design/frontend/Hidd/atm5 /Magento_Theme/templates/stores.phtml – ann karsksya Nov 5 at 12:06
  • Ahh....Got it..Will update asap – Ranganathan Nov 5 at 12:08
1

app/code/Vendor/Module/view/adminhtml/ui_component/design_config_form.xml

Create add image field using design_config_form uiComponent

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="other_settings" sortOrder="30">
        <fieldset name="header">
            <field name="custom_logo_src" formElement="fileUploader">
                <settings>
                    <notice translate="true">Allowed file types: png, gif, jpg, jpeg.</notice>
                    <label translate="true">Add Image</label>
                    <componentType>fileUploader</componentType>
                </settings>
                <formElements>
                    <fileUploader>
                        <settings>
                            <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                            <maxFileSize>2097152</maxFileSize>
                            <uploaderConfig>
                                <param xsi:type="string" name="url">theme/design_config_fileUploader/save</param>
                            </uploaderConfig>
                        </settings>
                    </fileUploader>
                </formElements>
            </field>
        </fieldset>
    </fieldset>
</form>

app/code/Vendor/Module/etc/di.xml Declare backend model for your custom field

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <type name="Magento\Theme\Model\Design\Config\MetadataProvider">
        <arguments>
            <argument name="metadata" xsi:type="array">
                <item name="custom_logo_src" xsi:type="array">
                    <item name="path" xsi:type="string">design/header/custom_logo_src</item>
                    <item name="fieldset" xsi:type="string">other_settings/header</item>
                    <item name="backend_model" xsi:type="string">Vendor\Module\Model\Design\Backend\Custom</item>
                    <item name="base_url" xsi:type="array">
                        <item name="type" xsi:type="string">media</item>
                        <item name="scope_info" xsi:type="string">1</item>
                        <item name="value" xsi:type="string">custom</item>
                    </item>
                </item>
            </argument>
        </arguments>
    </type>
</config>

app/code/Vendor/Module/Model/Design/Backend/Custom.php

Backend model that saves the image to the specific custom folder

<?php
namespace Vendor\Module\Model\Design\Backend;

class Custom extends \Magento\Theme\Model\Design\Backend\Image
{
    /**
     * The tail part of directory path for uploading
     *
     */
    const UPLOAD_DIR = 'custom';

    /**
     * Return path to directory for upload file
     *
     * @return string
     * @throw \Magento\Framework\Exception\LocalizedException
     */
    protected function _getUploadDir()
    {
        return $this->_mediaDirectory->getRelativePath($this->_appendScopeInfo(static::UPLOAD_DIR));
    }

    /**
     * Makes a decision about whether to add info about the scope.
     *
     * @return boolean
     */
    protected function _addWhetherScopeInfo()
    {
        return true;
    }

    /**
     * Getter for allowed extensions of uploaded files.
     *
     * @return string[]
     */
    public function getAllowedExtensions()
    {
        return ['jpg', 'jpeg', 'gif', 'png'];
    }
}

app/code/Vendor/Module/Block/Html/Custom.php

Create custom block to get image url

<?php
namespace Vendor\Module\Block\Html;

class Custom extends \Magento\Framework\View\Element\Template
{

    /**
     * @var \Magento\MediaStorage\Helper\File\Storage\Database
     */
    protected $_fileStorageHelper;

    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\MediaStorage\Helper\File\Storage\Database $fileStorageHelper
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\MediaStorage\Helper\File\Storage\Database $fileStorageHelper,
        array $data = []
    ) {
        $this->_fileStorageHelper = $fileStorageHelper;
        parent::__construct($context, $data);
    }

    /**
     * Get logo image URL
     *
     * @return string
     */
    public function getImageSrc()
    {
        if (empty($this->_data['logo_src'])) {
            $this->_data['logo_src'] = $this->_getImageUrl();
        }
        return $this->_data['logo_src'];
    }

    /**
     * Retrieve logo image URL
     *
     * @return string
     */
    protected function _getImageUrl()
    {
        $folderName = \Vendor\Module\Model\Design\Backend\Custom::UPLOAD_DIR;
        $storeLogoPath = $this->_scopeConfig->getValue(
            'design/header/custom_logo_src',
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
        $path = $folderName . '/' . $storeLogoPath;
        return $imgUrl = $this->_urlBuilder
                ->getBaseUrl(['_type' => \Magento\Framework\UrlInterface::URL_TYPE_MEDIA]) . $path;

        if ($storeLogoPath !== null && $this->_isFile($path)) {
            $url = $imgUrl;
        }

        return $url;
    }

    /**
     * If DB file storage is on - find there, otherwise - just file_exists
     *
     * @param string $filename relative path
     * @return bool
     */
    protected function _isFile($filename)
    {
        if ($this->_fileStorageHelper->checkDbUsage() && !$this->getMediaDirectory()->isFile($filename)) {
            $this->_fileStorageHelper->saveFileToFilesystem($filename);
        }

        return $this->getMediaDirectory()->isFile($filename);
    }
}

You can get url from your phtml like below

<?php
$blockObj= $block->getLayout()->createBlock('Vendor\Module\Block\Html\Custom');
echo $blockObj->getImageSrc();
?>
1

Please check this tutorial Use Magento\Config\Block\System\Config\Form\Field\Image type instead of File that provided in article. There is an explanation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.