Image sizes in single listing

Hi kmelv85,

For something like this, you’ll probably want to do a template customization to show some custom image sizes. Our article here can tell you how to do that: https://businessdirectoryplugin.com/support-forum/faq/advanced-customization-of-the-list-and-detail-views-of-bd/

What you’re looking for isn’t supported out of the box.

Thanks, but I’m not sure how that helps. I know I can use some code to get specific field values, but I need to change the default image size. It uses the thumbnail on the main page and I would like a larger version – does it use the built in WordPress image sizes?

No, it uses our settings to resize the image down to our limits. We can’t use the media manager because if we delete a listing, we delete the image and if it got accidentally shared (media manager allows for this), then the remaining listing would be broken.

To do this, you’d have to build a custom template to manage and display images at your custom sizes.

Ok, where do I begin to do this? I basically just need to display the image that the thumbnail links to – as the bigger image opens in a lightbox. How do I get the code / url of the bigger image?

Hi kmelv85,

One of the fields you can access is the images associated with the listing and in that array are the image URL and whether it’s the primary image. Have you tried looking at the data structure in there, using the article I gave?

What have you tried?

if ($img->ID == $thumbnail_id) continue;

$full_image_data = wp_get_attachment_image_src( $img->ID, ‘wpbdp-large’, false );
$full_image_url = $full_image_data[0];

$extra_images[] = sprintf(‘%s‘,
$full_image_url,
wp_get_attachment_image( $img->ID, ‘wpbdp-thumb’, false, array(
‘class’ => ‘wpbdp-thumbnail size-thumbnail’,
‘alt’ => the_title(null, null, false),
‘title’ => the_title(null, null, false)
) ));
}
}

Tried changing wpbdp-thumb to wpbdp-large but it doesn’t work

Let me ask my developer what he thinks.

Here’s what he says:

The relevant place to change the size of the listing’s thumbnail is templates-ui.php (line 356). Changing wpbdp-thumb to wpbdp-large does the trick.
As for the other thumbnails appearing in place of the main one I’m not sure exactly what the customer wants, but we certainly need JS. Maybe something along this lines works for him:

<script type="text/javascript">
jQuery(function( $ ) {
$('.extra-images a').click(function(e) {
e.preventDefault();
$('

• ').html($('.listing-thumbnail a').html()).appendTo($('.extra-images ul'));
  $('.listing-thumbnail a').remove();
  $(this).appendTo($('.listing-thumbnail'));
  });
  });
  </script>


That could be added at the bottom of templates/businessdirectory-listing.tpl.php either modifying the core or first copying the file to the theme. Alternatively it could be added to any JS script loaded by the theme, as to avoid touching anything BD-related.

I was also looking to do this: make the “main image” larger on the single listings page (without making all thumbnails bigger). Here is a solution. Dave R informed me that the relevant code is now in /core/templates-ui.php on line 381. The solution involves checking if the larger size exists and if we’re on the single listing page (does the image link to a larger image or to the single listing url). If either of these is false, use the thumbnail as before.

Starting from line 381, replace the next 9 lines with this:

if ( wp_get_attachment_image_src( $main_image->ID, 'medium' ) && $args['link'] == 'picture' ) {
			$main_img_special_size = 'medium';
		} else {
			$main_img_special_size = 'wpbdp-thumb';
		}
				$image_img = wp_get_attachment_image( $main_image->ID,
                                              $main_img_special_size,
                                              false,
                                              array(
                                                'alt' => get_the_title( $listing_id ),
                                                'title' => get_the_title( $listing_id ),
                                                'class' => $image_classes
                                                )
                                             );

If you want to use another size besides ‘medium’, just replace that in the 2 places it appears, with your own custom image size inside the single quotes. Remember to save a copy so you can re-implement it with the next upgrade (unless Dave adds “Custom main image size for single listings” as an option).
Hope it helps someone!
T.

PS I meant to say “does the image link to a larger image” (remove rest of phrase in parentheses).

PPS Post #9 above is breaking this page layout.