Created an amazing function for a client and had to share.
This is great for WordPress sites with posts and media that have been imported from another install. On the client’s site, some images had featured images, some only had images in the content itself, and of the content images, some were internal, others external. These images are grabbed to use at the correct size for archive/homepage thumbnails*/
- Look for featured image, show if present
- Otherwise look for the first image in the content (whether internal or external)
- Check for an attachment ID, if present, show image at correct dimensions
- Otherwise show image at normal URL without thumbnail dimensions
I also used the plugin “Import External Images” to import all the media images that didn’t come over in the regular WP post import. This fixed a lot of the media dimension issues, as I could now get the attachment ID, but I left step 4 in, just in case this wasn’t possible.
Variables
- $size = post thumbnail / custom image sizes
- $url = return a URL or full image tag
<?php
/*Find the image id from a URL*/
function url_get_image_id($image_url) {
global $wpdb;
$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));
return $attachment[0];
}
/* determine whether post has a featured image, if not, find the first image inside the post content, $size passes the thumbnail size, $url determines whether to return a URL or a full image tag*/
function checkImageType($size, $type) {
global $post;
$content = $post->post_content;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $content, $matches);
$first_img = $matches[1][0];
/*If there's a featured image, show it*/
if (get_the_post_thumbnail($post_id) != '' ) {
if($type=='url') {
the_post_thumbnail_url($size);
} else {
the_post_thumbnail($size);
}
} else {
/*No featured image, so we get the first image inside the post content*/
if ($first_img) {
//let's get the correct image dimensions
$image_id = url_get_image_id($first_img);
$image_thumb = wp_get_attachment_image_src($image_id, $size);
// if we've found an image ID, correctly display it
if($image_thumb) {
if($type=='url') {
echo $image_thumb[0];
} else {
echo '<img src="'.$image_thumb[0].'" alt="'.get_the_title().'"/>';
}
} else {
//if no image (i.e. from an external source), echo the original URL
if($type=='url') {
echo $first_img;
} else {
echo '<img src="'.$first_img.'" alt="'.get_the_title().'"/>';
}
}
}
}
}
?>
An some sample uses:
<?php
checkImageType('full', 'url');
// Returns: http://domain.com/image-url.jpg)
checkImageType('post-thumb');
// Returns: <img src="http://domain.com/image-url.jpg" alt="Alt text">
?>
Amber Weinberg
Amber is a freelance front-end developer specializing in semantic and accessible custom WordPress themes. She works with agencies and other freelancers to bring their designs to life using custom ACF flexible layout builds - making them more performant and less buggy while allowing the client easy customization without breaking the design system.