Here is a CSS trick to make a background image a link.
I thought about this as a feature, but it doesn’t work for everyone. Your use case is so specific and the table view for a show can occupy more than 1-hour timeslot. For example, one show can be 3-hours and that means the time block stretches down the page. Some blocks might be an hour and others are three hours. There’s no good way to give the ability to add a thumbnail to the table view for everyone. Some would be square while others would need to be rectangles on the long side. No one can really plan for that and if we gave you a field to add a background image and instructions, you’d spend more time trying to create the perfect image for the block than you would if you just left it alone. So, if you want to add background images and link to them from the grid view, then you’re going to have to make that work on your own with a CSS trick like the one I recommend above.
P.S. After re-reading your question, we are not going to connect three boxes and make them a one, three-hour show. The boxes stretch down to fulfill their mission and it tells the site visitor looking at the calendar how long the show actually is as a timeslot. We’re not going to connect the three hours, give you an upload tool for a background, and then replicate the background three times. Doesn’t make sense for us to do that. Your use case is so specific that, like I said in my first reply, you’ll have to figure out on your own using the link provided.
What you are describing might be possible, but could involve some further experimentation and tweaking…
The table view *does* now support displaying show images with the show_image="1". I don’t see why you would want to set this at the background image for the cell instead, this would mean the Show title would be overlaid on the image and it could make it unreadable, and it would also mean it is tiled.
If you want to make the table cell fully clickable, then that is a different thing, and would be achievable with jQuery, you would need to apply a click handler function to the the Show cells.
Something like:
jQuery(document).ready(function() {
jQuery('.master-show-entry').click(function(e) {
e.preventDefault();
href = jQuery(this).find('.show-title a').attr('href');
if (!href) {
showclasses = jQuery(this).attr('class').split(/\s+/);
for (i = 0; i < showclasses.length; i++) {
if (showclasses[i].indexOf('show-id-') > -1) {
showid = showclasses[i].replace('show-id-', '');
}
}
href = jQuery('.show-id-'+showid+' .show-title a').first().attr('href');
}
location.href = href;
});
});
That should work so long as you have show_links="1" (which it is by default) regardless of whether you have show images displaying or whether a particular show has an image.
And you’d probably want to make this obvious to the user that clicking anywhere in the cell will open that Show by changing the cursor style.
.master-show-entry {cursor: pointer;}
