First of all, I tried to search the answer in Google, there weren't many results and those who were weren't very informative, clear, stepped, or guiding. I've also checked Youtube, and I found something that seem too general and too long for this purpose.

What I look for is the simplest way to add overlay captions to Flexslider images. The captions should be different per image and I need these captions to contain both a headline and a body texts (That's why I've guessed that the image title field won't be enough by itself and that the solution should come from another place).

Please give me some guidance, for example, where do I even start to get this, what is the logical place to put the text in per image? (I guess it wouldn't be CSS content), what are the ways to do it, etc... And I hope that your good and didactic guidance will endure for all users to come.


1 Answer 1


Well, after investigating for a short solution, and one that involves the minimal number of modules, it seems that as of 2/1/2015 there are 2 main ways to give per-images captions, to the images of the slider. It's good to Install Flexslider and creating a working slider-View of images, and right afterwards, implement one of these ways below.

The first way:

Install the module Image Field Caption. It's install is simple but you might have to do about 10 minutes of CSS:

After you have installed the module your images will now have (besides the potential ALT\Title attributes) a third attribute named Caption. You can easily edit it and it can also integrate with CKeditor.

After you have printed the captions you could add some CSS. as of 2/1/2015, the captions appear naturally under the picture, but if you want it to be over the picture (not above, but flying over, in it's bottom for example) with some nice transparent background, just edit the CSS property "Blockquoute" and make sure you give it:

"Position: Absolute; right: 0; left: 0; bottom: 0; rgba(#,#,#,0.#); width: #%; height: auto;. The rest is rather simple...

The second way:

2 CSS guys I spoke seem to would have preferred this option, though bear in mind that it contains 2 modules instead of 1, in the first solution:

Make the images of the Slider appear as CSS backgrounds. This could be achieved via the module CSS Injector. After the images been presented as backgrounds, a way must be found to print a caption attribute below or on the Image. one way to print it is via the module mentioned above - Image Field Caption. The other is to print the image's very own Title attribute via the module image caption formatter.

All luck, Ben.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.