displaying visual swtach images

Question

I created a visual swatch attribute from admin panel to adding 'brands' for products,In my Main/Store module i created brands.phtml file , and there is a Brands.php file inside Block folder, now problem is with getting image url or its name , i didnt know, i get the attribute values and the frontend label values , but i didnt how to get the images :( ,i searched on internet but i didnt get a useful answer, i tried many things but sometimes i get url image that contains pub/static/... url and as i know the path of images must be from media folder, can anyone help me with getting the full url of the images to display them , then i when user click on the image it will return the user to the products that under this brand , so i want to get url for each brand like this

<a href='link for all products that i chose this brand for them'><img src='image_source' /></a>

Answer 1

bro it looks there is not getSwatchMediaUrl() function inside swatchHelper, there is a function maybe it is the same i dont know

and this is other

now look here to getId it is also undefined method

Answer 2

To retrieve the URL or path of the images associated with the visual swatch attribute in Magento, you can use the following steps:

1. Retrieve the attribute options and their values in your block file (Brands.php). You can use the Magento\Eav\Api\AttributeRepositoryInterface and Magento\Swatches\Helper\Data classes for this purpose. Here's an example of how you can retrieve the attribute options:

use Magento\Eav\Api\AttributeRepositoryInterface;
use Magento\Swatches\Helper\Data as SwatchHelper;

class Brands extends \Magento\Framework\View\Element\Template
{
    /**
     * @var AttributeRepositoryInterface
     */
    private $attributeRepository;

    /**
     * @var SwatchHelper
     */
    private $swatchHelper;

    public function __construct(
        AttributeRepositoryInterface $attributeRepository,
        SwatchHelper $swatchHelper,
        \Magento\Framework\View\Element\Template\Context $context,
        array $data = []
    ) {
        $this->attributeRepository = $attributeRepository;
        $this->swatchHelper = $swatchHelper;
        parent::__construct($context, $data);
    }

    /**
     * Get attribute options and their values
     *
     * @return array
     */
    public function getBrandOptions()
    {
        $attributeCode = 'brands'; // Replace with your attribute code
        $attribute = $this->attributeRepository->get(\Magento\Catalog\Api\Data\ProductAttributeInterface::ENTITY_TYPE_CODE, $attributeCode);
        $options = $this->swatchHelper->getSwatchesByOptionsId([$attribute->getId()]);

        $brandOptions = [];
        foreach ($attribute->getOptions() as $option) {
            if (isset($options[$option->getValue()])) {
                $swatchData = $options[$option->getValue()];
                $brandOptions[] = [
                    'label' => $option->getLabel(),
                    'value' => $option->getValue(),
                    'swatch' => $swatchData['value'],
                    'swatchUrl' => $this->swatchHelper->getSwatchMediaUrl($swatchData['value'])
                ];
            }
        }

        return $brandOptions;
    }
}

2. In your brands.phtml template file, you can loop through the brand options and display the image URLs along with the brand labels. Here's an example:

<?php foreach ($block->getBrandOptions() as $brand): ?>
    <a href="<?php /* Add your URL for the brand's products here */ ?>">
        <img src="<?php echo $block->escapeUrl($brand['swatchUrl']); ?>" alt="<?php echo $block->escapeHtml($brand['label']); ?>">
    </a>
<?php endforeach; ?>

Make sure to replace brands with your actual attribute code, and customize the URL for each brand's products as needed.

Note: The example assumes that you have already set up the visual swatch attribute and associated the images with the attribute options through the admin panel.