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>
