1

I have a custom .phtml file and I want to show a media image attribute within it.

I have the following:

$product = $block->getProduct();
$productImageAttr = $product->getCustomAttribute( 'my_image_attribute' );
$productImage = $this->helper('Magento\Catalog\Helper\Image')
->init($product, 'my_image_attribute')
->setImageFile($productImageAttr->getValue());

and display the image with:

<img src="<?php echo $productImage->getUrl() ?>" alt="<?php echo $block->escapeHtml($product->getTitle()) ?>" />

However the alt tag is blank (even though it is set on the image) and I need to show the width and height of the uploaded image. Can anyone help please?

Many thanks.

0

Take a look here https://stackoverflow.com/questions/43972344/magento-2-get-height-width-of-image. It's the same question and the second answer it's correct.


Sure, here is the code. I edit the answer to paste the code.

use Magento\Framework\App\Helper\AbstractHelper;

/**
 * Catalog image helper
 * @SuppressWarnings(PHPMD.TooManyFields)
*/

class Image extends AbstractHelper
{
/**
 * Media config node
 */
const MEDIA_TYPE_CONFIG_NODE = 'images';

/**
 * Current model
 *
 * @var \Magento\Catalog\Model\Product\Image
 */
protected $_model;

/**
 * Scheduled for resize image
 *
 * @var bool
 */
protected $_scheduleResize = true;

/**
 * Scheduled for rotate image
 *
 * @var bool
 */
protected $_scheduleRotate = false;

/**
 * Angle
 *
 * @var int
 */
protected $_angle;

/**
 * Watermark file name
 *
 * @var string
 */
protected $_watermark;

/**
 * Watermark Position
 *
 * @var string
 */
protected $_watermarkPosition;

/**
 * Watermark Size
 *
 * @var string
 */
protected $_watermarkSize;

/**
 * Watermark Image opacity
 *
 * @var int
 */
protected $_watermarkImageOpacity;

/**
 * Current Product
 *
 * @var \Magento\Catalog\Model\Product
 */
protected $_product;

/**
 * Image File
 *
 * @var string
 */
protected $_imageFile;

/**
 * Image Placeholder
 *
 * @var string
 */
protected $_placeholder;

/**
 * @var \Magento\Framework\View\Asset\Repository
 */
protected $_assetRepo;

/**
 * Product image factory
 *
 * @var \Magento\Catalog\Model\Product\ImageFactory
 */
protected $_productImageFactory;

/**
 * @var \Magento\Framework\View\ConfigInterface
 */
protected $viewConfig;

/**
 * @var \Magento\Framework\Config\View
 */
protected $configView;

/**
 * Image configuration attributes
 *
 * @var array
 */
protected $attributes = [];

protected $imageId;

/**
 * @param \Magento\Framework\App\Helper\Context $context
 * @param \Magento\Catalog\Model\Product\ImageFactory $productImageFactory
 * @param \Magento\Framework\View\Asset\Repository $assetRepo
 * @param \Magento\Framework\View\ConfigInterface $viewConfig
 */
public function __construct(
    \Magento\Framework\App\Helper\Context $context,
    \Magento\Catalog\Model\Product\ImageFactory $productImageFactory,
    \Magento\Framework\View\Asset\Repository $assetRepo,
    \Magento\Framework\View\ConfigInterface $viewConfig
) {
    $this->_productImageFactory = $productImageFactory;
    parent::__construct($context);
    $this->_assetRepo = $assetRepo;
    $this->viewConfig = $viewConfig;
    $this->panelHelper = $panelHelper;
}

/**
 * Reset all previous data
 *
 * @return $this
 */
protected function _reset()
{
    $this->_model = null;
    $this->_scheduleRotate = false;
    $this->_angle = null;
    $this->_watermark = null;
    $this->_watermarkPosition = null;
    $this->_watermarkSize = null;
    $this->_watermarkImageOpacity = null;
    $this->_product = null;
    $this->_imageFile = null;
    $this->attributes = [];
    return $this;
}

/**
 * Initialize Helper to work with Image
 *
 * @param \Magento\Catalog\Model\Product $product
 * @param string $imageId
 * @param array $attributes
 * @return $this
 */
public function init($product, $imageId, $attributes = [])
{
    $this->_reset();
    $this->imageId = $imageId;
    $this->attributes = array_merge(
        $this->getConfigView()->getMediaAttributes('Magento_Catalog', self::MEDIA_TYPE_CONFIG_NODE, $imageId),
        $attributes
    );

    $this->setProduct($product);
    $this->setImageProperties();
    $this->setWatermarkProperties();

    return $this;
}
/**
 * Retrieve image width
 *
 * @return string
 */
public function getWidth()
{
    return $this->getAttribute('width');
}

/**
 * Retrieve image height
 *
 * @return string
 */
public function getHeight()
{
    return $this->getAttribute('height') ?: $this->getAttribute('width');
}

/**
 * Retrieve image alt
 *
 * @return string
 */
public function getAlt()
{
    return $this->getAttribute('alt') ?: $this->getAttribute('alt');
}


/**
 * Retrieve image attribute
 *
 * @param string $name
 * @return string
 */
protected function getAttribute($name)
{
    return isset($this->attributes[$name]) ? $this->attributes[$name] : null;
}
}
  • Sorry that doesn't work and there is no mention of how to include the images alt description either :( – Ordog Jan 25 '18 at 14:34
  • Maybe i'm saying the wrong think but have you tried to get the image data or attributes? In the template that i'm using the width, height and alt values are in the data attribute of the image. The code used inside the template is $this->getAttribute('height') – Alex Obreja Jan 25 '18 at 14:43
  • I think I've tried it correctly, could you post an example of the code I'd use to generate the entire image with src, width, height and alt please – Ordog Jan 25 '18 at 15:39
  • That's really confusing and looks massively overkill. Where do I put that code, in my custom phtml file? – Ordog Jan 26 '18 at 11:59
  • You need to create a helper in the app/code folder. Im my template it's made this way. The full structure is app/code/ThemeName/CustomCode/helper, then you need to overwrite the default template and call the helper to get that functions – Alex Obreja Jan 26 '18 at 12:11

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.