Place holder image

• Author
  Posts
• 

  Inspares 11 months, 1 week ago

  Gray colour placeholder image is making the website really unattractive.

  Is there any options to show random image for each listing where photos are not available?
  For example, a folder with 20 photos.
  Listing A will show 1st photo
  Listing B will show 5th photo.

  Any plugin or custom code is appreciated.

  

  yevhen 11 months, 1 week ago developer

  Unfortunately there is no simple code snippet to make randomly setting placeholder image. This would require code customizations. But you can replace default placeholder image if you override the /listing/view/block/listing-image.php template part via a child theme. There is tutorial how to customise templates https://youtu.be/LkojYp-8uwY

  

  Inspares 11 months, 1 week ago

  Thanks for the reply. I have got the below code from stack exchange.
  This will choose random image url from and array. Can you guide me which file I have to edit.

  
  $images = array(
      'http://via.placeholder.com/350x150',
      'http://via.placeholder.com/350x150',
      'http://via.placeholder.com/350x150',
      'http://via.placeholder.com/350x150',
  );
  $image_url = $images[array_rand( $images, 1 )];
  echo $image_url;

  

  gabetu 11 months, 1 week ago

  Another solution is to use unsplash random images, here is the code of the above template file mentioned by @yevhen:

  <?php
  // Exit if accessed directly.
  defined( 'ABSPATH' ) || exit;
  ?>
  <div class="hp-listing__image">
  	<a href="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
  		<?php if ( $listing->get_image__url( 'hp_landscape_small' ) ) : ?>
  			<img src="<?php echo esc_url( $listing->get_image__url( 'hp_landscape_small' ) ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
  		<?php else : ?>
  			<img src="https://source.unsplash.com/random/400×400/?houses,flats,apartments&orientation=landscape" style="object-fit:cover;width:400px;height:190px;" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
  		<?php endif; ?>
  	</a>
  </div>

  You can change the the search terms and the height depending of the listings’ columns.

  

  Inspares 11 months, 1 week ago

  Thanks a lot @gabetu and @yevhen
  Let me try this.

  

  Inspares 11 months ago

  I have tried the code given my @gabetu . It is loading random images. But the problem is, same random images are showing for all the listings in a page. What I need is each listing should have different images. (No problem if there is some duplication like 1 or 2). Is it possible to do?

  

  gabetu 11 months ago

  Well, it seems that combining these two pieces of code will do the job, full code below:

  <?php
  // Exit if accessed directly.
  defined( 'ABSPATH' ) || exit;
  
  $images = array(
  'https://source.unsplash.com/random/400x300/?Nature&orientation=landscape&1',
  'https://source.unsplash.com/random/400x300/?Nature&orientation=landscape&2',
  'https://source.unsplash.com/random/400x300/?Nature&orientation=landscape&3',
  'https://source.unsplash.com/random/400x300/?Nature&orientation=landscape&4',
  'https://source.unsplash.com/random/400x300/?Nature&orientation=landscape&5',
  'https://source.unsplash.com/random/400x300/?Nature&orientation=landscape&6',
  );
  $custom_placeholder = $images[array_rand( $images, 1 )];
  //echo $custom_placeholder;
  
  ?>
  <div class="hp-listing__image">
  	<a href="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
  		<?php if ( $listing->get_image__url( 'hp_landscape_small' ) ) : ?>
  			<img src="<?php echo esc_url( $listing->get_image__url( 'hp_landscape_small' ) ); ?>" style="width:100%;
                  height:auto;object-fit:cover" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
  		<?php else : ?>
  			<!--<img class="hide" src="<?php echo esc_url( hivepress()->get_url() . '/assets/images/placeholders/image-landscape.svg' ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">-->
  			<img src="<?php echo $custom_placeholder; ?>" style="width:100%;
                  height:auto;object-fit:cover" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
  		<?php endif; ?>
  	</a>
  </div>

  Demo here.

  

  Inspares 11 months ago

  Thanks a alot brother. Let me try this.

  

  Inspares 11 months ago

  I have applied the above code successfully. But why the images are not showing on listing page. Placeholder images are showing in listing blocks only.
  Sample link: Sample link

  

  Inspares 11 months ago

  To make it more clear, is it possible to display place holder image as featured image. (Only if there is no featured images available)

  

  yevhen 10 months, 4 weeks ago developer

  You could try to override the /listing/view/page/listing-image.php template part via a child theme in the same way as listing block

  

  Inspares 10 months, 4 weeks ago

  Thanks @yevhen I have tried that one. But it was not working. Then got a plugin named quick featured images. It is working perfectly.

  

  ihor 10 months, 4 weeks ago developer

  @Inspares Thanks for sharing the solution!

• Author
  Posts

New Reply

This forum has been archived and is no longer accepting new posts or replies. Please join our new community forum for support & discussion.