background image not showing in slick carousel

Resolved Carin
(@sparksfreebies)

2 years, 10 months ago
Hi I have the related ads carousel and the background image is not displaying when there is no ad image(background image displays fine on regular ads),

I need to add this style to the script snippet but not quite sure how .advert-img
```
div.advert-img {
  background-image: url(https://volusiaclassifieds.com/wp-content/uploads/2021/10/ad-default.jpg) !important;
  background-size: cover !important;
}
```
The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Greg Winiarski
(@gwin)

2 years, 10 months ago

Hi,
i understand you are using the related-ads-carousel.php snippet, if so then the JavaScript library which is handling the carousel does not support well entries without an image.

What you would need to do is modify the related-ads-carousel.php to show a default image if the $image_id is null (lines about 66 to 69).
Thread Starter Carin
(@sparksfreebies)

2 years, 9 months ago
can you check the code below before I add it to my site, still not 100% sure, thank you so much for your help!

since the function to check for null is: if(empty($ID)){}

But if there is already code to check if $image_id exists

<?php if($image_id): ?>

should I add
```
if(empty($image_id)){echo div.advert-img {
  background-image: url(https://volusiaclassifieds.com/wp-content/uploads/2021/10/ad-default.jpg)};
```
so it would be:
`<?php $image_id = adverts_get_main_image_id( $post->ID ) ?>
<div class=”advert-img”>
<?php if($image_id): ?>
<?php $image = get_post( $image_id ) ?>
ID ) ) ?>” class=”advert-item-grow” title=”<?php echo esc_attr($image->post_excerpt) ?>” alt=”<?php echo esc_attr($image->post_content) ?>” />

<?php if(empty($image_id)){echo div.advert-img {
background-image: url(https://volusiaclassifieds.com/wp-content/uploads/2021/10/ad-default.jpg)};/>
<?php endif; ?>
</div>
Plugin Author Greg Winiarski
(@gwin)

2 years, 9 months ago
The code should be
```
<?php if($image_id): ?>
    <?php $image = get_post( $image_id ) ?>
    <img src="<?php echo esc_attr( adverts_get_main_image( $post->ID ) ) ?>" class="advert-item-grow" title="<?php echo esc_attr($image->post_excerpt) ?>" alt="<?php echo esc_attr($image->post_content) ?>" />
<?php else: ?>
    <img src="https://volusiaclassifieds.com/wp-content/uploads/2021/10/ad-default.jpg" class="advert-item-grow" title="default image" alt="default image" />
<?php endif; ?>
```
Thread Starter Carin
(@sparksfreebies)

2 years, 9 months ago

Perfect, thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘background image not showing in slick carousel’ is closed to new replies.