Solution to set background-image using [shortcode]?

Question

I'd like to set a random background-image into a <div>Container</div>
- To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
- How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
- I tried it even as inline-style with no result.

This is what I have:

HTML

<div class="header_random-image">
   <div id="hero"></div>
</div>

CSS

#hero {
  background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
  background-size: cover;
  background-position: 50% 30%;
  height:70vh;
  width: 100%;
  margin-top: -65px;
}

Another try with no result: Inline-style

<div class="header_random-image">
        <div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>

Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?

Best from Berlin

When you say no result, do you mean it doesn't output anything? Might be an error with how you're calling the shortcode. Have you tried url("<?php echo do_shortcode('[wp-image-refresh]'); ?>"); — Andy Holmes
It should work with inline style. Are you sure that shortcode outputs what you're expecting it to? Are you sure the result is valid CSS? (Proper path, etc...). Also, make sure you place this in either a template or a post/page content that does get parsed interpreted by WordPress. Shortcodes are not allowed anywhere by default. For example, if you try to add shortcodes in a text-widget, you need to enable them first: add_filter( 'widget_text', 'do_shortcode' ); — tao
Is the CSS section in <style> tags in your <head> tags inside header.php, just a question if not that could be your answer — Colin Gell
Otherwise add [wp-image-refresh] as a plain shortcode in a post and, tell use what it outputs on the front end :) — Colin Gell
The issue you are facing because sortcode <?php echo do_shortcode("[wp-image-refresh]"); ?> actually print image with in a img tag , like this <img class="" src="http:www.xyz.com/wp-content/uploads/2017/09/schoolbreak-1-300x109.png" alt="test"> as you are setting the image as a background so this will not work because here you only needed image source not the entire image block. — Balwant

marcelgro marcelgro · Accepted Answer · 2017-10-30T07:33:31

In most cases your CSS code will be served in a static file, thus the php code won't execute.

As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description confirms this assumption. WP-IMAGE-REFRESH

You could try this:

PHP

<div class="header_random-image">
   <?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>

CSS

.header_random-image {
  overflow: hidden;
}
.hero_class {
  height: 100%;
  width: auto;
  margin-top: 0;
}

This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.

Alternative

Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.

PHP

<?php 
    $images = get_field('name-of-your-gallery-field');
    shuffle($images);
    $imageUrl = images[0]['url'];
<div class="header_random-image">
    <div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>

Solution to set background-image using [shortcode]?

1 Answers

Alternative