By nforkrd on

I'm trying to add text overlay to my views slideshow in D7. The slideshow is working fine. I'm able to add the sub module for overlay but for some reason the text gets inserted below and above the image. I followed the README but I'm just spinning my wheels. Anyone else experience this?

Thanks

⋅ Categories: Drupal 7.x

Comments

gjangelo’s picture

gjangelo commented

This was done in Drupal6, but it is just the views slideshow + css, so it should work on D7.

http://mustardseedmedia.com/podcast/episode42

nforkrd’s picture

nforkrd commented

I wasn't sure with the latest Xtra sub module and overlay plugin if the D6 way would work. I will give it a shot.

Thanks

ergunk’s picture

ergunk commented

Is this similar what you want?

http://www.mediasaur.com/en

I made it with Views/Views Slideshow and designed with CSS. You can see CSS info by using FireBug.


Mediasaur | http://www.mediasaur.com/en | http://twitter.com/mediasaur

Before asking for help, please read this http://slash7.com/2006/12/22/vampires/ and don't be a "Help Vampire". :)
nforkrd’s picture

nforkrd commented

Did you use the views slideshow xtra module? I wasn't sure if I was supposed use CSS to move the text or it was suppose to magically happen ;)

Thanks for your help. It's exactly what I'm trying to accomplish.

ergunk’s picture

ergunk commented

CSS can do very much more than moving text. My theme is a CSS based theme. There is no template files, code hacks etc.

I have these Views modules installed and enabled:

Views
Views Slideshow
Views Slideshow: Cycle
Views UI

I created Views and chose Slideshow as format. Then used CSS to design the Views block. That's all. You can see the CSS i used with Firebug(or with similar code inspectors) as i mentioned before. There is no magic or advanced tricks etc.; it is simple CSS. Maybe we can say Drupal and CSS are magical themselves. :)


Mediasaur | http://www.mediasaur.com/en | http://twitter.com/mediasaur

Before asking for help, please read this http://slash7.com/2006/12/22/vampires/ and don't be a "Help Vampire". :)
jeffpurtle’s picture

jeffpurtle commented

Where do I put the CSS once I get it from your site?

joverstreet’s picture

joverstreet commented

I'm not the most experienced at this, but I just figured this out a couple of weeks ago, so I figured I'd pass it along. This may not be the perfect way, but it worked for us.

In Views, find your text field you wish to modify under Fields (such as 'Content: Body'). Under Style Settings, enable 'Customize field and label wrapper HTML', choose 'DIV' for the Wrapper HTML element, and enable 'Create a CSS class'. I named my CSS class something unique: 'slideshow-feature-body'.

Then, find your primary theme CSS file. I'm using pixture-reloaded, which is part of the adaptive theme family. My file was in /sites/all/themes/pixture_reloaded/css/pixture_reloaded.css.

In that file, I found some existing slideshow entries and I added the following in that area:

.slideshow-feature-body {
font-size: 1.33em;
color: #fff;
font-weight: bold;
/*margin-bottom: 20px; */
position: absolute;
bottom: 5px;
right: 3px;
z-index: 10;
background: black;
color: white;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
padding: 3px;
}

This created a nice semi-transparent area with our text body over the bottom of the picture. Hope it works for you!

ergunk’s picture

ergunk commented

joverstreet's reply explains it.

Key points are: z-index, position and opacity.

Since you use right classes and right CSS code, you can put it anywhere in CSS files that your theme uses. But if you put it where related classes are you can find easier when you need to work on it later.

You don't have to add special classes to your view but it is a better approach. You can also delete unnecessary wrapper classes in same section on view settings. This way you can have clean and useful CSS.


Mediasaur | http://www.mediasaur.com/en | http://twitter.com/mediasaur

Before asking for help, please read this http://slash7.com/2006/12/22/vampires/ and don't be a "Help Vampire". :)
dmkelner’s picture

dmkelner commented

Thanks to @Mediasaur and @joverstreet for their help with this. I've been trying to add flexslider to my views slideshow using xtra overlay, which simply stopped working when I added flexslider. With your guidance I disabled the xtra overlay and will handle this in my css.

If anyone does know the solution to using flexslider with xtra overlay, that would still be appreciated.

susan5in7’s picture

susan5in7 commented

The desired text field you want to overlay just click on field settings in views slideshow.

click on style settings, tick customized field HTML, select HTML element as DIV and tick Customize field and label wrapper HTML, select HTML element as DIV.

click on Rewrite Results, tick Rewrite the output of this field and in text area insert the following code:

<div id="imgtextoverlay"> 
[machine_field_name]
</div>

(machine_field_name you can find in replacement patterns).

now go to your css file and add the following codes at the bottom of the css page

#imgtextoverlay {
    line-height:12px;
    text-align:center;
    padding:5px;
    text-shadow: 1px 1px 1px #000000;
    margin-top:162px;
    font-size: small;
    font-weight: normal;
    color:#FECC04;
    background-color: rgba(0,0,0,0.4);
    max-width:190px;
    width: 100%;
    max-height:42px;
    height:100%;
    position: absolute;
}

clear chache
refresh page
done.
you have to adjust your settings accordingly. In views with any field you can play with this trick especially with the image fields.

Tokoh’s picture

Tokoh commented

Hi,
Thank you susan5in7, I've been trying to get the slideshow to work with text and finally your suggestion worked and it was simple. The only thing I found was that the text was below the image. But if i changed the margin-top to a negative number then it was OK. The better alternative was to alter the order of the fields so that the text field appeared before the image in the views field list, then it worked perfectly.
But what I really wanted was to build a slideshow like the ones I used to build with powerpoint where the image is static and the text is animated.
I realise that I could put the text onto the slide using photoshop but this is not what I want to do.
Is there a way to do this with a views slideshow?

susan5in7’s picture

susan5in7 commented

hi tokoh,
thanks for the communication. you can do that where the image is static and the text is animated. just you have to use field slideshow for your content display. add a contetnt type and add title, image (value 1) and text field (value unlimited) for the content type. make sure in the text field set no of values unlimited. add content for the desired fields and create views with field slideshow and apply the above tricks. remember you have to insert your all text values which are to be animated in the text field. done.

Tokoh’s picture

Tokoh commented

Hi susan5in7,

It worked just as you said. Thanks for your help!
Just in case anyone else tries this there is a small adjustment that you need to make.
When you're amending the view, the multi-value field has an views configuration option called MULTIPLE FIELD SETTINGS.
You need to uncheck "Display all values in the same row"

keenegan’s picture

keenegan
Primary language French
commented

edit

asb’s picture

asb commented

The comment https://www.drupal.org/node/1503396#comment-8408255 is an extremely helpful post, thanks susan5in7! This is a very smart approach with lots of potential uses!

However, if you are trying to figure out why this does not work in D7, you might want to check your JQuery version: see #1494860: Views Rewrite Results UI Broken using JQuery 1.7. This occurs, for example, in combination with modern theme frameworks like 'bootstrap'. #64 from the referenced issue has a qualified workaround. Now Views rewriting works again, even on D7 with 'bootstrap'.

A second issue I'm having with this approach is the combination with responsive layouts and responsive images (like drupal.org/project/cs_adaptive_image). That seems to be not possible with the current version of Views. Any thoughts on that?

WorldFallz’s picture

WorldFallz commented

just an fyi, the comment is what is demo'd in the mustardseedmedia video linked above. As mentioned, the video is of d6 but it's similar enough that it's useful for d7 as well.

fransoa’s picture

fransoa commented

I tried susan5in7 solution and it works well. You're right about the responsive images issue. When resizing the window, the text overlay position changes. I'm looking for a solution for that as I want my overlay to stay align on top left corner of my image. Didi you find any solution ?