| 1 |
import { Fragment, useEffect, useMemo } from "@wordpress/element"; |
| 2 |
import { SmartImageCaption } from "./smartImgTemplate"; |
| 3 |
|
| 4 |
const RenderSmartImage = ({ attributes, setAttributes, setIsPreloader }) => { |
| 5 |
const { |
| 6 |
uniqueId, |
| 7 |
selectImage, |
| 8 |
imageSize, |
| 9 |
doubleResolutionRetina, |
| 10 |
lazyLoad, |
| 11 |
aspectRatio, |
| 12 |
enableLink, |
| 13 |
linkType, |
| 14 |
buttonLabel, |
| 15 |
buttonPosition, |
| 16 |
imageShapeSet, |
| 17 |
imgTextPosition, |
| 18 |
imgAnimationNormal, |
| 19 |
imgMaskingEnable, |
| 20 |
imgHoverOverlayEnable, |
| 21 |
imageAltText, |
| 22 |
hideOnDesktop, |
| 23 |
hideOnTablet, |
| 24 |
hideOnMobile, |
| 25 |
smartImgBgEnable, |
| 26 |
imgAlignment |
| 27 |
} = attributes; |
| 28 |
|
| 29 |
const imgSelectSizeObj = useMemo(() => { |
| 30 |
return selectImage?.media_details?.sizes?.[imageSize] || null; |
| 31 |
// eslint-disable-next-line react-hooks/exhaustive-deps |
| 32 |
}, [selectImage.id, imageSize]); |
| 33 |
|
| 34 |
const imgSrcSetRetina = useMemo(() => { |
| 35 |
if (!selectImage?.srcset) { |
| 36 |
return null; |
| 37 |
} |
| 38 |
|
| 39 |
if (!doubleResolutionRetina) { |
| 40 |
return selectImage.srcset; |
| 41 |
} |
| 42 |
|
| 43 |
return selectImage.srcset |
| 44 |
.split(",") |
| 45 |
.map((src) => src.trim()) |
| 46 |
.filter((src) => { |
| 47 |
const size = parseInt(src.match(/(\d+)w$/)?.[1] || 0, 10); |
| 48 |
return size >= 600; // keep only >=600px |
| 49 |
}) |
| 50 |
.join(", "); |
| 51 |
}, [selectImage?.srcset, doubleResolutionRetina]); |
| 52 |
|
| 53 |
useEffect(() => { |
| 54 |
if (imgSelectSizeObj?.source_url || selectImage?.url) { |
| 55 |
setIsPreloader(false); |
| 56 |
} else { |
| 57 |
setIsPreloader(true); |
| 58 |
} |
| 59 |
// eslint-disable-next-line react-hooks/exhaustive-deps |
| 60 |
}, [imgSelectSizeObj?.source_url, selectImage?.url]); |
| 61 |
|
| 62 |
const ImgLinkTag = enableLink && "full-img" === linkType ? "a" : Fragment; |
| 63 |
const visibilityClass = `${hideOnDesktop ? " sp-hide-on-desktop " : ""}${ |
| 64 |
hideOnTablet ? " sp-hide-on-tablet " : "" |
| 65 |
}${hideOnMobile ? " sp-hide-on-mobile" : ""}`; |
| 66 |
const imgMaskClass = imgMaskingEnable && "custom" === imageShapeSet ? " sp-custom-mask" : ""; |
| 67 |
|
| 68 |
return ( |
| 69 |
<> |
| 70 |
<div id={uniqueId} className={`sp-smart-post-block-wrapper${visibilityClass}`}> |
| 71 |
<div className="sp-smart-post-smart-image"> |
| 72 |
<figure className={`sp-smart-image-wrapper sp-text-position-${imgTextPosition}`}> |
| 73 |
<div className={`sp-smart-image-button sp-d-flex sp-justify-${ imgAlignment }`}> |
| 74 |
<div |
| 75 |
className={`sp-smart-post sp-smart-image-area${imgMaskClass} ${smartImgBgEnable ? "sp-has-bg" : ""}`} |
| 76 |
> |
| 77 |
<ImgLinkTag> |
| 78 |
<div className="sp-smart-image-wrapper sp-overflow-hidden"> |
| 79 |
<img |
| 80 |
className={`sp-smart-image sp-image-ratio-${aspectRatio} sp-${imgAnimationNormal}`} |
| 81 |
src={imgSelectSizeObj?.source_url || selectImage?.url} |
| 82 |
alt={imageAltText} |
| 83 |
srcSet={imgSrcSetRetina} |
| 84 |
loading={lazyLoad ? "lazy" : "eager"} |
| 85 |
sizes={`(max-width: ${imgSelectSizeObj?.width}px) 100vw, ${imgSelectSizeObj?.width}px`} |
| 86 |
/> |
| 87 |
</div> |
| 88 |
{imgHoverOverlayEnable && ( |
| 89 |
<div className={`sp-hover-img-overlay sp-${imgAnimationNormal}`}></div> |
| 90 |
)} |
| 91 |
</ImgLinkTag> |
| 92 |
{enableLink && "button" === linkType && ( |
| 93 |
<div className={`sp-smart-image-link-btn-wrapper sp-position-${buttonPosition}`}> |
| 94 |
<span className={`sp-smart-image-link-btn`}>{buttonLabel}</span> |
| 95 |
</div> |
| 96 |
)} |
| 97 |
{"over-img" === imgTextPosition && ( |
| 98 |
<SmartImageCaption attributes={attributes} setAttributes={setAttributes} /> |
| 99 |
)} |
| 100 |
</div> |
| 101 |
</div> |
| 102 |
{"over-img" !== imgTextPosition && ( |
| 103 |
<SmartImageCaption attributes={attributes} setAttributes={setAttributes} /> |
| 104 |
)} |
| 105 |
</figure> |
| 106 |
</div> |
| 107 |
</div> |
| 108 |
</> |
| 109 |
); |
| 110 |
}; |
| 111 |
export default RenderSmartImage; |
| 112 |
|
