Skip to content

Instantly share code, notes, and snippets.

@unculturedswine
Created February 6, 2018 03:34
Show Gist options
  • Save unculturedswine/c9f5721ae207c01b1a518e8e6f7b0b5d to your computer and use it in GitHub Desktop.
Save unculturedswine/c9f5721ae207c01b1a518e8e6f7b0b5d to your computer and use it in GitHub Desktop.
RICG for Wordpress
<?php
add_image_size( '480', 480, 9999, FALSE );
add_image_size( '768', 768, 9999, FALSE );
add_image_size( '1440', 1440, 9999, FALSE );
add_image_size( '1920', 1920, 9999, FALSE );
add_image_size( '2560', 2560, 9999, FALSE );
<?php
$url = $image['url'];
$alt = $image['alt'];
// Sizes
$phone = '480';
$phoneImage = $image['sizes'][$phone];
$tab = '768';
$tabImage = $image['sizes'][$tab];
$landscape = 'large';
$landscapeImage = $image['sizes'][$landscape];
$lappy = '1440';
$lappyImage = $image['sizes'][$lappy];
$hd = '1920';
$hdImage = $image['sizes'][$hd];
$thunder = '2560';
$thunderImage = $image['sizes'][$thunder];
?>
<figure><img
src="<?php echo $phoneImage ?>"
srcset="
<?php echo $phoneImage ?> 480w,
<?php echo $tabImage ?> 768w,
<?php echo $landscapeImage ?> 1024w,
<?php echo $lappyImage ?> 1440w,
<?php echo $hdImage ?> 1920w,
<?php echo $thunderImage ?> 2560w
"
alt="<?php echo $alt ?>"
class="ricg"
></figure>
@unculturedswine
Copy link
Author

This works great on Wordpress, using Advanced Custom Fields, to get images returned in an array to be displayed responsively.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment