Option to link a Slide Background Image to an Article etc.

  • Idea
  • Updated 3 years ago
  • Not Planned
In the SlideDeck Wordpress-Plugin you can define a "Slide Background Image URL". But it would be great, if there would be another field, where I can enter (f.e.) an Article-URL, to which the Slide Background Image will be linked to!!
Photo of Torsten

Torsten

  • 5 Posts
  • 0 Likes

Posted 5 years ago

  • 5
Photo of Jamie

Jamie, Jr. Developer

  • 650 Posts
  • 42 Likes
This seems like a good idea, but a little too specific to make it into the code base. We try to add features that introduce little bloat and many users want.

You might be able to achieve the same result by adding an absolutely positioned <a> tag within your slides that link to the appropriate content.
Photo of Torsten

Torsten

  • 5 Posts
  • 0 Likes
I think my request isn't so specific. If you want to find a website in the WWW with a features-slideshow that only has linked the text to an object but not the whole background, you can search for it a long long time. The most feature-slideshows link the whole thing to something.

So the possibility to link the background-images in my opinion is an important and usefull option to make your slideshow attractive. Now if I want to realize it, I have to put the background-image manually with an < img ....>-tag in the slide and link this object with an < a href > tag. But this quite complicatet, because the img not automaticly fills the whole slide-background or is automaticly adjusted in the middle.

Another problem is, that on page-load, the slideshow is not ordered in vertical lines/objects but in a horizontal way and for few seconds - until the page is loaded - you have an overflow of the slideshow objects. The attribute overflow: hidden; doesn't work here. And if you put images in the slideshow the overflow-problem on pageload is quite stronger.

Besides this, the main reason for such an option is not the problem above, but a simplified way of linking a background image.

(Please excuse my bad english ;))

What you mean with the < a >-tag I really don't understand. In my slideshow I have entered to every slide a background-URL and linked the topic-text to the specific website-objects. The problem is still that the website-visitors must click on the topic-text to came to the website-object, the background-image won't be linked to it. This is unusual to every other slideshow on other websites who has always linked the whole slide-object to the specific website-target.

Look at the slideshow on fubiz.net (for example, or bild.de). This is a slideshow as it should be. Only points to move between the slides (no big date-stamps...), a linked background, perfect. And while we're on it, what I also miss at the smart-slidedecks is an option, to display NO text like "featured posts" or "recent posts" but only to keep this place empty. No one needs a big description as "featured posts" in a slideshow that takes so much place away.
Photo of Barnabas Nagy

Barnabas Nagy

  • 2 Posts
  • 0 Likes
This feature is an absolute must. I don't even understand why it's not default. In all other slideshow plugin that I used it was default.
Photo of AlexA

Alex

  • 9 Posts
  • 0 Likes
Can provide me with an example of what the absolutely positioned tag would look like?

Thanks.
Photo of subzero565S

subzero565

  • 1 Post
  • 0 Likes
After some tinkering I was able to do what was mentioned above. The implementation is as follows.

Make your CSS first. This is so the link will fill up the entire div.

#slide1_link a
{
height: 100%;
width: 100%;
position:absolute;
}


Now implement in your slider... obviously your slider and the way its organized might be different... but you get the idea.

<!---------------SLIDE 1 ---------------->
<dt>Slide Title</dt>
<dd style= "background:url(images/slide1.jpg)">
<div id ="slide1_link"> <!-- This is css div --->
<a href="page1.php"></a> <!-- This is added link --->
<h5>Slide Title</h5>
<h3>Content</h3>
<p>"More Content"</p>

</div> <!--close css div and win -->
</dd>

Photo of JohnJ

John

  • 4 Posts
  • 0 Likes
This is easy to accomplish without having to mess with CSS for anyone using the WordPress version. Within a slide's visual editor, paste the following code:


<table style="width: 100%; height: 100%;" border="0">
<tbody>
<tr>
<td style="cursor: hand;" onclick="document.location.href='URL-LINK';" colspan="100%" align="center" valign="top"></td>
</tr>
</tbody>
</table>


NOTE: URL-LINK would be replaced with the target URL.
Photo of emilemacE

emilemac

  • 3 Posts
  • 0 Likes
I cannot believe that you cannot add a link to a background natively. It should be the norm.

Thanks John, yours is definitely a solution, although I'm trying to figure out how to make the white table invisible...
Photo of JohnJ

John

  • 4 Posts
  • 0 Likes
The table color is likely controlled by your CSS. You should be able to adjust the table colors (background and border) by using the inherent table commands.

If you don't know what color code to use to make the background of the table match your site, use a program like GIMP or Photoshop to grab an image of your site and then use its color selector tool to figure out what the color code is.


<table style="background-color: #525365; width: 100%; height: 100% border-width: 4px; border-color: #f9f9f9; border-style: solid;" border="0">
<tbody>
<tr>
<td style="cursor: hand;" onclick="document.location.href='/URL-LINK/';" colspan="100%" align="center" valign="top"></td>
</tr>
</tbody>
</table>