PLANET-5757 Add image title attribute

Previously, the global.js adds the image title attribute with alt text. To remove jQuery from global.js, drop the gobal.js and add img title at source.
greenpeace · Jun 14, 2021 · ffb9344 · ffb9344
1 parent f375b05
commit ffb9344
Show file tree

Hide file tree

Showing 13 changed files with 26 additions and 11 deletions.
diff --git a/assets/src/blocks/Columns/Columns.js b/assets/src/blocks/Columns/Columns.js
@@ -47,9 +47,9 @@ export const Columns = ({ columns, columns_block_style, isCampaign, isExample =
                     data-ga-action={columns_block_style === LAYOUT_ICONS ? 'Icon' : 'Image'}
                     data-ga-label={cta_link}
                   >
-                    <img src={attachment} alt={title} loading='lazy' />
+                    <img src={attachment} alt={title} title={title} loading='lazy' />
                   </a> :
-                  <img src={attachment} alt={title} loading='lazy' />
+                  <img src={attachment} alt={title} title={title} loading='lazy' />
                 }
               </div>
             }

diff --git a/assets/src/blocks/Covers/CampaignCovers.js b/assets/src/blocks/Covers/CampaignCovers.js
@@ -33,6 +33,7 @@ export const CampaignCovers = ({ covers, initialRowsLimit, row, loadMoreCovers }
                       srcSet={src_set}
                       src={image[0]}
                       alt={alt_text}
+                      title={alt_text}
                     />
                   }
                   <span className='yellow-cta'><span aria-label='hashtag'>#</span>{name}</span>

diff --git a/assets/src/blocks/Covers/ContentCovers.js b/assets/src/blocks/Covers/ContentCovers.js
@@ -57,6 +57,7 @@ export const ContentCovers = ({ covers, initialRowsLimit, row, loadMoreCovers })
                           loading='lazy'
                           src={thumbnail}
                           alt={alt_text}
+                          title={alt_text}
                           srcSet={srcset}
                           sizes={IMAGE_SIZES.content}
                         />

diff --git a/assets/src/blocks/Gallery/GalleryCarousel.js b/assets/src/blocks/Gallery/GalleryCarousel.js
@@ -98,6 +98,7 @@ export const GalleryCarousel = ({ images, onImageClick }) => {
               sizes={IMAGE_SIZES.carousel}
               style={{ objectPosition: image.focus_image }}
               alt={image.alt_text}
+              title={image.alt_text}
               onClick={() => {
                 onImageClick(index);
               }}

diff --git a/assets/src/blocks/Gallery/GalleryGrid.js b/assets/src/blocks/Gallery/GalleryGrid.js
@@ -12,6 +12,7 @@ export const GalleryGrid = ({ images, onImageClick }) => (
             sizes={IMAGE_SIZES.grid}
             style={{ objectPosition: image.focus_image }}
             alt={image.alt_text}
+            title={image.alt_text}
             onClick={() => {
               onImageClick(index);
             }}

diff --git a/assets/src/blocks/Gallery/GalleryThreeColumns.js b/assets/src/blocks/Gallery/GalleryThreeColumns.js
@@ -15,6 +15,7 @@ export const GalleryThreeColumns = ({ images, postType, onImageClick }) => (
               sizes={IMAGE_SIZES[`threeColumns${index}`]}
               style={{ objectPosition: image.focus_image }}
               alt={image.alt_text}
+              title={image.alt_text}
               className={`img_${postType}`}
               onClick={() => {
                 onImageClick(index);

diff --git a/assets/src/blocks/Splittwocolumns/SplittwocolumnsFrontend.js b/assets/src/blocks/Splittwocolumns/SplittwocolumnsFrontend.js
@@ -35,7 +35,8 @@ export const SplittwocolumnsFrontend = ({
           <div className="split-two-column-item-image">
             <img src={issue_image_src}
                  srcSet={issue_image_srcset}
-                 alt={issue_image_title || ''}
+                 alt={issue_image_title}
+                 title={issue_image_title}
                  style={{objectPosition: focus_issue_image}}
                  sizes={IMAGE_SIZES.columnLeft}
             />
@@ -71,7 +72,8 @@ export const SplittwocolumnsFrontend = ({
           <div className="split-two-column-item-image">
             <img src={tag_image_src}
                  srcSet={tag_image_srcset}
-                 alt={tag_image_title || ''}
+                 alt={tag_image_title}
+                 title={tag_image_title}
                  style={{objectPosition: focus_tag_image}}
                  sizes={IMAGE_SIZES.columnRight}
             />

diff --git a/assets/src/blocks/Splittwocolumns/SplittwocolumnsInPlaceEdit.js b/assets/src/blocks/Splittwocolumns/SplittwocolumnsInPlaceEdit.js
@@ -42,7 +42,8 @@ export const SplittwocolumnsInPlaceEdit = ({attributes, charLimit, setAttributes
           <div className="split-two-column-item-image">
             <img
               src={issue_image_src}
-              alt={issue_image_title || ''}
+              alt={issue_image_title}
+              title={issue_image_title}
               style={{objectPosition: focus_issue_image}}
             />
           </div>
@@ -92,7 +93,8 @@ export const SplittwocolumnsInPlaceEdit = ({attributes, charLimit, setAttributes
           <div className="split-two-column-item-image">
             <img
               src={tag_image_src}
-              alt={tag_image_title || ''}
+              alt={tag_image_title}
+              title={tag_image_title}
               style={{objectPosition: focus_tag_image}}
             />
           </div>

diff --git a/templates/blocks/campaign_covers.twig b/templates/blocks/campaign_covers.twig
@@ -36,7 +36,7 @@
 								aria-label="{{ __( 'Check our campaign about ' ~ tag.name, 'planet4-blocks') }}">
 									<div class="thumbnail-large">
 										{% if ( tag.image[0] ) %}
-											<img src="{{ tag.image[0] }}" alt="{{ tag.alt_text }}">
+											<img src="{{ tag.image[0] }}" alt="{{ tag.alt_text }}" title="{{ tag.alt_text }}">
 										{% endif %}
 										<span class="yellow-cta"><span aria-label="hashtag">#</span>{{ tag.name }}</span>
 									</div>

diff --git a/templates/blocks/carousel_header_full-width-classic.twig b/templates/blocks/carousel_header_full-width-classic.twig
@@ -31,7 +31,8 @@
 										sizes="{{ slide.image_sizes }}"
 										data-background-position="{{ slide.focus_image }}"
 										loading="lazy"
-										alt="{{ slide.image_alt  }}">
+										alt="{{ slide.image_alt }}"
+										title="{{ slide.image_alt }}">
 
 									<div class="carousel-caption">
 										<div class="caption-overlay"></div>

diff --git a/templates/blocks/content_covers.twig b/templates/blocks/content_covers.twig
@@ -33,7 +33,11 @@
 												data-ga-action="Image"
 												data-ga-label="n/a"
 												aria-label="{{ __( 'Cover image, link to ' ~ post.post_title , 'planet4-blocks' ) }}">
-													<img src="{{ post.thumbnail }}" alt="{{ post.alt_text }}" srcset="{{ post.srcset }}">
+													<img
+														src="{{ post.thumbnail }}"
+														alt="{{ post.alt_text }}"
+														title="{{ post.alt_text }}"
+														srcset="{{ post.srcset }}">
 											</a>
 										{% endif %}
 									</div>

diff --git a/templates/blocks/social_media_cards.twig b/templates/blocks/social_media_cards.twig
@@ -20,7 +20,8 @@
 						<div class="grid-item">
 							<img src="{{ card.image_src }}"
 								srcset="{{ card.image_srcset }}" sizes="{{ card.image_sizes }}"
-								alt="{{ card.alt_text }}">
+								alt="{{ card.alt_text }}"
+								title="{{ card.alt_text }}">
 
 							<div class="share-strip">
 								<a href="https://www.facebook.com/share.php?u={{ card.social_url|default(post_url)|url_encode }}&quote={{ card.message|url_encode }}"

diff --git a/templates/blocks/take-action-boxout.twig b/templates/blocks/take-action-boxout.twig
@@ -13,7 +13,7 @@
 				class="cover-card-overlay"
 				href="{{ boxout.link|default('#') }}" {{ boxout.new_tab and boxout.link ? 'target="_blank"' }}
 			></a>
-			<img src={{ boxout.image }} alt="{{ boxout.image_alt }}" />
+			<img src={{ boxout.image }} alt="{{ boxout.image_alt }}" title="{{ boxout.image_alt }}" />
 			<div class="cover-card-more">{{ __( 'Want to do more?', 'planet4-blocks' ) }}</div>
 			<div class="cover-card-content">
 				{% if ( boxout.campaigns ) %}