-1

I'm building a gallery page for a website and want to use the images from post types as background images with lightboxes. The code im using currently is this:

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
        <div id="inner-content" class="wrap cf">
        <?php
            $loop = new WP_Query( array(
                'post_type' => 'sympathy-flowers',
                'order' => 'ASC',
                'posts_per_page' => -1
                ));
        ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <div class="b33" style="background-image: url("<?php echo the_field('image'); ?>;">
            <p>Hello World!</p>
        </div>
        <?php endwhile; wp_reset_query(); ?>
        </div>
    </div><!-- #content -->
</div><!-- #primary -->

When I refresh the page, it brings through the p tag, however the background-image is not working, how would I fix this?

Problem has since been fixed.

|improve this question

closed as off-topic by TheDeadMedic, Mark Kaplun, Mayeenul Islam, Howdy_McGee♦, cybmeta May 31 '16 at 14:46

This question appears to be off-topic. The users who voted to close gave these specific reasons:

If this question can be reworded to fit the rules in the help center, please edit the question.

1

Well it seems you are using ACF. The you need not echo the_field() only echo get_field('')

|improve this answer
  • Also could how did you set up the AFC image field , did you select URL or array or ID? – bagpipper May 19 '16 at 10:16
  • I'm using custom post types for this, it runs off an archive. – Quarismo May 19 '16 at 10:21
  • the_field() is of acf isn't it? – bagpipper May 19 '16 at 10:23
  • I'm not entirely sure, if I put the php code where the p tag is, it pulls through all the images, it just doesn't work when I put the php code into the background-image property. – Quarismo May 19 '16 at 10:25
  • <div class="b33" style="background-image: url('<?php the_field( 'image' ); ?>')"> try replacing you're existing code with this code – bagpipper May 19 '16 at 10:28
0

You could get done by adding code as below.

<div class="container" style="background-image: url('<?php echo  get_field('image',get_the_ID());?>)'">
|improve this answer
  • Does this mean that I'd have to pull through each image manually, there's at least 15 different images that I need. – Quarismo May 19 '16 at 10:29
  • @Quarismo: Please check updated code. If not work then try to debug first by put var_dump(get_field('image')); to get exact idea. – Sumeet Gohel May 19 '16 at 10:35
0

Please check first what you get from the_field('image');

$img = get_field('image');

var_dump( $img );

Maybe it's just output array with id, url, width, ..

and fix html

  <div class="b33" style="background-image: url(<?php echo get_field('image');?>);">
|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.