[Resolved] Display CPT profile image using post ID contained in CPT profile image field

[Author]

Posts

[donovanD]

Hello:

We are trying to Display CPT search results with 4 CPT fields which include a profile photo and an office location

I visited this URL:
hidden link

I expected to see:
A table displaying photo, name, office and email for each returned item

Instead, I got:
*the photo post id instead of the photo*, name, *the office post id instead of office name* and email

Details:

There are two CPTs involved:

1. Person -- stores attorney profiles including photo, name, office and email

2. Office -- stores a list of offices with one-to-many relationship with Person

We would appreciate some help with displaying the photo and office(s) in the search results instead of the post ids that are being returned.

Thanks!

[donovanD]

Adding screenshot showing issue.

[Nigel]

Hi Donovan

If the profile photo has been added as a Types custom field, then you output it with the types shortcode, specifying the required attributes.

You can see details of those here: https://toolset.com/documentation/customizing-sites-using-php/functions/#image. If you expand the "More" section you'll find examples of using the shortcode and the markup it generates.

But the easiest way to insert the image is, when designing the Loop Output section of your View (where you might insert the shortcodes directly, or you might link to a content template where you insert the shortcodes) is to use the Fields and Views button and then select your image field and choose the required settings in the dialog that appears.

I'm not sure what you are currently doing to get it to print the id of the image instead of the image itself.

The office name requires an additional step. I take it that this View shows the Person posts. Offices would be a parent of Persons, yes?

In which case, to output the name of the Office (presumably the post title) you need to add the id attribute to the wpv-post-title shortcode so that it knows to output content from the parent Office post and not the current Person post being iterated over in the Loop.

If your Office CPT has a slug of "office" then you would do that like so: <wpv-post-title id="$office">

Do you want to try the above and let me know if you have any problems?

[donovanD]

Hi Nigel,

Thank you for the thorough reply. The CPTs were not made using Types (I believe they were made with ACF), so this may be adding to the complexity. Here is some further info that will probably help you to help me.

Some background:

We are adding Types and Views to an existing theme that defines several CPTs. So the CPTs are not created in Types, but we are trying to use Views to create custom views with data from those CPTs.

CPT relationships:

There are two CPTs involved in this custom search view

1. Person -- stores attorney profiles including photo, name, office and email.

2. Office -- stores a list of offices with title, description, address, etc.

A Person can have one or more offices. The Person Office field simply contains a post id reference to each office that this person has.

Filters - the filters are added from the Person CPT

Loop Output Section Code:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%">
<tbody class="wpv-loop js-wpv-loop">
<wpv-loop>
<tr>
[wpv-post-body view_template="Loop item in Find An Attorney"]
</tr>
</wpv-loop>
</tbody>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

View template code:

<td>[wpv-post-field name="profile_photo"][wpv-post-link]</td>
<td>[wpv-post-taxonomy type="person_type" separator=", " format="link" show="name" order="asc"]</td>
<td>[wpv-post-field name="office" show="name"]</td>
<td>[wpv-post-field name="email"]</td>

Thoughts?

Thank you!

[donovanD]

Thank you for your assistance Nigel. After reviewing a couple posts regarding custom shortcodes I solved the problem as follows:

1. Created two custom short codes - one to get a link to the image (using the wp_get_attachment_image function and the image id contained in the ACF profile_photo field), and a second short code to get the office title from the office post id contained in the ACF office field

2. Modified the view template as shown below to use the ACF fields as short code function parameters

View template:

[get-image attachment_id="[wpv-post-field name="profile_photo"]"]
[wpv-post-link]
[wpv-post-taxonomy type="person_type" separator=", " format="link" show="name" order="asc"]
[link-to-post id="[wpv-post-field name="office"]"]
[wpv-post-field name="email"]

The view now outputs the desired information -- although the AJAX operation is not yet working.

Can you share your thoughts on whether this approach is advisable?

Thanks!

[Nigel]

Hi Donovan

If the custom fields have been set up with something other than Types then you can't use the types shortcode to render them and are limited to the wpv-post-field shortcode, which renders the raw field content.

That wouldn't be a problem if, for example, the profile photo field stored the image url rather than the post id, as you could construct your image links manually, something like this:

<a><img src="[wpv-post-field name='profile-photo']" alt="[wpv-post-title]"></a>

But because of the way the data is stored I don't see any alternative to what you are doing.

How are you registering your shortcodes?

[donovanD]

Thanks for the follow-up Nigel. This is very helpful.

I added the shortcodes to child theme functions.php, then used the Toolset->Settings->Front End Content->"Third-party shortcode arguments" setting to manually register them.

[donovanD]

Thanks for the help Nigel. Much appreciated. Issue resolved.