1

I have created custom Backend grid and Ui form to add image slider and it is working good in Backend. In Backend I have fetched the image by getting media url.In frontend, have fetched the image name and from database and also fetched media url .But I need to fetch the image and show it in front end. Please suggest me a solution to do.

This is what i got using below codes.

enter image description here

Block\ImageSlider.php

    <?php

namespace OX\HomeSlider\Block;

use Magento\Framework\View\Element\Template\Context;
use OX\HomeSlider\Model\Post;
use Magento\Framework\View\Element\Template;

//use \Magento\Store\Model\StoreManagerInterface

class ImageSlider extends Template
{

    protected $storeManager;

    public function __construct(Context $context, Post $model, \Magento\Store\Model\StoreManagerInterface $storeManager)
    {
        $this->model = $model;
        $this->storeManager = $storeManager;
        parent::__construct($context);
    }

    public function getCollection()
    {
        $collection = $this->model->getCollection();
        return $collection;
    }

     public function getMediaUrl()
    {
        $mediaUrl = $this->storeManager->getStore()
                ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

        return $mediaUrl;
    }

DataProvider.php

<?php

namespace namspace\HomeSlider\Model;

use namspace\HomeSlider\Model\ResourceModel\Post\CollectionFactory;
use Magento\Store\Model\StoreManagerInterface;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{

    protected $collection;
    protected $_loadedData;
    protected $_storeManager;

    public function __construct(
    $name, $primaryFieldName, $requestFieldName, CollectionFactory $postCollectionFactory, StoreManagerInterface $storeManager, array $meta = [], array $data = []
    )
    {
        $this->collection = $postCollectionFactory->create();
        $this->_storeManager = $storeManager;
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }

    public function getData()
    {

        if (isset($this->_loadedData)) {
            return $this->_loadedData;
        }
        $items = $this->collection->getItems();
        foreach ($items as $item) {
            $this->_loadedData[$item->getId()] = $item->getData();

            if ($item->getImage()) {
            // replace icon to your custom field name
            $m['image'][0]['name'] = $item->getImage();
            $m['image'][0]['url'] = $this->getMediaUrl().'homeslider/'.$item->getImage();

            $fullData = $this->_loadedData;
            $this->_loadedData[$item->getId()] = array_merge($fullData[$item->getId()], $m);
            }



        }

        return $this->_loadedData;
    }

    public function getMediaUrl()
    {
        $mediaUrl = $this->_storeManager->getStore()
                        ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

        return $mediaUrl;
    }

}

view/frontend/templates/Imageslider.phtml

<h1><?php $collections = $this->getCollection(); ?></h1>

<?php 
    foreach($collections as $collection){
        echo $collection->getImage();
    }
?>

<h1><?php echo $am = $this->getMediaUrl().'homeslider/'.$collection->getImage(); ?></h1>

1 Answer 1

1

Try to update code like this

    <h1><?php $collections = $this->getCollection(); ?></h1>

<?php 
    foreach($collections as $collection){
        echo $collection->getImage();
        $path = $this->getMediaUrl().'homeslider/'.$collection->getImage();
        $img = '<img src='.$path. '/ >';
        echo $img;
    }
?>
5
  • it show a syntax error in image source tag
    – Jaisa
    Commented Nov 18, 2017 at 6:06
  • Please check updated code Commented Nov 18, 2017 at 6:13
  • Thank you . I have solved the issue. But i need to apply filter for that if enabled all collection the images should show in front end . If disabled nothing should show. Please suggest me a solution
    – Jaisa
    Commented Nov 18, 2017 at 6:52
  • filter the collection with that field of collection. simple!! Commented Nov 18, 2017 at 6:59
  • Yes. Thank you for your response. I have applied filter and it works fine
    – Jaisa
    Commented Nov 18, 2017 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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