Content slider proper photo size

[Bocksanders]

Content slider image size

The content slider has a great habit of cropping photos. The challenge is that It sometimes crops them in a bad place.

I am happy to edit the photos, but I’m trying to figure out what size photos the content slider likes.

[In Omnibus]

The default content slider image dimensions are 1120px X 200px.

[Bocksanders]

Thanks!

[Wayne Luke]

The system should attempt to center the image as the background. It doesn't actually crop them. It just doesn't show the image beyond the space allotted. The width will be constrained by the Layout column it is placed in. The height is an option within the Content Slider Module after it is placed on the page.

[Bocksanders]

The system should attempt to center the image as the background. It doesn't actually crop them. It just doesn't show the image beyond the space allotted. The width will be constrained by the Layout column it is placed in. The height is an option within the Content Slider Module after it is placed on the page.

Thanks

I tried something thaqt help a bunch. Instead of 200 pixles height I made it 400. Photos look nicer now.

[LCTlive]

In Omnibus wrote:

The default content slider image dimensions are 1120px X 200px.

Wayne Luke wrote:

It just doesn't show the image beyond the space allotted.

Even with images in the above dimensions, my content slider images are pixelated. I've tried using images in various sizes, but nothing has resolved the problem. The closest I've come to having images look good is with 500x188 pixels.

The pixelating is especially obvious on a desktop. Content Slider Module is set to the full page width, at the top of the page. And I want that slider to appear on all devices, since it adds some life to the site. Also, I tried setting the pixel height to something other than 0, but that takes up too much space for me; I like the 0 setting.

Any thoughts?

I'm on cloud version 5.6.5 at URL

[Wayne Luke]

All the content slider does is use CSS display the first attachment centered and/or stretched to fit in the space. There is no additional image processing on the part of vBulletin to resize or show these images.

If your images are resized too small on upload (default maximum sizes are 1440 X 900 pixels) or have an aspect ratio that isn't 16:9 and need to be stretched, then your browser will do the best it can. Even the resizing on vBulletin is not particularly advanced. There is no optimization and the algorithm doesn't care about pixelization. This works for about 90% of images uploaded to a vBulletin site. Improving that becomes a return on investment issue though we do try to update things over time. In vBulletin 4.X, the default image size was 320 X 240. If you need specific sizes of images, make sure you allow it in the AdminCP and edit them in a graphics editor to fit the space they will be displayed in.

[LCTlive]

Cool, I can use photoshop to get the 16:9 ratio pretty easily. I'll keep in mind that default max size, and vB4's default image size.

But there's got to be something more to this.

I've attached a doc with screenshots, so you can see what I'm talking about. Each of 3 images is in 16:9 ratio. Each's dimensions fall between vB4 default and vB5 default max, but there's such a difference in how the slider shows them.

[Wayne Luke]

vBulletin will provide the full size (whatever was originally stored) image to your browser. It then tells the browser to use the image as a background and to apply several properties to it...

1. vBulletin always sends the first attached image.
2. vBulletin tells the browser to center the image horizontally and vertically using background-position.
3. vBulletin will tell the browser to stretch the image to fill the space if the image is smaller than the space. The browser will stretch to the largest dimension (usually width) and then apply the centering.
4. Finally, vBulletin will tell the browser to hide any extra pixels if the image is larger than the space required.

This is the CSS code:

.b-content-slider__slide {
    background: url(https://forums.rabidbadger.io/images/contentslider_default_background.png) 0 0,#FFFFFF;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}

Then each slide gets computed CSS like this created by the browser (the element.style is not a real CSS class):

element.style {
   background-image: url("https://forums.rabidbadger.io/filedata/fetch?id=7115&type=full");
   width: 1558px;
   height: 300px;
   top: 0px;
   left: 46px;
   position: absolute;
   overflow: hidden;
   transform: perspective(2000px);
}

The image is not resized or altered by vBulletin to fit the space. This is done for several reasons. The primary one being that the vBulletin server doesn't even know how much space it has to fill when it sends the image to the browser. But also the server has no idea how large each column is or how tall you want to display this module. It doesn't know which column it is is. It doesn't even know what content to display when it builds the page. It will use whatever size the image already has with its upload. It doesn't even really know what kind of device it is being displayed on. This is all handled on the user's device via CSS and HTML.

So if you stick a 640 X 480 image in a 1558 X 100 pixel space, it will look bad. If you stick a 1440 X 900 image in the same space, it will look much better. If you stick an image with a lot of white space in the middle of it, it won't look good. Looking at the images referenced by the content slider on your page, they are small images and they will scale poorly. If you really want to insert small images, I suggest making a banner image in the size you want and attaching it first. This means it will have less warping and scaling involved.

For an example see this topic on my Cloud Site: https://forums.rabidbadger.io/rabidb...d-on-this-site. Then look at the content slider on the home page. That topic is the only one featured but it should provide the example.

[LCTlive]

Thank you for the thorough explanation. It really does help to understand how this feature works at a granular level.

Still, I'm not able to put that information to good use.

To that end, I've created a few featured articles using a nice large image for each one. I click the camera icon below "Enter title" but above the rest of the rest of the formatting options, then I click "Upload" (not Upload Attachments). I like to see the images in the Trending module on the home page BTW. You can see the images at https://www.livecointalk.com/articles. I've written the image sizes there too in the articles.

But if you go to the front page and look at the slider, none of these images look good.

Regarding my images:
- If 1558 x 100 are the slider dimensions, then why doesn't that image look good?
- I included 1440 x 900 since it should look much better
- I went to the maximum width of 1440 but made sure I had the 16:9 ratio
- I went to the maximum height of 900 but made sure I had the 16:9 ratio

All images are JPG exported from Photoshop with maximum quality.

If you could let me know the image parameters which work best with the slider feature, maybe that will solve my problem. Thanks again.

[Wayne Luke]

Let's look at your image. I have attached it below. Personally, I think this is a bad image to experiment with. Too much black space and not enough contrast where there is color. The red box is there for a representation of what the content slider will use for the background.

This is your image on my site:

[Wayne Luke]

And here is the same image used in an article on your site:

[LCTlive]

Thanks for creating that Testing Slider article. I copied that method in newly created articles, and now all my images work out as intended.

The biggest problem I faced was confusion over "the first attached image" which you mentioned above in #9, and I've read elsewhere. Because there are multiple ways to attach an image. The wrong ways are included in the attached screenshot, in case anyone else finds this helpful.

I learned that the right way to do this, is to Create New Article > use Advanced Editor > click Image button. I've been uploading the images I want to use, sending to server, and etc.

[Wayne Luke]

The method you highlighted creates a topic of the Photo Gallery content type. Not an attachment.