New Slider....how do you configure it to show pictures

[jdj]

I've just upgraded my test site to 5.1.5 and I'm looking at the new slider. Adding it to a page is easy enough. I've gone to an existing forum post with a picture in it, gone to the inline moderation menu and chosen 'feature post'. When I do so the topic title turns up in the slider but the picture in the post does not show.

How do you configure the slider to show pictures? Or attachments generally?

[Wayne Luke]

It will use the first attached image on the post in the slider. It will not use images inserted via the [img] tag.

[jdj]

It will use the first attached image on the post in the slider. It will not use images inserted via the [img] tag.

Perhaps I didn't make myself clear. I've installed the slider. I've taken an existing post which has an image inserted into it and which is visible in that post. I have made that post a featured post. The title of the post does show in the slider, but the image visible in the post doesn't show in the slider. How do I set it so that it does?

[Wayne Luke]

Is the image inserted with the [IMG] bbcode? If so, it won't be used. It needs to be actually attached to the post. Attached images can still be inserted inline. There is no configuration. It will only use the first attached image on a post.

[jdj]

OK...so it's attachments only. Thanks for the info.

[Mark.B]

Also, you'll need to clear the system cache before an image will show in the slider.
AdminCP > Maintenance

[jdj]

I did that, it made no difference. I'm guessing it's something to do with Wayne's previous post.

[jdj]

Is the image inserted with the [IMG] bbcode? If so, it won't be used. It needs to be actually attached to the post. Attached images can still be inserted inline. There is no configuration. It will only use the first attached image on a post.

OK, that works thank you. It doesn't pick up an image inserted into a post but it does pick up the first attachment if there's an attachment.

It doesn't appear to resize the attachment. So with the test post I've done so far it appears to display part of the image. Can you give any more detail on the size of images it displays? E.g., if you wanted the slider to display the entire first attached image, what size would it have to be?

[Wayne Luke]

The slider will center and scale the image to fill the space. This gives the best results with moderately sized images. 1440 X 900 or larger.

[jdj]

Thanks. I've just noticed the new stylevars under Module Contentslider.

- I can see that the height of the content slider is set under module_contentslider_height and that the default is set to 200px high. [I've just noted you can also change that from the default of 200px each time you deploy the module by editing the configuration for the content slider in site builder].

- I can see that the background colour and image are set under module_contentslider_background: It looks as though you can set an image 1px wide then choose 'repeat' so I'm guessing if you set that it will then fill an appropriate proportion of the page filled by the module. Is responsive design more likely to work if you do this? Or does it matter?

Also: the stylevar module_contentslider_caption_background tells me it controls the '...background for the Content Slider module caption block.' What is the 'Content Slider module caption block'?

[Wayne Luke]

The problem with the slider and responsive is that it escapes the bounds of its container if the container is resized, not the background image display. If you put the content slider in a 30% width column, it should work fine on most devices. If you put it in a 70% or 100% width column, it can break. Some devices will force a resize on it anyway though.

The Caption Block is the text that contains the title of the featured topic.

[jdj]

I'm trying to deploy the content slider on vB5.1.5.

I've found by trial and error that if I make an attached image the first attachment in a post which I then feature, the image will display in the slider, but only if I choose the thumbnail option when I upload.

What happens when I upload the image is that the text that appears from the post itself (the title and first few words of the post), that I believe are called the caption block, appear over the top of the image in the slider. But the text appears as black and there is nowhere that I can see in the stylevars to change the colour of the text so that it does not stand out against a dark image.

I've got around that on my test site by creating a new gif with the bottom third of the first attached image blocked out by a white rectangle so that the text in the caption block stands out in the slider. Is there any other way to change the colour of the text in the caption block? You appear to be able to change the background colour of the caption block in the stylevars, but not the colour of the font.

Also, when the text appears in the content slider it is not left aligned, so the slider chops off most of the text in both the title and the first few words of the post. Is there any way to set it so that it's left-aligned?

[Wayne Luke]

The caption text is currently hardcoded in vbulletin_global.css.

.slideshow .caption {
    color:#FFF;
    font-size:12px;
    height:50px;
    margin:15px 30px;
}

As it is white, it should show up on dark images. However there is no way to tell whether an image is dark or light or change the color of the caption text based on this. It really should have a defined background-color as well.

http://tracker.vbulletin.com/browse/VBV-14372

[jdj]

The problem is that the image contains white writing in it. If I change the image so that the bottom third is white the caption block text appears as black and it stands out.

PS: I can see that the code says color:#FFF but the text on my test site appears in black without changing the CSS

[[email protected]]

Makes sense that the sizing has to do with bootstrap compliance and cell phone compatibility. On all my websites I use 32% just to be sure.

[jdj]

The caption text is currently hardcoded in vbulletin_global.css.

.slideshow .caption {
color:#FFF;
font-size:12px;
height:50px;
margin:15px 30px;
}

As it is white, it should show up on dark images. However there is no way to tell whether an image is dark or light or change the color of the caption text based on this. It really should have a defined background-color as well.

http://tracker.vbulletin.com/browse/VBV-14372

So presumably I can change this in css_additional then? What do I change to get the text to left align? Do I just stick in

.slideshow .caption {
color:#FFF;
font-size:12px;
height:50px;
margin:0px 30px;
}

[[email protected]]

text-align: left;

personally, I like text-align: justify for most of my articles. Then it just wraps around the images and lines up on both sides nice and square. We need a button for that!

[Wayne Luke]

You can change it in additional CSS as well as add additional CSS code to get the look you want.

[jdj]

You can change it in additional CSS as well as add additional CSS code to get the look you want.

I tried adding the .slideshow .caption etc. code together with either text-align: left; or text-align: justify; to css_additional, for my live template. I hit save and reload, cleared the cache. In both cases nothing changed. I used this:

.slideshow .caption {
color:#FFF;
font-size:12px;
height:50px;
margin:0px 30px;
text-align: left;
}

.slideshow .caption {
color:#FFF;
font-size:12px;
height:50px;
margin:0px 30px;
text-align: justify;
}

where did I go wrong? And what code should I have used in css_additional?

For the benefit of anybody else trying to use this what I've been trying to do is get the image to display in the sidebar without the image being truncated and without the slogan obscuring the image. Having tried and failed to do that I tried creating a separate PNG of precisely the same size and width of the default background png with the top half of that png black and the bottom white (the slogan text appears black and in the bottom half of the slider window) in the centre column of a 15/75/15 layout. That does actually work on a desktop (not tried on a handheld yet) but you've got to be careful with the height settings in the slider; you need to leave them set to 0.

[Wayne Luke]

I'd have to look at the code by you may not be able to justify the text if it isn't in a block element.

We're looking at controlling the text color and background color via Stylevars.