Media image attribute bugged in frontend

Question

Reposting my question from another forum: I want to add a picture as attribute on product and category page but encountered a problem.

Using Media Image custom attribute type I could not display it on frontend and backend.

After that I use Google and found that the storefront properties in Media Image attribute is bugged and hidden.

Made them visisble, set the image for attribute using aaaand i got the end of image link as text in attribute field in frontend (Image 1)

also i use my code

$attributeName = $_product->getResource()->getAttribute('color_unc');
 if ($attributeName) {
 $labelValue = $attributeName->getFrontend()->getValue($_product);
 $labelName = $attributeName->getFrontend()->getLabel($_product);
 }

echo $labelName; echo ' ';echo $labelValue;

in category phtml file and expectedly received the same text (Image 2)

Maybe anyone know how to fix this and get the image instead of text? I will say right away: i want use this for configurable product which have only one color (i can't use swathes for obvious reasons)

Answer 1

Try this:

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

Then include the image wherever you like

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