Link Featured Background Image to Post

  • Resolved chad99

    (@chad99)


    9 years ago

    Hello,
    I am creating a custom child theme based on the default Twentysixteen theme. For the home page, I am displaying 9 post previews. I am using this code in my content.php file to make the featured image a background image for each post.

    <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="article" style="background: url('<?php echo $thumb['0'];?>')">

    But how can I make the background image (or its div container) a link to its respective post? I’ve tried several things and am not having any luck.

    Thanks for any help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • David Uzelac

    (@daviduzelac)

    Can you link your website so that I may take a look? Would love to try and help.

    Thread Starter chad99

    (@chad99)

    Hi David, I only have the current build set up locally until I get it further along.

    Thread Starter chad99

    (@chad99)

    I’ve tried wrapping the entire container in an href like this, but the anchor tag doesn’t wrap when I inspect in browser.

    My code:

    <a href="<?php the_permalink(); ?>">
	<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
		<div class="article" style="background: url('<?php echo $thumb['0'];?>')">

				<?php the_title( sprintf( '<h1><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>
				<p class="date">
					<?php twentysixteen_entry_meta(); ?>
				</p>
				<p class="category">
					review
				</p>
				<span class="read-post">read post</span>
		</div>
	</a>

    Browser inspect:

    <a href="https://localhost:8888/sample-3/">
			</a>
<div class="article" style="background: url('https://localhost:8888/wp-content/uploads/2016/03/gogol.jpg')">
<a href="https://localhost:8888/sample-3/">
				</a>
<h1><a href="https://localhost:8888/sample-3/"></a><a href="https://localhost:8888/sample-3/" rel="bookmark">Sample 3</a></h1>
....

    David Uzelac

    (@daviduzelac)

    That’s odd.. I see nothing wrong with your code.

    Are you running any plugins that might cause an issue?

    Thread Starter chad99

    (@chad99)

    No plugins are running.

    The href=”” is displaying as 0,0 when I inspect. It is not taking up any space. When I give it height and width it breaks the layout.

    Thread Starter chad99

    (@chad99)

    I was able to resolve this issue by adding an overlay over the background image, and positioning it absolute. I gave it a width and height of 100%; and the post links now work.

    <a href="<?php the_permalink(); ?>">
     <div class="overlay"></div>
</a>
    David Uzelac

    (@daviduzelac)

    I’m so glad you fixed the code or altered it and posted your solution!

    Hello
    sorry but is not clear for me how to link and image (background)
    see this page
    https://www.rivalofts.com/lofts/

    if i click on the big image i would like to apply the same link that I have on the text.
    can you help me?

    tnx
    silvia

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Link Featured Background Image to Post’ is closed to new replies.