Magento 2.3.5-p - Show product page > product image alt and title tag (replaced fotorama gallery)

Question

I'm using the following code to replace the fotorama image gallery on the product page based on this article.

app\design\frontend\Mypackage\mytheme\Magento_Catalog\templates\product\view\gallery.phtml

<?php

$product = $block->getProduct();
$imageHelper = $this->helper('Magento\Catalog\Helper\Image');

if (!$product->getImage() || $product->getImage() == 'no_selection') {
    $image = $imageHelper->getDefaultPlaceholderUrl('image');
} else {
    $image = $imageHelper->init($product, 'product_page_image_medium')
            ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
            ->setImageFile($product->getImage())
            ->getUrl();
}
?>
<div class="gallery-placeholder">
    <img src="<?php echo $image; ?>" >
</div>

However the alt tag isn't formatted correctly, it shows as "thisisanexampleimage" instead of "This is an example image" as defined under that product

Image and Video >> Image detail

How can I get the alt tag to show a properly formatted alt tag and also include a title tag.

Answer 1

I figured it out, the code that works as follows.

Added alt="<?php echo $product->getName(); ?>

<?php

$product = $block->getProduct();
$imageHelper = $this->helper('Magento\Catalog\Helper\Image');

if (!$product->getImage() || $product->getImage() == 'no_selection') {
    $image = $imageHelper->getDefaultPlaceholderUrl('image');
} else {
    $image = $imageHelper->init($product, 'product_page_image_medium')
            ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
            ->setImageFile($product->getImage())
            ->getUrl();
}
?>
<div class="gallery-placeholder">
    <img src="<?php echo $image; ?>" alt="<?php echo $product->getName(); ?>" >
</div>