Magento – Media image attribute width, height and alt tag in a phtml – Magento 2

attributesmagento2phtml

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.

Best Answer

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;
}
}
Related Topic