Drclaw, I've been happily using this module for the past few years ever since you showed me how to customize it for use on user profile pages. Then the other day I noticed that this module now supports this critical feature straight out of the box (via Background Images Formatter), so I'm even happier.

Now I want to see if you'd be interested in making the module support clickable background images as links? Here's an example where I wish the background image can be clicked on to go to its Beatport page so that visitors can make purchases: https://mediography.by/artist/simon-o'shine

Here's what I found out so far after going through a tutorial:

1) The good news is that this trick does work. I used the Link module and created a field within a content type, and at least got something working after fiddling around with it for a few minutes using Firebug.
2) The bad news is that for the trick to work with this module, there needs to be a way to somehow create a link field within the background image (meaning NOT within the content area, mainly due to the text-indent property).

Is there a way to support this feature? Thanks for your consideration. :)

#4 clickable_background-2424675-4.patch6.04 KBmalcomio


wwwjaylee’s picture

Issue summary: View changes
wwwjaylee’s picture

Issue summary: View changes
malcomio’s picture

Status: Active » Needs review
4.66 KB

Yes this feature would be really useful for background takeover ads.

Here's a patch that provides this functionality. It adds a link field to each item in the bg_image_ui form, and if the link field is populated, a full page link is added, which opens in a new window.

malcomio’s picture

Oops, forgot to include the changes to the .install file in my patch.

malcomio’s picture

wwwjaylee’s picture

@malcomio, sorry for the late reply as I somehow missed this update until now. I just tried your patch #4 on my site, and it unfortunately doesn't work yet. But after digging deep into the code, I noticed that it creates a new link field in the database, which doesn't seem to show up anywhere on the website itself (and yet I got to somehow save a link in there so far from a bunch of links in the existing link field I already have, which I have no idea how it even got there lol).

The good news is that if I manually change the CSS that gets applied to this link field to the existing link field I already have, it does sort of work. I say sort of because it messes up a lot of formatting and the entire header & footer areas of the website become clickable even though they shouldn't, but I can see how the basic concept does work.

I'm quite amazed at the moment, because I originally remember saying to myself last year that this is one of those things that probably just isn't possible due to certain CSS limitations, especially since I've never actually seen it work fully on any website (typically only a certain portion of the top part of the image is clickable), including the almighty IMDb.

I'll try testing everything again on a new test server, and will get back to you when I make some progress. I'm still quite skeptical that this will actually work, but we'll see if a miracle happens here. If it does, I'll write up a nice blog post for Planet Drupal and mention this page. Thanks so much for all the work so far.

wwwjaylee’s picture

Status: Needs review » Reviewed & tested by the community

@malcomio, you rock. I guess miracles do happen once in a blue moon. I'm changing the status of this issue to RTBC.


I realize that I actually forgot how to use this module, because I originally installed it a few years ago. So I eventually found out where the new link field shows up on my website (admin/content/background-images), and realized that I actually had entered info for one background image in there years ago, and that the "PATH" (which I mistook for link) & "BACKGROUND IMAGE NODE" fields were filled in but not the "LINK" field.

But it still didn't work after filling in the link, so I decided to try it out on my test server. And boy was it a pain in the rear to figure everything out, but I did finally get everything working.

Since I went through so much trouble and also owe @drclaw a lot, I'm gonna write 3 blog posts for Planet Drupal in the near future that will cover the following:

1) Background Images - This module is simple, but only if you know exactly how it works. I can see why newbies can't get it working, so I'll cover all the important details.

2) Background Images Formatter - This module is also simple, but doesn't even come with instructions lol. It's also critical for enabling Background Images to be used in membership-based sites, and I'll explain why using an example.

3) Clickable Background Images - Your patch works, but only with Background Images. I'll explain how I successfully applied it to Background Images Formatter.

So thanks again for all of your hard work. I'm ecstatic at the moment. :D

wwwjaylee’s picture

Finally, the blog post (within which there are links to the other related blog posts) is now done: http://jayl.ee/blog/2016/05/08/clickable-background-takeover-ads

Elynes’s picture

Hi everyone,
I've read @wwwjaylee solution but I think I'm missing something...
I installed the module and its patch, but I need to link image background using context because I need to show a background image only on certains pages and only for italian users.
Is there a way to do do that?

wwwjaylee’s picture

@Elynes, I wish I can help, but I haven't tried using Background Image Context:

1) I suggest you play around with it using a simple background image use case first.
2) Once you get it working, then try to make the image clickable.
3) But if you can't get it working, you might want to play around with Context to understand exactly how it works.
4) Or maybe Rules can also help?