function responsive_bg($img_field) { // Set the three images sizes to be used $img_information = wp_get_attachment_metadata($img_field); $path = '/wp-content/uploads/' . substr($img_information['file'], 0, 8); $file = substr($img_information['file'], 8); $smallest_image = $path . $img_information['sizes']['apple-square-57']['file']; // Assign the image sizes into an array $bg_images = array('default' => $path . $file, 'mobile' => $path . $img_information['sizes']['small-hero-png']['file'], '(min-width:320px) and (-webkit-device-pixel-ratio: 2)' => $path . $img_information['sizes']['medium-hero-png']['file'], '(min-width:640px)' => $path . $img_information['sizes']['medium-hero-png']['file'], '(min-width:640px) and (-webkit-device-pixel-ratio: 2)' => $path . $img_information['sizes']['large-hero-png']['file'], '(min-width:1000px)' => $path . $img_information['sizes']['large-hero-png']['file'], '(min-width:1000px) and (-webkit-device-pixel-ratio: 2)' => $path . $file, '(min-width:1200px)' => $path . $file); // Take the $bg_images array and run it through encoding // so the array is readable by the browser (defined below) $bg_images = format_responsive_image_array($bg_images); // Echo the cleaned image array, but surround it with // 'data-bgimg' so JS can run on it to replace images // when the browser is resized echo 'data-bgimg="' . base64_encode($bg_images) . '" style="background-image: url(\'' . $smallest_image . '\');"'; }
function responsive_bg($img_field) { // Set the three images sizes to be used $img_information = wp_get_attachment_metadata($img_field); $path = '/wp-content/uploads/' . substr($img_information['file'], 0, 8); $file = substr($img_information['file'], 8); $large_version = $img_information['sizes']['large-hero-png']['file'] !== null ? $path . $img_information['sizes']['large-hero-png']['file'] : $path . $file; $medium_version = $img_information['sizes']['medium-hero-png']['file'] !== null ? $path . $img_information['sizes']['medium-hero-png']['file'] : $path . $file; $small_version = $img_information['sizes']['small-hero-png']['file'] !== null ? $path . $img_information['sizes']['small-hero-png']['file'] : $path . $file; $relative_path = get_attached_file($img_field); $relative_path = str_replace(basename($relative_path), '', $relative_path); // Assign the image sizes into an array $bg_images = array('default' => $path . $file, 'mobile' => $small_version, '(min-width:320px) and (-webkit-device-pixel-ratio: 2)' => $medium_version, '(min-width:320px) and (-webkit-device-pixel-ratio: 3)' => $large_version, '(min-width:640px)' => $medium_version, '(min-width:640px) and (-webkit-device-pixel-ratio: 2)' => $large_version, '(min-width:1000px)' => $large_version, '(min-width:1000px) and (-webkit-device-pixel-ratio: 2)' => $path . $file, '(min-width:1200px)' => $path . $file); $the_small_preview = $bg_images['mobile']; // Take the $bg_images array and run it through encoding // so the array is readable by the browser (defined below) $bg_images = format_responsive_image_array($bg_images); $background_color = !empty(get_field('image_preload_color', $img_field)) ? get_field('image_preload_color', $img_field) : get_field('brand_image_preloading_color', 'options'); $background_color = $background_color == '' ? '#ECF1F3' : $background_color; // Echo the cleaned image array, but surround it with // 'data-bgimg' so JS can run on it to replace images // when the browser is resized echo ' data-bgimg="' . $bg_images . '" style="background-color:' . $background_color . ';background-image:url(\'' . base64_encode_image($relative_path . basename($small_version), 'jpg') . '\')" '; }
$gravatar_base .= '?d=' . urlencode($hero_bg) . '&r=pg'; ?> <?php $small_version = $gravatar_base . '&s=400'; ?> <?php $medium_version = $gravatar_base . '&s=800'; ?> <?php $large_version = $gravatar_base . '&s=1200'; ?> <?php $bg_images = array('default' => $large_version, 'mobile' => $small_version, '(min-width:640px)' => $medium_version, '(min-width:1000px)' => $large_version); ?> <?php $images = format_responsive_image_array($bg_images); ?> <section class="hero"> <div class="bg-image-blur" data-bgimg="<?php echo $images; ?> "></div> <div class="container"> <div class="column"> <div class="content"> <div class="left"> <img src="<?php echo $large_version; ?> " class="profile-pic" width="150" height="150" /> </div>