import Tasl from '../Tasl/Tasl' ; import { imageSizes } from '../../../utils/image-sizes' ; import { convertImageUri } from '../../../utils/convert-image-uri' ; import { UiImageProps } from '../Images/Images' ; import { Picture as PictureProps } from '../../../model/picture' ; import { FunctionComponent } from 'react' ; type Props = { images : PictureProps [ ] ; extraClasses ? : string ; isFull : boolean ; } ; export const Picture = ( { images , extraClasses , isFull = false , } ) => { const lastImage = images [ images . length - 1 ] ; const { tasl } = lastImage ; return ( < figure className = "relative no-margin" > < picture className = { extraClasses || '' } > { images . map ( image => { if ( image . width ) { const sizes = imageSizes ( image . width ) ; return ( < source key = { image . contentUrl } media = { image . minWidth ? `(min-width: ${ image . minWidth })` : '' } sizes = "100vw" srcSet = { sizes . map ( size => { return ( image . contentUrl && `${ convertImageUri ( image . contentUrl , size ) } ${ size }w` ) ; } ) . join ( ', ' ) } / > ) ; } } ) } { lastImage && lastImage . contentUrl && lastImage . width && ( < img className = "image block" src = { convertImageUri ( lastImage . contentUrl , lastImage . width ) } alt = { lastImage . alt || '' } / > ) } < /picture> { tasl && < Tasl { ... tasl } isFull = { isFull } / > } < /figure>); } ; type PictureFromImagesProps = { images : { string : UiImageProps ; } ; extraClasses ? : string ; isFull : boolean ; } ; export const PictureFromImages = ( { images , extraClasses , isFull = false , } ) => { const minWidths = Object . keys ( images ) ; const lastImage = images [ minWidths [ 0 ] ] ; return ( < figure className = "relative no-margin" > < picture className = { extraClasses || '' } > { minWidths . map ( minWidth => { const image = images [ minWidth ] ; if ( image . width ) { const sizes = imageSizes ( image . width ) ; return ( < source key = { image . contentUrl } media = { minWidth !== 'default' ? `(min-width: ${ minWidth })` : '' } sizes = "100vw" data - srcset = { sizes . map ( size => { return ( image . contentUrl && `${ convertImageUri ( image . contentUrl , size ) } ${ size }w` ) ; } ) } />); } } ) } { lastImage && lastImage . contentUrl && lastImage . width && ( < img height = { lastImage . height } width = { lastImage . width } className = "image lazy-image lazyload" data - src = { convertImageUri ( lastImage . contentUrl , lastImage . width ) } alt = { lastImage . alt || '' } / > ) } < /picture> { lastImage && < Tasl { ... lastImage . tasl } isFull = { isFull } / > } < /figure>); } ; export default Picture ;