Add images to listing block

[Filip]

Hi, I would like the listing page to show the photo attached to the listing, preferably to be able to select which one. Is there such a possibility? I tried to write code that would add this but it wouldn’t work. Is it possible without interfering with the theme code? Unfortunately, without this functionality, the whole theme will not work for me and I have already put some work into it.

[andrii]

Hi,

Please note that this is a UI/UX design feature, as there is a vendor profile on the left and it does not fit on the mobile view. As a workaround, we can provide a CSS snippet to show the image, but please note that this will require a custom implementation. Let me know if this works for you.

[Filip]

If it works it’s perfect. Would be grateful for this snippet.

[Filip]

And one more think. Is there a hook for this listing card? I coudn’t find it

[andrii]

Hi,

Our developer will test everything in more detail and provide you with a solution by Tuesday at the latest.

[Filip]

Hi, when will it be done?

[ihor]

I’m sorry for the delay, the topic wasn’t re-assigned for some reason. Please try this PHP snippet (you can add it using the Code Snippets plugin Code Snippets – WordPress plugin | WordPress.org or if you use a child theme, to the theme’s functions.php file):

add_filter(
	'hivepress/v1/templates/listing_view_block',
	function ( $template ) {
		return hivepress()->template->merge_blocks(
			$template,
			[
				'listing_container' => [
					'blocks' => [
						'listing_image' => [
							'type'   => 'part',
							'path'   => 'listing/view/block/listing-image',
							'_order' => 5,
						],
					],
				],
			]
		);
	},
	1000
);

Also, add this code to Appearance/Customize/Additional CSS:

.hp-listing--view-block .hp-listing__image {
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 48em) {
  .hp-listing--view-block .hp-listing__image {
    width: 33%;
  }
}
.hp-listing--view-block .hp-listing__image img {
  border-radius: 16px;
}

The listing blocks will look like this, showing the featured image Awesome Screenshot Users can define this image by dragging and dropping the uploaded images, the first image is the featured one. Please note that further customizations may be needed depending on the layout/styling requirements.

Hope this helps

[Filip]

Thank you! It’s almost good. Unfortunately there is some issue with css, image containers are probably sensitive to image size. I tried to set the height and width of image container but still it looks weird.
There is also an issue when listings have more than 1 image and you try to zoom in, zoom out the page. Images are crazy then

[Filip]

That’s how it look with my changes in css. Almost good but something needs to be improved. And probably my code will make some issues on mobiles.
You mentioned featured image. Why do I have slider instead of one featured image?

.hp-listing--view-block .hp-listing__image {
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

@media only screen and (min-width: 48em) {
  .hp-listing--view-block .hp-listing__image {
    width: 33%;
    height: 220px;
  }
}

.hp-listing--view-block .hp-listing__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

[ChrisB]

@Filip - Disable the ‘gallery preview’ option in the HivePress settings page. This turns off the slider functionality on the listing block and only shows with one image afterwards.

Hope this helps!

Cheers,
Chris

[Filip]

That worked, thanks