staempfli / magento2-module-image-resizer

Magento 2 Module to add simple image resizing capabilities in all blocks and .phtml templates
92 stars 32 forks source link

Feature Request: Widget #7

Open johnny-longneck opened 7 years ago

johnny-longneck commented 7 years ago

First of all, thanks for this module. It was wonderful when turning category images into responsive images with srcset and sizes attributes.

One thing that I would love to see is the feature to use it outside of templates, but as widget in the admin section.

jalogut commented 7 years ago

Hi @johnny-longneck,

I am glad you are using the module. Regarding your suggestion, could you please elaborate your idea? I do not quite undestand how this would work.

If you create a custom widget, you can also use the 'resizerHelper' inside the template of your widget. Besides that, if you need to use the resizer somewhere else, you could inject the helper in any class comtructor as done here:

Would that work for you?

johnny-longneck commented 7 years ago

Thanks for your reply. Sorry for bad description. What I am going to achieve is what I did with template images: Have one image being output in several sizes. Speaking of <picture> <source ...></source> <source ...></source> <!-- fallback image --> <img src="image.png" /> </picture>

As far as I know, I cannot use your plugin on CMS Static Blocks for example. Writing an own widget which implements your solution is an idea.

I can try that.

jalogut commented 6 years ago

Hi @johnny-longneck It has been a long time. Sure that a widget would be a good solution to implement that. Did you progress on that?

johnny-longneck commented 6 years ago

Unfortunatly no. I was super busy fixing bug after bug after bug for severeal M2 shops. But jeah I should give it a try.

jalogut commented 6 years ago

Hi @johnny-longneck

I was yesterday thinking about that and I think this feature should not belong to that module but to be implemented on a project level. In my opinion, a widget is project specific and it makes more sense to create that widget directly on the project. In fact that would be quite easy to accomplish using 2 modules:

In your project your will need the following:

composer.json

composer require "staempfli/magento2-module-image-resizer":"~1.0"
composer require "staempfli/magento2-module-widget-extra-fields":"~1.0"

Vendor/Package/etc/widget.xml

<widget id="<widget_id>" class="Vendor\Module\Block\Widget\<Your_Widget>" >
    <label translate="true">Widget Image With Resize</label>
    <description>Widget Description</description>
    <parameters>
        <parameter name="image" xsi:type="block" visible="true" sort_order="10" required="true">
            <label translate="true">Image</label>
            <block class="Staempfli\WidgetExtraFields\Block\Adminhtml\ImageField"/>
        </parameter>
           <parameter name="width" xsi:type="text" visible="true" required="true" sort_order="20">
                <label translate="true">Width</label>
            </parameter>
           <parameter name="height" xsi:type="text" visible="true" required="true" sort_order="30">
                <label translate="true">height</label>
            </parameter>
    </parameters>
</widget>

Vendor\Module\Block\Widget\<Your_Widget>

protected $_template = "Vendor_Module::widget/image-resize.phtml";

public function getImageUrl() : string
    {
        $image = $this->getData('image');
        if ($image) {
            return $this->_storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . $image;
        }
        return '';
    }

view/frontend/templates/widget/image-resize.phtml

<?php $resizerHelper = $block->getImageResizerHelper(); ?>
<img class="cms-widget__image"
             src="<?php echo $resizerHelper->resizeAndGetUrl($block->getImageUrl(), $block->getData('width'), $block->getData('height')); ?>">

What do you think? Would that be a valid solution for you?

jalogut commented 6 years ago

Hi @johnny-longneck Did you check the suggested solution? Any update will be appreciated to know if we can close this issue.