@swissup/pwa-easy-slide/lib/talons/EasySlide/useEasySlideImg.js

Easy slide(r) integration into venia-ui

import resourceUrl from '@magento/peregrine/lib/util/makeUrl';

const htmlDataset = document.querySelector('html').dataset;
const { imageOptimizingOrigin, mediaBackend } = htmlDataset;
const useBackendForImgs = imageOptimizingOrigin === 'backend';

// Generates the path for the resource image
const getPath = (image) => {
    if (image) {
        return useBackendForImgs ?
            `${mediaBackend}easyslide/${image}` : `/media/easyslide/${image}`;
    }

    // If there is no path this is just a dead link.
    return '#';
};

/**
 * Returns props necessary to render an img.
 * @param {Object} props
 * @param {String} props.slide_id
 * @param {String} props.image
 */
export const useEasySlideImg = props => {
    const { slide_id, image, width, height } = props;

    const path = getPath(image);
    const src = resourceUrl(
        path, {
            type: 'image-easyslide',
            fit: 'cover',
            width,
            height
        }
    );

    return {
        src,
        path,
        alt: `Slide ${slide_id}`,
        // title: `Slide ${slide_id}`
    };
};