how to make post slider image link to post

Beaver Builder
1

hello,

Wanted to know how I can make the post slider image be clickable so it also links to post.

Here’s link of page I have it on:
http://kristawatterworth.com/designpalmbeach/

note: I used it on top left and just have it showing one post. then I offset the others and stacked them on top of each other to show smaller ones.

thx
-matt

2

Hi Matt,

Unfortunately, this isn’t possible out-the-box, you can enable the read more link. This is will allow you to navigate to the post.

If you want to have the entire slider image be clickable, you will need to override the post module and add your own custom. You can do this by following this guide - http://forum.wpbeaverbuilder.com/custom-module-documentation/#override-built-in

Also, if you have time, why not post this feedback to our UserVoice - https://wpbeaverbuilder.uservoice.com/forums/270594-general

Thanks,
Danny

3

Hi Danny,

Copied the files, but unsure where to put the code to add link

I’m guessing it’s something like:
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"></a>

Just not sure where to add this. Guessing it’s somewhere in post-loop.php?

4

Hey Matt,

That sounds about right on both! Where did you want to add the link to specifically? Did you want to add a link to the background image? Or just when you set the featured image as a thumbnail?

Ben

5

hi ben,

here’s link to page where I’m using slider.

What I did was use post slider module with one large image on left and then added 3 more smaller ones to the right. Kinda hacked it to make it function like something like Royal Slider

What client wants is to have the large post (left one) be clickable as a link to the post.

6

not sure if I was clear…
to answer you specifically, I want to add a link to the background image.

7

Hey Matt,

I got this working, although it’s not elegant and there is possibly a better solution. All I did was add the following code:

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>" class="link-wrap" >

Above the following in post-loop.php:

<?php
	// render featured images
	if( isset( $settings->show_thumb ) && $settings->show_thumb == 'show'){

I then placed the closing a tag between the last two divs. Like so:


	</div>
</a>
</div>

Now you’re going to need to use some custom CSS assigned to the class I added in the a tag above. As the a element in an inline element and therefore, height and widths are ignored. So you’re going to need to try using the code below, but play about with it. As the height and width set in the code below, is the height and width of my post slider yours is likely different.

.link-wrap {
  display: block;
  width: 1020px;
  height: 400px;
  position: absolute;
  z-index: 1000;
}

If you’re trying to recreate the Royal Slider, I think the best course of action would be to use a premium slider plugin such as RoyalSlider or Slider Revolution.

Thanks,
Danny

8

awesome. thank you, thank you!

Yes, I agree, probably best to get that slider, but to be honest the client kept having me make changes and I only recently realize that it looks like royal slider. that should do it

thanks again!

-matt

9

No problem, Matt. Happy to help!

Thanks,
Danny