[Resolved] Displaying a photo when views presents the image ID and not URL

[Author]

Posts

[Holly]

Tell us what you are trying to do?

I inherited a site which was built 7+ years ago by a developer who is no longer available. This site uses a custom WP theme and custom post types that were likely created with Advance Custom Fields (or something similar). I am trying to recreate the presentation of this data using Views.

While Views can call up the ID from a image which was placed through this custom field, I am wondering if it will be possible to configure Views to actually show the image from the ID.

Is there any documentation that you are following?
I wish!

Is there a similar example that we can see?

For reference, this is a simple code snippet from the Views template:

[wpv-post-link]<br />
[wpv-post-field name='person_profile_picture'] <br />
Category = [wpv-post-field name="person_category"] <br />

And this is the basic output. It works, but as you can see I get an ID vs usable image information:

Jürgen Babirad
12058
Category = faculty
Tiago Barreira
12367
Category = faculty

The OLD site template used this code to render the image:

<?php
$post_thumbnail_id = get_field('person_profile_picture');
if($post_thumbnail_id) {
$the_image = wp_get_attachment_image($post_thumbnail_id, 'people_thumbnail', FALSE, array('class' => 'photo'));
}

if($the_image != NULL)
echo $the_image;
?>

Is there anyway to leverage the Views PHP function here?

What is the link to your site?

It is behind a firewall 🙁

Many thanks!

[Waqar]

Hi there,

Thank you for contacting us and I'll be happy to assist.

You can create a custom shortcode that first gets the ID from "person_profile_picture" custom field and then gets the image from that ID, using the code from the old template file:

// shortcode to get the image from the ID aquired through custom field "person_profile_picture"
add_shortcode('get-person-profile-picture', 'get_person_profile_picture_fn');
function get_person_profile_picture_fn() {

	$post_thumbnail_id = do_shortcode("[wpv-post-field name='person_profile_picture']");

	if($post_thumbnail_id) {
		$the_image = wp_get_attachment_image($post_thumbnail_id, 'people_thumbnail', FALSE, array('class' => 'photo'));

		if($the_image != NULL) {
			return $the_image;
		}
		else
		{
			return "No image found for the specified ID";
		}
	}
	else
	{
		return "No image ID found";
	}	
}

The above code can be added to the active theme's "functions.php" file and then in your view's template, you can call that shortcode, to show the image directly:

[get-person-profile-picture]

I hope this helps.

regards,
Waqar

[Holly]

Hello Waqar,

Thank you so very much for your response! However, I should have mentioned that the site is hosted in an institutional instance of wordpress and I don't have the ability to edit the functions.php file nor the theme files directly. This is why I was hoping the custom php function inside of Views might be able to be used here.

Is that not an option for doing this?

- Matt

[Waqar]

Hi Matt,

Thanks for writing back.

Yes, you can alternatively add this code, at WP Admin -> Toolset -> Settings -> Custom Code.
( screenshot: hidden link )

We have a guide on the topic at:
https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/

Please let me know how it goes and if you need any further assistance.

regards,
Waqar

[Holly]

I was able to create the snippet and run it without any reported error (see profile pic screenshot). I have made sure it was activated. But as I load the page that calls this views template I still see the ID and not the image (see ouptut screenshot).

I have also attached a screenshot of the snippet editor.

Any other suggestions would be most appreciated!

[Waqar]

Hi Matt,

Thanks for sharing these screenshots.

In your template's code ( screenshot file: view template.PNG ), I don't see the newly registered shortcode [get-person-profile-picture] in use (as suggested in my earlier message: https://toolset.com/forums/topic/displaying-a-photo-when-views-presents-the-image-id-and-not-url/#post-1137477 ).

Please make sure to include it in the template and then check it again.

You'll replace:

[wpv-post-field name='person_profile_picture']

With just:

[get-person-profile-picture]

regards,
Waqar