Use Image from Custom Field as Grid Item’s Main Media

This article covers how you can use your own Custom Field Image for your Essential Grid’s main Media Source.

1. Setup your Custom Image Field for compatibility.

Make sure your Custom Image Field returns the url of the image as opposed to an HTML image tag (this is automatic for most Custom Fields plugins).

2. Make a note of your Custom Field’s name/slug.

For this example, I’ve set up a custom field using the Types plugin, and the slug is “wpcf-my-image”.

3. Set your grid’s Media Source selection to “Alternate Image”.

4. Add the following to your theme’s “functions.php” file.

Modify the “wpcf-my-image” part with your Custom Image Field’s name/slug.

function custom_meta_image($media, $post_id) {
Custom Field slug for your image
$my_custom_meta_slug = 'custom_image';
/* *************************************** /
/ no need to modify any of the below code /
/ *************************************** */
$meta = get_post_meta($post_id);
if(array_key_exists($my_custom_meta_slug, $meta)) {
$meta_image = $meta[$my_custom_meta_slug];
$meta_image = wp_get_attachment_image_src($meta_image[0]);
if(!empty($meta_image)) $media['alternate-image'] = $meta_image[0];
return $media;
add_filter('essgrid_modify_media_sources', 'custom_meta_image', 4, 2); 
Use Image from Custom Field as Grid Item’s Main Media

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author


Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!