Merge pull request #2931 from statisticsnorway/MIM-801-mindre-bilder

[MIM-801] ArticleArchive image

src/main/resources/react4xp/_entries/ArticleArchive.tsx

@@ -5,8 +5,8 @@ import { ChevronDown } from 'react-feather'
 import { default as groupBy } from 'ramda/es/groupBy'
 import axios from 'axios'
 import { sanitize } from '../../lib/ssb/utils/htmlUtils'
-import { generateImageUrls } from '../../lib/ssb/utils/generateImageUrlUtils'
 import { type ArticleArchiveProps, type ParsedArticleData } from '../../lib/types/partTypes/articleArchive'
+import { generateImageUrls } from '../../lib/ssb/utils/generateImageUrlUtils'
 
 function ArticleArchive(props: ArticleArchiveProps) {
   const {
@@ -29,10 +29,6 @@ function ArticleArchive(props: ArticleArchiveProps) {
   const [totalCount, setTotalCount] = useState(firstArticles.total)
   const [loading, setLoading] = useState<boolean>()
 
-  const { imageMobileUrl, imageTabletUrl } = image
-    ? generateImageUrls(image)
-    : { imageMobileUrl: '', imageTabletUrl: '' }
-
   function fetchArticles() {
     setLoading(true)
     axios
@@ -131,7 +127,9 @@ function ArticleArchive(props: ArticleArchiveProps) {
           <Col className='col-12 d-flex justify-content-center'>
             <img
               src={image}
-              srcSet={`${imageMobileUrl} 600w, ${imageTabletUrl} 992w, ${image} 1180w`}
+              srcSet={`${generateImageUrls(image).imageMobileUrl} 600w, 
+           ${generateImageUrls(image).imageTabletUrl} 992w, 
+           ${image} 1180w`}
               sizes='(max-width: 600px) 600px, (max-width: 992px) 992px, 1180px'
               alt={imageAltText}
               loading='lazy'