I've got the flexslider field up in a content type. if I add text in the 'title' area when i upload an image it shows up just fine. it shows up in that semi-transparent div at the bottom of the photo.

What if I wanted a larger space that didn't overlap the photo, so that a user could add a 3 paragraph description of the image?

Doable?

Thanks for any help.

Comments

minorOffense’s picture

Status: Active » Postponed

We'll soon have caption field support through Views. Have a look at using Views or Views Slideshow along with the caption field option. That might work. Not sure how the CSS will handle multiple lines of text by default. You may need to adjust the styles in your theme.

Once it's available, I'll post an update here.

sgerner’s picture

While not ideal, you can currently achieve this with a little hackery. Make the image larger than what you need with a solid background or transparency to the side of the image you want the text to appear on. E.g. if you're image is 200px x 200px, make a 400px x 200px image with the image aligned to the left.

Attach your image with the appropriate image field and put whatever text you want to appear next to your image in the 'alternate text' and 'title' fields, but also wrap that text in html elements with assigned classes. E.g. The "Title" we marked up as <h2 class="flex">Your Title</h2> and the "Alternative Text" we marked up as <p class="flex">Some Useful Info</p>. Flex slider should display that info in the caption box on a slideshow (at least it did through views for us). Using CSS you can move the whole caption to the side with something like the following.

.flex-caption {
background: none;
opacity: 1;
height: 200px;
width: 200px;
margin-left: 200px;
}

More importantly you can target the individual elements inside the caption (h2.flex and p.flex in the above example) to style them appropriately or move them wherever you think is relevant. E.g. you might want to make the caption the size of the image with .flex-caption { width: 100%; height: 100%; } and then move the other html elements to opposite sides of the image.

Hope that helps!

minorOffense’s picture

Status: Postponed » Closed (fixed)

There is caption field support now available in the module.