Skip to content

Instantly share code, notes, and snippets.

@danielpost
Last active March 11, 2017 10:32
Show Gist options
  • Save danielpost/dd450ef70c028cb0a29eebc22b4f3f1f to your computer and use it in GitHub Desktop.
Save danielpost/dd450ef70c028cb0a29eebc22b4f3f1f to your computer and use it in GitHub Desktop.
Preload blurred image and fade in full image
<?php
/**
* Adds a Base64 encoded version of the Featured Image thumbnail
* to post meta
*
* @param int $post_id ID of the post that's being updated.
*/
function dp_add_base64_featured_image_thumb($post_id) {
// If this is just a revision, don't do anything.
if (wp_is_post_revision($post_id)) {
return;
}
// If this isn't a regular page or post, don't proceed.
$post_type = get_post_type($post_id);
if ($post_type != 'page' && $post_type != 'post') {
return;
}
// Get the ID of the Featured Image.
$thumb_id = (int) get_post_thumbnail_id($post_id);
// Make sure the Featured Image exists.
if (!empty($thumb_id)) {
// Get the thumbnail version of the Featured Image.
$thumb = wp_get_attachment_image_src($thumb_id, 'dp-page-header-thumb');
// Get the MIME type of the Featured Image.
$thumb_mime = get_post_mime_type($thumb_id);
// Pass the Featured Image URL and MIME type into our helper function.
$thumb = dp_get_data_uri($thumb[0], $thumb_mime);
if (!empty($thumb)) {
update_post_meta($post_id, 'dp_featured_image_thumb_base64', $thumb);
}
}
}
add_action('save_post', 'dp_add_base64_featured_image_thumb');
<?php
$image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'dp-page-header');
$thumb = get_post_meta(get_the_ID(), 'dp_featured_image_thumb_base64', true);
?>
<?php if (!empty($image) && !empty($thumb)) : ?>
<div class="image" style="background-image: url('<?php echo esc_attr($thumb); ?>')" data-dp-full-image="<?php echo $image[0]; ?>"></div>
<?php endif; ?>
<?php
/**
* Return a base64-encoded version of a file.
*
* @param string $url URL of the file to be encoded.
* @param string $mime Optional. MIME type of the file. Default MIME type from mime_content_type/empty.
* @return string|void Base-64 encoded version of the file if not empty.
*/
function dp_get_data_uri($url, $mime = '') {
if (empty($url)) {
return;
}
// If $mime is not passed, try to get it automatically with mime_content_type.
if (empty($mime)) {
// Convert URL to path (relative link with first '/' removed).
$path = ltrim(wp_make_link_relative(esc_url($url)), '/');
$mime = function_exists('mime_content_type') ? mime_content_type($path) : '';
}
// Initiate cURL.
$ch = curl_init();
// Set URL.
curl_setopt($ch, CURLOPT_URL, esc_url($url));
// Return the transfer as a string.
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// $output contains the output string.
$output = curl_exec($ch);
// Close cURL resource to free up system resources.
curl_close($ch);
if (!empty($ch)) {
return 'data: ' . esc_attr($mime) . ';base64,' . base64_encode($output);
} else {
return '';
}
}
var image = $('.image');
if (image.length) {
var fullImage = image.data('dp-full-image');
if (fullImage) {
var dummyImage = new Image();
dummyImage.style.display = 'none';
dummyImage.src = fullImage;
dummyImage.onload = function() {
image.css('background-image', 'url(' + fullImage + ')');
};
dummyImage.remove();
}
}
.image {
background-size: cover;
background-position: center;
transition: background 0.4s ease-in-out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment