[MIM-801] Mim 801 smaller img for mobile and lazy loading

src/main/resources/admin/tools/dashboard/dashboard.html

@@ -23,7 +23,7 @@
             </nav>
             <div class="misc">
               <div class="logo-container">
-                <img data-th-src="${logoUrl}" class="logo" alt="" />
+                <img data-th-src="${logoUrl}" class="logo" alt="" loading='lazy'/>
                 <span data-th-if="${environmentText}" data-th-utext="${environmentText}" class="environment-logo-overlay" />
               </div>
               <h1>Dashboard</h1>

src/main/resources/lib/ssb/utils/generateImageUrlUtils.ts

@@ -0,0 +1,14 @@
+export function generateImageUrls(imageUrl: string) {
+  const sizes = {
+    mobile: 'block-600-200',
+    tablet: 'block-992-275',
+  }
+
+  const imageMobileUrl = imageUrl.replace(/block-\d+-\d+/, sizes.mobile)
+  const imageTabletUrl = imageUrl.replace(/block-\d+-\d+/, sizes.tablet)
+
+  return {
+    imageMobileUrl,
+    imageTabletUrl,
+  }
+}

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

@@ -1,10 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Divider, Button, LeadParagraph, Paragraph, Link } from '@statisticsnorway/ssb-component-library'
 import { Container, Row, Col } from 'react-bootstrap'
 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'
 
 function ArticleArchive(props: ArticleArchiveProps) {
@@ -28,6 +29,14 @@ function ArticleArchive(props: ArticleArchiveProps) {
   const [totalCount, setTotalCount] = useState(firstArticles.total)
   const [loading, setLoading] = useState<boolean>()
 
+  useEffect(() => {
+    if (image) {
+      const { imageMobileUrl, imageTabletUrl } = generateImageUrls(image)
+      console.log({ imageMobileUrl, imageTabletUrl })
+      console.log(image)
+    }
+  }, [image])
+
   function fetchArticles() {
     setLoading(true)
     axios
@@ -124,7 +133,17 @@ function ArticleArchive(props: ArticleArchiveProps) {
         </Col>
         {image && (
           <Col className='col-12 d-flex justify-content-center'>
-            <img src={image} alt={imageAltText} />
+            <img
+              src={image}
+              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'
+              decoding='async'
+              style={{ width: '100%', height: 'auto', objectFit: 'contain' }}
+            />
           </Col>
         )}
         <Col className='col-12 col-lg-10 offset-lg-1 p-0'>

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

@@ -28,7 +28,7 @@ const EntryLinks = (props: EntryLinksProps) => {
         <div className='col-md-3 mt-4 p-0' key={`entry-link-${index}`}>
           <div className='row text-start text-md-center '>
             <div className='col-md-12 col-auto align-items-end d-none d-md-inline'>
-              <img src={icon} alt={altText ? altText : ''} className='desktop-icons' />
+              <img src={icon} alt={altText ? altText : ''} className='desktop-icons' loading='lazy' />
             </div>
             <div className='col-md-12 col-10 mt-md-4 d-md-flex justify-content-center'>
               <Link href={href} linkType='header' className='d-none d-md-block pt-1' standAlone>

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

@@ -22,7 +22,7 @@ const ExternalCards = (props: ExternalCardsProps) => {
               <Card
                 href={link.href}
                 hrefText={link.children}
-                icon={link.image && <img src={link.image} alt='' />}
+                icon={link.image && <img src={link.image} alt='' loading='lazy' />}
                 profiled
                 external
                 ariaLabel={link.children}

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

@@ -130,7 +130,7 @@ const Footer = (props: FooterContent) => {
         <div className='container'>
           <h2 className='sr-only'>{hiddenFooterText}</h2>
           <div className='footer-top-row'>
-            <img src={logoUrl} alt='' />
+            <img src={logoUrl} alt='' loading='lazy' />
             <Button negative onClick={() => goToTop()}>
               <ArrowUp size='22' className='me-2' />
               {topButtonText}

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

@@ -146,7 +146,7 @@ function Header(props: HeaderContent) {
       </nav>
       <div className='misc top-row flex-row justify-space-between flex-wrap'>
         <a id='header-logo' className='plainLink' href={logoUrl}>
-          <img src={logoSrc} alt={logoAltText ? logoAltText : ' '} className='logo' />
+          <img src={logoSrc} alt={logoAltText ? logoAltText : ' '} className='logo' loading='lazy' />
           {props.environmentText ? <span className='environment-logo-overlay'>[{props.environmentText}]</span> : null}
         </a>
 

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

@@ -85,7 +85,11 @@ const KeyFigures = (props: KeyFigureProps) => {
               {...keyFigure}
               icon={
                 keyFigure.iconUrl && (
-                  <img src={keyFigure.iconUrl} alt={keyFigure.iconAltText ? keyFigure.iconAltText : ''}></img>
+                  <img
+                    src={keyFigure.iconUrl}
+                    alt={keyFigure.iconAltText ? keyFigure.iconAltText : ''}
+                    loading='lazy'
+                  ></img>
                 )
               }
             />

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

@@ -13,7 +13,11 @@ const MenuBox = ({ boxes, height }: MenuBoxProps) => {
               key={`box_${index}`}
               title={box.title}
               href={box.href}
-              icon={box.icon ? <img src={box.icon.src} alt={box.icon.alt ? box.icon.alt : ''}></img> : undefined}
+              icon={
+                box.icon ? (
+                  <img src={box.icon.src} alt={box.icon.alt ? box.icon.alt : ''} loading='lazy'></img>
+                ) : undefined
+              }
               profiled
             >
               {box.subtitle ? <Text>{box.subtitle}</Text> : undefined}

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

@@ -109,7 +109,7 @@ function RelatedArticles(props: RelatedArticlesProps) {
               <Card
                 href={href}
                 imagePlacement='top'
-                image={<img src={imageSrc} alt={imageAlt ?? ''} />}
+                image={<img src={imageSrc} alt={imageAlt ?? ''} loading='lazy' />}
                 title={title}
                 subTitle={subTitle}
                 ariaLabel={ariaLabel}

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

@@ -16,7 +16,7 @@ const StatbankBox = (props: StatbankBoxProps) => {
         >
           <div className='content'>
             <div className='icon-wrapper'>
-              <img src={icon} alt='' />
+              <img src={icon} alt='' loading='lazy' />
             </div>
             <div className='title-wrapper'>
               <h3 className='title'>{title}</h3>

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

@@ -73,7 +73,7 @@ const RelatedStatistics = (props: RelatedStatisticsProps) => {
                 href={href}
                 title={title}
                 ariaDescribedBy='text'
-                icon={icon && <img src={icon} alt={iconAlt ?? ''} />}
+                icon={icon && <img src={icon} alt={iconAlt ?? ''} loading='lazy' />}
               >
                 <Text>{preamble}</Text>
               </Card>

src/main/resources/react4xp/bestbet/Bestbet.tsx

@@ -399,7 +399,7 @@ function Bestbet(props: BestbetProps) {
         <Row className='bestbet-header'>
           <Col className='flex-row align-items-center'>
             <div className='logo-container'>
-              <img src={props.logoUrl} className='logo' />
+              <img src={props.logoUrl} className='logo' loading='lazy' />
               {props.environmentText ? (
                 <span className='environment-logo-overlay'>[{props.environmentText}]</span>
               ) : null}

src/main/resources/react4xp/variables/VariableCard.tsx

@@ -9,7 +9,7 @@ interface VariableCardProps {
 const VariableCard = ({ variable }: VariableCardProps) => {
   const { icon, description, ...rest } = variable
   return (
-    <Card {...rest} icon={icon ? <img src={icon} alt={variable.title ? variable.title : ' '} /> : null}>
+    <Card {...rest} icon={icon ? <img src={icon} alt={variable.title ? variable.title : ' '} loading='lazy' /> : null}>
       <Text>{description}</Text>
     </Card>
   )

src/main/resources/site/error/404.html

@@ -1,7 +1,7 @@
 <div class="row d-flex justify-content-center error-page">
     <div class="logo col-12 mt-4">
         <a href="/">
-            <img data-th-src="${logo}" alt="SSB logo" />
+            <img data-th-src="${logo}" alt="SSB logo" loading='lazy'/>
         </a>
     </div>
     <div class="col-12 title-wrapper d-flex justify-content-center">
@@ -21,6 +21,6 @@ <h1 class="col-12 col-md-8 pl-md-5 ml-md-3" data-th-text="${title}">Denne siden
         </div>
     </div>
     <div class="col-8 col-md-3 mt-md-4 ml-md-5 illustration">
-        <img data-th-src="${illustration}" alt="404 feil / Error 404" />
+        <img data-th-src="${illustration}" alt="404 feil / Error 404" loading='lazy' />
     </div>
 </div>

src/main/resources/site/error/generic.html

@@ -1,7 +1,7 @@
 <div class="row d-flex justify-content-center error-page">
     <div class="logo col-12 mt-4">
         <a href="/">
-            <img data-th-src="${logo}" alt="SSB logo" />
+            <img data-th-src="${logo}" alt="SSB logo" loading='lazy'/>
         </a>
     </div>
     <div class="col-12 title-wrapper d-flex justify-content-center">

src/main/resources/site/parts/articleArchive/articleArchive.ts

@@ -39,7 +39,7 @@ function renderPart(req: XP.Request) {
 
   const preamble: string | undefined = page.data.preamble ? page.data.preamble : undefined
 
-  /* TODO: Image needs to rescale dynamically in mobile version */
+  //IMAGE
   const image: string | undefined = page.data.image
     ? imageUrl({
         id: page.data.image,

src/main/resources/site/parts/banner/banner.tsx

@@ -25,7 +25,14 @@ function Banner(props: BannerProps) {
     <>
       {bannerImage && (
         <figure className='banner-image position-absolute d-flex justify-content-center'>
-          <img className=' d-print-none' sizes={sizes} src={bannerImage} srcSet={srcset} alt={bannerImageAltText} />
+          <img
+            className=' d-print-none'
+            sizes={sizes}
+            src={bannerImage}
+            srcSet={srcset}
+            alt={bannerImageAltText}
+            loading='lazy'
+          />
         </figure>
       )}
       <div className='container h-100'>
@@ -55,7 +62,7 @@ function Banner(props: BannerProps) {
               {isLandingPage && (
                 <div className='col-12 position-relative'>
                   <a href={logoUrl}>
-                    <img className='logo' src={logoSrc} alt={logoAltText ? logoAltText : ' '} />
+                    <img className='logo' src={logoSrc} alt={logoAltText ? logoAltText : ' '} loading='lazy' />
                   </a>
                 </div>
               )}

src/main/resources/site/parts/employee/employee.tsx

@@ -91,7 +91,7 @@ const Employee = (props: EmployeeProps) => {
       <div className='employee-head col-12'>
         {profileImages.length != 0 ? (
           <div className='employee-image'>
-            <img alt={pressImageAltText ?? ''} src={props.profileImages[0]} />
+            <img alt={pressImageAltText ?? ''} src={props.profileImages[0]} loading='lazy' />
           </div>
         ) : null}
         {profileImages.length != 0 ? (

src/main/resources/site/parts/frontPageBanner/frontPageBanner.html

@@ -6,7 +6,7 @@
                     <h1 data-th-text="${bannerText}"></h1>
                 </div>
                 <div class="d-none d-lg-inline-block">
-                    <img data-th-src="${bannerImage}" alt="">
+                    <img data-th-src="${bannerImage}" alt="" loading='lazy'>
                 </div>
             </div>
         </div>

src/main/resources/site/parts/infoGraphics/infoGraphics.tsx

@@ -14,7 +14,7 @@ function InfoGraphics(props: InfoGraphicsProps) {
             </Title>
 
             <div className='d-flex justify-content-center'>
-              <img alt={props.altText} src={props.imageSrc} />
+              <img alt={props.altText} src={props.imageSrc} loading='lazy' />
               <a href={props.longDesc} className='sr-only'>
                 {props.descriptionStaticVisualization}
               </a>

src/main/resources/site/parts/profiledBox/profiledBox.tsx

@@ -11,7 +11,7 @@ const ProfiledBox = (props: ProfiledBoxProps) => {
       subTitle={subTitle}
       title={title}
       linkType='header'
-      image={<img src={imgUrl} alt={imageAltText} />}
+      image={<img src={imgUrl} alt={imageAltText} loading='lazy' />}
       ariaLabel={ariaLabel}
     >
       <Paragraph className={`preambleText${titleSize ? ` title-size-${titleSize}` : ''}`} aria-hidden='true'>

src/main/resources/site/parts/simpleStatbank/simpleStatbank.tsx

@@ -60,7 +60,7 @@ function SimpleStatbank(props: SimpleStatbankProps) {
     if (!!icon) {
       return (
         <div className='icon-wrapper'>
-          <img src={icon} alt={altText ? altText : ''} aria-hidden='true' />
+          <img src={icon} alt={altText ? altText : ''} aria-hidden='true' loading='lazy' />
         </div>
       )
     } else {

src/main/resources/site/parts/staticVisualization/staticVisualization.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import {
   Link,
-  ExpansionBox,
+  FactBox,
   Tabs,
   Divider,
   Table as SSBTable,
@@ -159,7 +159,7 @@ function StaticVisualization(props: StaticVisualizationProps) {
             {renderTabs()}
             {activeTab === 'figure' && (
               <div className='static-visualization-chart' id={`tabpanel-0-${props.id}`}>
-                <img alt={props.altText} src={props.imageSrc} />
+                <img alt={props.altText} src={props.imageSrc} loading='lazy' />
               </div>
             )}
 
@@ -169,7 +169,7 @@ function StaticVisualization(props: StaticVisualizationProps) {
               </div>
             )}
 
-            <ExpansionBox header={props.descriptionStaticVisualization} text={renderLongDescriptionAndSources()} />
+            <FactBox header={props.descriptionStaticVisualization} text={renderLongDescriptionAndSources()} />
           </figure>
         </Col>
       </Row>

src/tsconfig.react4xp.json

@@ -46,6 +46,7 @@
   	"main/resources/**/*.tsx",
     "main/resources/lib/types/**/*",
     "main/resources/lib/ssb/utils/htmlUtils.ts",
+    "main/resources/lib/ssb/utils/generateImageUrlUtils.ts",
     "main/**/*.d.ts", "main/resources/site/parts/highchartExpert/HighchartExpert.jsx", "main/resources/site/parts/highchart/Highchart.jsx", "main/resources/site/parts/highmap/Highmap.jsx", "main/resources/site/parts/nameSearch/nameSearch.jsx",
   ],
   "exclude": [