This article assumes use of Advanced Custom Fields Pro for handling custom fields.
When setting up image custom fields and featured images in a WordPress theme it’s important to take several steps to make sure sites load quickly, assets don’t break when changing domains, and mitigate against clients uploading a massive file and the layout either breaking or looking silly.
- Analyze the designs and use add_image_size() to register these sizes in my WP theme. I use the name I designate in the first parameter to reference this size in my theme. Keep in mind that in some cases you may need to register a size at 2x or 3x to accommodate retina displays.
- For custom fields, save and return the image ID, not the image url. http://take.ms/th1mD
- Include instructions for the field on the recommended size. http://take.ms/VFjYj
- For Featured Images, I usually use a function that adds some JS to the admin, which adds the note. In this example I am designating different instructions for different post types, which can be adjusted in the class names targeted.Ex:
/* --------------------------------------------- Featured Image size note --------------------------------------------- */ function aceify_featured_image_instructions(){ $output = ''; $output .= '<script type="text/javascript">'; $output .= 'jQuery(".post-type-work #postimagediv .inside").append("<p>(1500 x 500px)</p>");'; $output .= 'jQuery(".post-type-page #postimagediv .inside").append("<p>1500 x 400px<br />Home & About: 1500 x 780px<br />News: 1500 x 600px</p>");'; $output .= '</script>'; echo $output; } add_action('admin_footer','aceify_featured_image_instructions'); - I never set image size restrictions (http://take.ms/JaeDT). It may be tempting and seem like a good idea, but remember that not all clients will have photoshop or necessarily the skills required to resize an image prior to upload. So I always handle this on the theme side by registering image sizes and returning the proper sizes in the right locations.
- In my theme, I display the image size appropriate to that part of the design. If the content editor has uploaded an image of the exact right size, or smaller than the asset needed, WP is smart enough to grab the original file. If they upload something too big, the theme will display the cropped size created by WordPress. (“image_size_name” corresponds to the image size you registered using add_image_size())Ex:
$image_id = get_field('image'); $image_url = aceify_get_image_url($image_id, 'image_size_name'); echo '<img src="'.$image_url.'" alt="" />'; /* --------------------------------------------- Get Image URL - place this in your theme functions --------------------------------------------- */ function aceify_get_image_url($imageid, $size){ if(empty($size)){ $size = 'large'; } $image_url = wp_get_attachment_image_src( $imageid, $size ); $image_url = $image_url[0]; return $image_url; } - For Featured Images (WordPress’s default thumbnail dudes), you can return the sized versions using the ID of the post itself. (“image_size_name” corresponds to the image size you registered using add_image_size())Ex:
$postid = $post->ID; $featured_image_url = aceify_get_featured_image_url($postid, 'image_size_name'); echo '<img src="'.$featured_image_url.'" alt="" />'; /* --------------------------------------------- Get Feature Image URL - place this in your theme functions --------------------------------------------- */ function aceify_get_featured_image_url($postid, $size){ if(empty($size)){ $size = 'large'; } $thumbnail_id = get_post_thumbnail_id($postid); $image_url = wp_get_attachment_image_src( $thumbnail_id, $size ); $image_url = $image_url[0]; return $image_url; }
By following these steps I can better ensure forward compatibility as WordPress evolves, better site load times, and better design integrity.