Universal-Omega/PortableInfobox
1
0
Fork 0
mirror of https://github.com/Universal-Omega/PortableInfobox.git synced 2024-11-15 11:59:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

XW-2234 | added srcset to infobox image, to display better quality images for retina

Browse source
This commit is contained in:
Weronika Rudnicka 2016-11-03 14:27:43 +01:00
parent a444abc707
commit ee7404ef6b
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
services/Helpers/PortableInfoboxRenderServiceHelper.php
View file

@ -72,7 +72,11 @@ class PortableInfoboxRenderServiceHelper {
'width' => round( $dimensions[ 'width' ] * $ratio ), 'width' => round( $dimensions[ 'width' ] * $ratio ),
'height' => round( $dimensions[ 'height' ] * $ratio ) 'height' => round( $dimensions[ 'height' ] * $ratio )
] ); ] );
if ( !$thumbnail || $thumbnail->isError() ) { $thumbnail2x = $file->transform( [
'width' => round( $dimensions[ 'width' ] * $ratio * 2 ),
'height' => round( $dimensions[ 'height' ] * $ratio * 2 )
] );
if ( !$thumbnail || $thumbnail->isError() || !$thumbnail2x || $thumbnail2x->isError() ) {
return false; return false;
} }
$ref = null; $ref = null;
@ -84,6 +88,7 @@ class PortableInfoboxRenderServiceHelper {
'height' => $dimensions[ 'height' ], 'height' => $dimensions[ 'height' ],
'width' => $dimensions[ 'width' ], 'width' => $dimensions[ 'width' ],
'thumbnail' => $thumbnail->getUrl(), 'thumbnail' => $thumbnail->getUrl(),
'thumbnail2x' => $thumbnail2x->getUrl(),
'key' => urlencode( $data[ 'key' ] ), 'key' => urlencode( $data[ 'key' ] ),
'media-type' => $data[ 'isVideo' ] ? 'video' : 'image', 'media-type' => $data[ 'isVideo' ] ? 'video' : 'image',
'mercuryComponentAttrs' => json_encode( [ 'mercuryComponentAttrs' => json_encode( [

2
templates/PortableInfoboxItemImage.mustache
View file

@ -5,7 +5,7 @@
<figure class="pi-item pi-image"> <figure class="pi-item pi-image">
<a href="{{url}}" class="image image-thumbnail{{#isVideo}} video video-thumbnail small{{/isVideo}}" <a href="{{url}}" class="image image-thumbnail{{#isVideo}} video video-thumbnail small{{/isVideo}}"
title="{{alt}}"> title="{{alt}}">
<img src="{{thumbnail}}" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}" <img src="{{thumbnail}}" srcset="{{thumbnail}} 1x, {{thumbnail2x}} 2x" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}"
data-{{media-type}}-key="{{key}}" data-{{media-type}}-name="{{name}}"/> data-{{media-type}}-key="{{key}}" data-{{media-type}}-name="{{name}}"/>
{{#isVideo}} {{#isVideo}}
{{#duration}} {{#duration}}