Can I add the host's profile photo as a thumbnail on a listing card?

Here’s my website.

I’d love to add a small image of a host’s (AKA “private chef” on my website) on a listing card (AKA “menu” on my website).

Here’s another website that uses this feature for reference.

Hi,

Unfortunately, there’s no such feature, it would require a custom implementation.

Also, you can do this without additional customizations in the TaskHive theme.

Hi Andrii,

Using the below code snippet, I can get the host’s name to the listing block. How come it does not work with get_vendor_image ? Thanks

add_filter(
	'hivepress/v1/templates/listing_view_block/blocks',
	function ($blocks, $template){
		$listing = $template->get_context('listing');
		
		if(!$listing){
			return $blocks;
		}
		
		$vendor_id = $listing->get_vendor__id();
		
		if(!$vendor_id){
			return $blocks;
		}
		
		return hivepress()->helper->merge_trees(
					[ 'blocks' => $blocks ],
					[
						'blocks' => [
							'listing_actions_primary' => [
								'blocks' => [
									'listing_vendor_link' => [
										'type'   => 'content',
										'content'  => '<a href="'.esc_url( hivepress()->router->get_url( 'vendor_view_page', [ 'vendor_id' => $vendor_id ] ) ).'"><p><strong>'.esc_html($listing->get_vendor__name()).'</strong></p></a>',
										'_order' => 30,
									],
								],
							],
						],
				]
				)['blocks'];
	},
	1000,
	2
);
1 Like

You can try using it this way:

$listing->get_vendor__image();

You’ll get an Attachment object or null, and then you can get it’s URL via the ->get_url() method.

1 Like

@aqmiami7 – your code worked to pull the vendor name, thank you!!

Now, how do I use @ihor’s suggestion to pull the vendor image? Could you please modify @aqmiami7’s code if it worked?

1 Like

If you have a listing object, please try this code to get the URL:

$vendor=$listing->get_vendor();
$url=$vendor->get_image__url('thumbnail');

Where do I place that in the code @aqmiami7 created?

Hi boldsideco, sorry it took me so long to write back I got busy with helping someone else. Here is the modfiied code to add the image. I finally figured how to do it.

Hope you enjoy this! :grinning: If you need to remove the message icon in the listing box let me know…

1 Like

I am beyond shocked and grateful you were able to take the time to figure this out for me! THANK YOU TIMES A MILLION!

Now that I have you, do you know how I could add “Availability Starting: [DATE]” and their name? (like this website) Long shot, but also to have their rating next to them instead of on the top right of the card?

Hi,

This would require further customization. Please consider hiring someone on Fiverr if customizations beyond the available functionality is required https://fvrr.co/32e7LvY

The code @aqmiami7 originally posted is able to show the host name, so I’m hoping to at least add that back in.

You can use this code to put the name:

add_filter(
	'hivepress/v1/templates/listing_view_block/blocks',
	function ($blocks, $template){
		$listing = $template->get_context('listing');
		
		if(!$listing){
			return $blocks;
		}
		
		$vendor_id = $listing->get_vendor__id();
		
		if(!$vendor_id){
			return $blocks;
		}
		
		return hivepress()->helper->merge_trees(
					[ 'blocks' => $blocks ],
					[
						'blocks' => [
							'listing_actions_primary' => [
								'blocks' => [
									'listing_vendor_link' => [
										'type'   => 'content',
										'content'  => '<p><strong>'.esc_html($listing->get_vendor__name()).'</strong></p>',
										'_order' => 30,
									],
								],
							],
						],
				]
				)['blocks'];
	},
	1000,
	2
);

You can change the position by changing the order number. It is set at 30 now, change it for a lower number and it moves to the left. The problem you will face is that there is limited space on that part of the listing block. As far as the availability date, you can probably just make an attribute and display it on the listing block above the price. Problem there is that it will not stay up to date, without the person manually editing it. You would have to get a developer to modify it for you. It is not a simple code snippet.

1 Like

Ah gotcha! Thanks so much. Is there any way to swap the columns by having the price on the right side (next to the message and favorite icons) and the profile photo + name on the left?

I know how to modify the code to put either the five stars next to name or photo, or five stars with the rating number, or just the rating number. Again the problem is if you display it on in the bottom of the listing block there is no space. So you would have to decide only two or three things to display there, you can not display it all.

The problem with fivver is that most people are not familiar with hivepress theme. But the good news is that Hivepress will be launching an experts program soon. I may join it, but until then, you can email me aqmiami7@gmail.com, and I can help you when I get a chance. The Hivepress developers only help with simple code snippets and not individualized customizations for the most part. If not they will not have time to working on hp and improving it for us.

You move the photo by changing the order number on the code I provided before. It might need another code snippet to move the order of price to right, I would have to try it.

This is an example below code with name and ratings, but its for listinghive theme. See how it takes too much space in the bottom of listing block. I could change the rating to match your theme/same one.

add_filter(
    'hivepress/v1/templates/listing_view_block/blocks',
    function ($blocks, $template){
        $listing = $template->get_context('listing');
        
        if(!$listing){
            return $blocks;
        }
        
        $vendor_id = $listing->get_vendor__id();
        $rating = $listing->get_rating();
        
        if(!$vendor_id){
            return $blocks;
        }
        
        $rating = min($rating, 5);
        $rating_html = '<div class="hp-rating__stars hp-rating-stars" data-component="rating" data-value="'.esc_attr($rating).'" title="">';
        
        for ($i = 1; $i <= 5; $i++) {
            if ($i <= $rating) {
                $rating_html .= '<i data-alt="'.esc_attr($i).'" class="fas fa-star active" title=""></i>&nbsp;';
            }
        }
        
        $rating_html .= '<input name="score" type="hidden" value="'.esc_attr($rating).'" readonly=""></div>';
        
        return hivepress()->helper->merge_trees(
                    [ 'blocks' => $blocks ],
                    [
                        'blocks' => [
                            'listing_actions_primary' => [
                                'blocks' => [
                                    'listing_vendor_link' => [
                                        'type'   => 'content',
                                        'content'  => '<p><strong>'.esc_html($listing->get_vendor__name()).'</strong> '.$rating_html.' ('.esc_html($rating).')</p>',
                                        '_order' => 30,
                                    ],
                                ],
                            ],
                        ],
                ]
                )['blocks'];
    },
    1000,
    2
);

Thanks for the detailed explanation! This is so helpful.

Hmmm…yeah, I can see how it takes up a lot of room. Ideally, I’d love to have this set up for the bottom of the listing block (in this order):

Left Side

  1. Chef Photo
  2. Chef Name
  3. Single Star Icon
  4. Rating Number

if possible, the “chat” and “favorite” icons either underneath, or hidden

Right Side

  1. Price / Head

Is this possible?

hey I havent forgotten about you, just been busy. I have this code so far, but it only adds the price p head to the right side, but leaves the price on the left. I am waiting for hivepress developers to explain how to move price to the right, that will be easier, since price can not be deleted. Then I can figure out the last part which is adding the single star icon/rating number.

add_filter(
    'hivepress/v1/templates/listing_view_block/blocks',
    function ($blocks, $template) {
        $listing = $template->get_context('listing');
        
        if(!$listing){
            return $blocks;
        }
        
        return hivepress()->helper->merge_trees(
            [ 'blocks' => $blocks ],
            [
                'blocks' => [
                    'listing_actions_primary' => [
                        'blocks' => [
                            'listing_price' => [
                                'type'   => 'content',
                                'content'  => '<div class="hp-listing__attribute hp-listing__attribute--price">$'.esc_html( $listing->get_price() ).'/head</div>',
                                '_order' => 1001,
                            ],
                        ],
                    ],
                ],
            ]
        )['blocks'];
    },
    1000,
    2
);

Also you would want the vendor’s total single star icon? not the listing’s total star icon reviews I am guessing… But then note that you will not have listing reviews, only chef’s/vendor’s reviews…

1 Like

Actually I am trying to figure out how to enable reviews for hosts instead of listings! Do you know how to do that?

Vendor/host reviews are not available on hivepress yet. I think the HP developers are working on it for a future update. So hopefully soon.

2 Likes

Hi there, could you please repost the code to add vendor image to the listing block here again? I guess it has disappeared somehow…

EDIT: I think I sorted that out. So let me share the simplest form.


add_filter(
    'hivepress/v1/templates/listing_view_block/blocks',
    function ($blocks, $template) {
        $listing = $template->get_context('listing');
        
        if(!$listing){
            return $blocks;
        }

		$vendor=$listing->get_vendor();
		$url=$vendor->get_image__url('thumbnail');
		
		if(!$vendor){
			return $blocks;
		}
        
        return hivepress()->helper->merge_trees(
            [ 'blocks' => $blocks ],
            [
                'blocks' => [
                    'listing_actions_primary' => [
                        'blocks' => [
                            'listing_vendor_image' => [
                                'type'   => 'content',
                                'content'  => '<img src="'.$url.'" >',
                                '_order' => 1001,
                            ],
                        ],
                    ],
                ],
            ]
        )['blocks'];
    },
    1000,
    2
);
2 Likes

Hey sorry for late response, haha you beat me to the punch, I was trying to clean up the code, but you did it already. The previous one I had was messy.

Thanks for posting!