diff --git a/services/Helpers/PortableInfoboxImagesHelper.php b/services/Helpers/PortableInfoboxImagesHelper.php
index e4ceccd..da6e35b 100644
--- a/services/Helpers/PortableInfoboxImagesHelper.php
+++ b/services/Helpers/PortableInfoboxImagesHelper.php
@@ -58,7 +58,8 @@ class PortableInfoboxImagesHelper {
 		}
 		$ref = null;
 
-		\Hooks::run( 'PortableInfoboxRenderServiceHelper::extendImageData', [ $data, &$ref ] );
+		$dataAttrs = [];
+		\Hooks::run( 'PortableInfoboxRenderServiceHelper::extendImageData', [ $data, &$ref, &$dataAttrs ] );
 
 		return array_merge( $data, [
 			'ref' => $ref,
@@ -68,10 +69,7 @@ class PortableInfoboxImagesHelper {
 			'thumbnail2x' => $thumbnail2x->getUrl(),
 			'key' => urlencode( $data['key'] ?? '' ),
 			'media-type' => isset( $data['isVideo'] ) && $data['isVideo'] ? 'video' : 'image',
-			'mercuryComponentAttrs' => json_encode( [
-				'itemContext' => 'portable-infobox',
-				'ref' => $ref
-			] )
+			'dataAttrs' => json_encode( $dataAttrs ),
 		] );
 	}
 
@@ -80,16 +78,28 @@ class PortableInfoboxImagesHelper {
 	 * @return array
 	 */
 	public function extendImageCollectionData( $images ) {
-		$mercuryComponentAttrs = [
-			'refs' => array_map( function ( $image ) {
-				return $image['ref'];
-			}, $images )
-		];
+		$dataAttrs = array_map(
+			function ( $image ) {
+				return json_decode( $image['dataAttrs'] );
+			},
+			$images
+		);
+
+		$images = array_map(
+			function ( $image, $index ) {
+				$image['dataRef'] = $index;
+
+				return $image;
+			},
+			$images,
+			array_keys($images)
+		);
+
 		$images[0]['isFirst'] = true;
 		return [
 			'images' => $images,
 			'firstImage' => $images[0],
-			'mercuryComponentAttrs' => json_encode( $mercuryComponentAttrs )
+			'dataAttrs' => json_encode( $dataAttrs )
 		];
 	}
 
diff --git a/services/PortableInfoboxMobileRenderService.class.php b/services/PortableInfoboxMobileRenderService.class.php
index e0f5735..1788ce7 100644
--- a/services/PortableInfoboxMobileRenderService.class.php
+++ b/services/PortableInfoboxMobileRenderService.class.php
@@ -93,6 +93,7 @@ class PortableInfoboxMobileRenderService extends PortableInfoboxRenderService {
 		}
 
 		$data = SanitizerBuilder::createFromType( 'image' )->sanitize( $data );
+
 		return parent::render( $templateName, $data );
 	}
 
diff --git a/templates/PortableInfoboxItemHeroMobile.mustache b/templates/PortableInfoboxItemHeroMobile.mustache
index d19de0c..e13c59a 100644
--- a/templates/PortableInfoboxItemHeroMobile.mustache
+++ b/templates/PortableInfoboxItemHeroMobile.mustache
@@ -8,7 +8,7 @@
 		</hgroup>
 	{{/title}}
 	{{#image}}
-		<figure data-component="portable-infobox-hero-image" data-attrs="{{mercuryComponentAttrs}}">
+		<figure data-component="portable-infobox-hero-image" data-attrs="{{dataAttrs}}">
 			<a href="{{url}}">
 				<img class="article-media-placeholder"
 					src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 {{width}} {{height}}'%2F%3E"
diff --git a/templates/PortableInfoboxItemImageCollectionMobile.mustache b/templates/PortableInfoboxItemImageCollectionMobile.mustache
index c143217..ae62104 100644
--- a/templates/PortableInfoboxItemImageCollectionMobile.mustache
+++ b/templates/PortableInfoboxItemImageCollectionMobile.mustache
@@ -1,9 +1,9 @@
-<div class="pi-image-collection"
+<div class="pi-image-collection gallery"
 	data-component="portable-infobox-image-collection"
-	data-attrs="{{mercuryComponentAttrs}}">
+	data-attrs="{{dataAttrs}}">
 
 	{{#images}}
-		<figure class="pi-item pi-image">
+		<figure class="pi-item pi-image" data-ref="{{dataRef}}">
 			<a href="{{url}}">
 				<img class="article-media-placeholder lazyload"
 				     src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 {{width}} {{height}}'%2F%3E"
diff --git a/templates/PortableInfoboxItemImageMobile.mustache b/templates/PortableInfoboxItemImageMobile.mustache
index 33b352b..d2f2b02 100644
--- a/templates/PortableInfoboxItemImageMobile.mustache
+++ b/templates/PortableInfoboxItemImageMobile.mustache
@@ -1,5 +1,5 @@
 <div class="pi-item pi-image">
-	<figure class="article-media-thumbnail" data-component="article-media-thumbnail" data-attrs="{{mercuryComponentAttrs}}">
+	<figure class="article-media-thumbnail" data-component="article-media-thumbnail" data-attrs="{{dataAttrs}}">
 		<a href="{{url}}">
 			<img class="article-media-placeholder"
 				src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 {{width}} {{height}}'%2F%3E"
diff --git a/tests/PortableInfoboxImagesHelperTest.php b/tests/PortableInfoboxImagesHelperTest.php
index ffeae05..3ef9652 100644
--- a/tests/PortableInfoboxImagesHelperTest.php
+++ b/tests/PortableInfoboxImagesHelperTest.php
@@ -117,7 +117,6 @@ class PortableInfoboxImagesHelperTest extends WikiaBaseTest {
 			'thumbnail2x' => null,
 			'key' => '',
 			'media-type' => 'image',
-			'mercuryComponentAttrs' => '{"itemContext":"portable-infobox","ref":null}',
 			'width' => $resultDimensions[ 'width' ],
 			'height' => $resultDimensions[ 'height' ]
 		];
diff --git a/tests/PortableInfoboxMobileRenderServiceTest.php b/tests/PortableInfoboxMobileRenderServiceTest.php
index e7dc9b5..7d3102c 100644
--- a/tests/PortableInfoboxMobileRenderServiceTest.php
+++ b/tests/PortableInfoboxMobileRenderServiceTest.php
@@ -553,10 +553,6 @@ class PortableInfoboxMobileRenderServiceTest extends WikiaBaseTest {
 						'thumbnail2x' => 'http://image2x.jpg',
 						'media-type' => 'image',
 						'isVideo' => false,
-						'mercuryComponentAttrs' => json_encode( [
-							'itemContext' => 'portable-infobox',
-							'ref' => 1
-						] )
 					]
 				]
 			],
@@ -609,10 +605,6 @@ class PortableInfoboxMobileRenderServiceTest extends WikiaBaseTest {
 						'thumbnail2x' => 'thumbnail2x.jpg',
 						'isVideo' => false,
 						'media-type' => 'image',
-						'mercuryComponentAttrs' => json_encode( [
-							'itemContext' => 'portable-infobox',
-							'ref' => 44
-						] )
 					]
 				]
 			],
@@ -717,10 +709,6 @@ class PortableInfoboxMobileRenderServiceTest extends WikiaBaseTest {
 						'thumbnail2x' => 'thumbnail2x.jpg',
 						'isVideo' => false,
 						'media-type' => 'image',
-						'mercuryComponentAttrs' => json_encode( [
-							'itemContext' => 'portable-infobox',
-							'ref' => 44
-						] )
 					]
 				]
 			],
@@ -825,10 +813,6 @@ class PortableInfoboxMobileRenderServiceTest extends WikiaBaseTest {
 						'thumbnail2x' => 'thumbnail2x.jpg',
 						'isVideo' => false,
 						'media-type' => 'image',
-						'mercuryComponentAttrs' => json_encode( [
-							'itemContext' => 'portable-infobox',
-							'ref' => 44
-						] )
 					]
 				]
 			]