phowie74
10/4/2018 - 10:11 AM

Image Block - Responsive with Retina Support

<?php defined('C5_EXECUTE') or die('Access Denied.');
$app = \Concrete\Core\Support\Facade\Application::getFacadeApplication();
if (is_object($f) && $f->getFileID()) {
  $fv = $f->getApprovedVersion();
  $fl = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('full');
  $full = $fv->getThumbnailURL($fl->getBaseVersion());
  $full2x = $fv->getRelativePath();
  $sml = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('small');
  $small = $fv->getThumbnailURL($sml->getBaseVersion());
  $small2x = $fv->getThumbnailURL($sml->getDoubledVersion());
  $med = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('medium');
  $medium = $fv->getThumbnailURL($med->getBaseVersion());
  $medium2x = $fv->getThumbnailURL($med->getDoubledVersion());
  $lge = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('large');
  $large = $fv->getThumbnailURL($lge->getBaseVersion());
  $large2x = $fv->getThumbnailURL($lge->getDoubledVersion());

  if ($altText) {
    $alt = h($altText);
  } else {
    $alt = $f->getTitle();
  }

?>

<?php if ($linkURL) { echo '<a href="' . $linkURL . '">'; } ?>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<?php
if(!empty($full)) {
  echo '<source srcset="'.$full;
  if(!empty($full2x)) { echo ', '.$full2x.' 2x'; }
  echo '" media="(min-width: 1200px)">';
}
if(!empty($large)) {
  echo '<source srcset="'.$large;
  if(!empty($large2x)) { echo ', '.$large2x.' 2x'; }
  echo '" media="(min-width: 1000px)">';
}
if(!empty($medium)) {
  echo '<source srcset="'.$medium;
  if(!empty($medium2x)) { echo ', '.$medium2x.' 2x'; }
  echo '" media="(min-width: 800px)">';
}
?>
<!--[if IE 9]></video><![endif]-->
<?php
  echo '<img srcset="'.$small;
  if(!empty($small2x)) { echo ', '.$small2x.' 2x'; }
  echo '" alt="'.$alt.'" class="img-responsive">';
?>
</picture>

<?php } elseif ($c->isEditMode()) { ?>

    <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Image Block.'); ?></div>

<?php
}