Hi Ben!
I have been meaning to do a quick update on this for some time.
It took me a few weeks to explore this possibility with a few plugins, and finally to find one way out.
I tried to tweak the following plugins:
1. Responsive tabby tabs
2. Virtue/Pinnacle Toolkit
3. Shortcodes Ultimate
4. Tabs Plugin for PageBuilder
First difficulty: by default, none of the following plugins offers to set an image in the header container of a tab. This can be solved by setting the width and height of the header containers by CSS, and to continue with CSS to place the url of the images as background of these containers. If I remember correctly, on one of the plugin, even that first simple step was not possible.
Then, one has to set a number of behaviours. Most or all of these plugins are set to display a different colour for the tab header containers (by default: header texts), whether they are hover, active (= open) or by default.
But this tends to get tricky, as the CSS codes are a little complex, with long naming – such as, in one line: plugin name-tab header container-specific tab-specific behaviour…! And of course, each plugin has its own naming system, so one has to tweak and explore each time. So I may have done small mistakes along the way, and with the right knowledge this may have been arrived that fairly easily.
See here for instance, with Shortcodes Ultimates:
http://www.lilafoundation.in/tabs-images-shortcodes-ultimate/
I wasn’t able to set the background image also when hovering a particular tab header container, or when having it active.
Third step: determining which tab should be open by default on load of the page. There are discussions and requests about this on various plugin forums, but although it seems possible to set the plugins to open a specific tab instead of the first, I couldn’t find an actual solution to keep them all closed by default…!
Lastly: responsive solutions. Most if not all plugins collapse the, say, 3 tabs, by default laid horizontally, into a vertical list of headers when the screen shrinks to a smaller width. No hopes, then, of using CSS to ask for the width/height+background images+horizontal lining-up display of the tabs to be kept as the whole set collapses to the smaller width. This problem is I think virtually unresolvable, unless someone one day actually designs a tab plugin aiming at this particular behaviour.
Here is the final combination of solutions that I opted for:
http://www.lilafoundation.in/scu-tabs-images/
This is done with Shortcodes Ultimates, with some CSS coding.
– To solve the problem of the hover/active displays of background images, I just placed the three images in a html table, above the shortcodes for the tabs. This also ensures the responsiveness of the images: they simply shrink proportionately, as the screen gets smaller.
– I kept a simple text as header content for each tab. I used CSS to code the width (so that the three tab headers cover the width of the page) and some CSS for the font centering, and the three font-colours on default/hover/active.
– CSS to remove the background colour and to specify the arrangement of the text in the actual content zone under each tab header.
– I also placed an anchor/internal link from each image to each tab content zone. This is an option provided by several of the plugins, and it is somehow useful here since some visitors at least would have the reflex of clicking on the image (in the table) rather than on the text notice “read more” placed below it (in the actual tab header). A small top gap appears then, as one uses the anchor click through the images: the screen reaches the content box under each tab header, and it cuts through the three images above. But at least the visitor reaches the content.
– On smaller screens, the three images remain aligned horizontally, with a proportinal size to the rest of the elements on the page. The three tab headers get in vertical alignment below them, and their respective contents remain centered on the page, below that once again.
That’s it ! 🙂 Hope this can be useful for someone else as well.
Best,
Samuel
