Skip to content

Instantly share code, notes, and snippets.

@bbmatt

bbmatt/content-banner.php

Last active August 29, 2015 14:25
Show Gist options
  • Save bbmatt/16bfa64e2e3379c007ce to your computer and use it in GitHub Desktop.
Save bbmatt/16bfa64e2e3379c007ce to your computer and use it in GitHub Desktop.
Download ZIP
Responsive wordpress background image example (metabox - cmb2)
Raw
content-banner.php
<?php
$image_id = get_post_meta( get_the_ID(), '_banner_image_id', true );
if(!empty($image_id)):
// Get responsive image sizes.
$banner_small = wp_get_attachment_image_src($image_id, 'banner_small');
$banner_medium = wp_get_attachment_image_src($image_id, 'banner_medium');
$banner_large = wp_get_attachment_image_src($image_id, 'banner_large');
// Construct inline style
echo "<style>@media (max-width: 640px) { .banner-image { background-image: url($banner_small[0]); } } @media (min-width: 641px) and (max-width: 1023px) { .banner-image { background-image: url($banner_medium[0]) } } @media (min-width: 1024px) { .banner-image { background-image: url($banner_large[0])} }</style>";
?>
<div class="banner <?php if($image_id) echo 'banner-image' ?> banner-<?php echo $section?>">
</div>
<?php endif; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment