Archive Item Template - using image for background image in CSS

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Author

Posts
February 27, 2020 at 4:59 am #532498

Simon
Full Member

Post count: 35

Hi,
the archive item templates are perfect and easy to follow. But have searched everywhere. Probabably something simple I am missing. I have added seperate templates for different CPT and the gd_post_images working well. However, I would like to use the image as a background in CSS so I can display it differently. Can I do this using geodirectory “call” or should I uncheck the disable featured image part and use standard WP.

Thanks

February 27, 2020 at 7:00 am #532511

Kor
Moderator

Post count: 16516

Hi Simon,

Thanks for your post. Sorry, I’m not so sure if I’m getting this. Where do you want to display the background image? Could you elaborate a little bit more or perhaps you can share some screenshots?

February 27, 2020 at 9:27 am #532529

Alex Rollin
Moderator

Post count: 27815

That requires custom CSS which you can create yourself.

Use this: https://www.w3schools.com/cssref/pr_background-image.asp

https://wpgeodirectory.com/docs/customizing-your-style/

February 27, 2020 at 10:01 am #532550

Simon
Full Member

Post count: 35

Hi, thank you for quick replies.
Sorry, that sounded clear in my head at 3am. But after reading….no not at all.

A basic reproduction of what we are doing is this.
<style>
.int-div-prac {
padding:10px 5px;
background-image: url(“THE-LISTING-MAIN-IMAGE-HERE”);
background-repeat: none;
background-size: cover;
}
</style>

<div class=”int-div-prac”>
[gd_post_title tag=’h2′]
[gd_categories post_type=”gd_place” title_tag=”h4″ hide_empty=”1″ hide_count=”1″ sort_by=”az” max_level=”0″ max_count=”1″ max_count_child=”0″]
[gd_post_meta key=’phone’ location=’listing’]
[gd_post_address show=”icon-label-value” address_template=”%%street%%, %%city%%”]
</div>

So the Archive Item Template will show the g_post_title etc within a div that we are using the main (or featured) as a background. I have left all styling of item (and most items) positions etc etc off to focus on the bit I need.

Thanks

February 27, 2020 at 10:12 am #532554

Alex Rollin
Moderator

Post count: 27815

Ah, that’s not possible without a customization, but it’s an interesting idea.

I will ask the developers if they can provide any advice on how to proceed to customize it.

February 27, 2020 at 10:21 am #532555

Simon
Full Member

Post count: 35

Great thanks,
Meanwhile, just to play.
I am going to uncheck the “Disable theme feature image output?” in gen ‘gd-settings-design’ and see if I can just use a simlar method to including featured image in post loop type of thing.

March 2, 2020 at 3:15 pm #533088
Naveen Giri
Moderator

Post count: 1559
Hi Simon,

Please use following code snippet. It will load featured image of listing as backgroud image of mentioned container.
```
add_action( 'wp_head', function () { 
    global $gd_post;
    $upload_dir = wp_upload_dir();
	$image_raw = isset($gd_post->featured_image) && !empty($gd_post->featured_image) ? $gd_post->featured_image : '';
	?>
	<style>
      .int-div-prac {
	padding:10px 5px;
	background-image: url('<?php echo $upload_dir["baseurl"] . $image_raw; ?>');
	background-repeat: none;
	background-size: cover;
	}
	</style>
	<?php
} );
```
Thanks
March 19, 2020 at 9:56 am #535701

Simon
Full Member

Post count: 35

Awesome! Thanks Naveen. I’ll try that now. Sorry about the delay, has been a mad time here for a while. But looking forward to trying it now. thanks again for your help. Appreciated!

March 25, 2020 at 10:06 pm #536815

Simon
Full Member

Post count: 35

Hi Naveen,

Sorry only just got to this becuase of everything going mad here for working from home it support. This may work for pages, but for the listings it is only adding the css to the head of the page the listing is on, so unfortunately it isnt pulling the main image for each listing.

But thanks anyway!
Simon

March 26, 2020 at 6:18 am #536839
Naveen Giri
Moderator

Post count: 1559
Hi Simon,

Sorry, I haven’t read all your replies above.

You can try the below code instead. this is a custom shortcode.
you can use it with container like
```
<div class="int-div-prac" [gd-background-image]>
```
```
	
function custom_image_url_callback( $atts ) {
	global $gd_post;
	$featured_img = get_the_post_thumbnail_url($gd_post->ID, 'full');
	if( empty( $featured_img )){
		return false;
	}
	ob_start();
	?>
	style =" padding:10px 5px;
	background-image: url('<?php echo $featured_img; ?>');
	background-repeat: none;
	background-size: cover;"
	<?php
	$output = ob_get_contents();
	ob_end_clean();
	return $output;
}
add_shortcode( 'gd-background-image', 'custom_image_url_callback' );
```
You can look for GD experts here for any further customization.
https://geodirectoryexperts.com/

Thanks
March 27, 2020 at 8:47 pm #537160

Simon
Full Member

Post count: 35

Hi Naveen, you’re a bloody legend mate. That did the trick and we can do a LOT from there. Thanks!
Author

Posts