Magento 2 how to get image by it's role

Question

I have a custom role added to an image (attr-id = lookbookimage, label = Lookbook image), one of the product images has this role assigned to it.

I'm doing this in the front-end but it keeps returning main product image rather than a lookbook one.

public function getLookBookImage($product)
{
    return $this->imageBuilder
        ->setProduct($product)
        ->setImageId('product_page_lookbook_image')
        ->create();
}

I have tried many other ways but everything seem to be returning main product image rather than lookbook one

Please note that I'm also looking to get lookbook image resized to the dimensions I have specified in view.xml -> I've created a custom attribute there

<image id="product_page_lookbook_image" type="image">
    <width>640</width>
    <height>960</height>
    <frame>false</frame>
</image>

Answer 1

According to your config, ImageBuilder return main image with width=640 and height= 960. Check following method how they build image.

vendor/magento/module-catalog/Block/Product/ImageFactory.php

/**
 * Create image block from product
 * @param Product $product
 * @param string $imageId
 * @param array|null $attributes
 * @return ImageBlock
 */
public function create(Product $product, string $imageId, array $attributes = null): ImageBlock
{
    $viewImageConfig = $this->presentationConfig->getViewConfig()->getMediaAttributes(
        'Magento_Catalog',
        ImageHelper::MEDIA_TYPE_CONFIG_NODE,
        $imageId
    );

    $imageMiscParams = $this->imageParamsBuilder->build($viewImageConfig);
    $originalFilePath = $product->getData($imageMiscParams['image_type']);

    if ($originalFilePath === null || $originalFilePath === 'no_selection') {
        $imageAsset = $this->viewAssetPlaceholderFactory->create(
            [
                'type' => $imageMiscParams['image_type']
            ]
        );
    } else {
        $imageAsset = $this->viewAssetImageFactory->create(
            [
                'miscParams' => $imageMiscParams,
                'filePath' => $originalFilePath,
            ]
        );
    }

    $data = [
        'data' => [
            'template' => 'Magento_Catalog::product/image_with_borders.phtml',
            'image_url' => $imageAsset->getUrl(),
            'width' => $imageMiscParams['image_width'],
            'height' => $imageMiscParams['image_height'],
            'label' => $this->getLabel($product, $imageMiscParams['image_type']),
            'ratio' => $this->getRatio($imageMiscParams['image_width'], $imageMiscParams['image_height']),
            'custom_attributes' => $this->getStringCustomAttributes($attributes),
            'product_id' => $product->getId()
        ],
    ];

    return $this->objectManager->create(ImageBlock::class, $data);
}

Magento fetch config using $imageId, then create image according to type. For your case this is image

<image id="product_page_lookbook_image" type="image">

[Update]

In your case change following config in view.xml

<image id="product_page_lookbook_image" type="lookbookimage">
    <width>640</width>
    <height>960</height>
    <frame>false</frame>
</image>