CPT Bootstrap large images not centered

Hi seattlejean,

I’m a little confused – the images in a bootstrap carousel should stretch to the width of the carousel, so alignment shouldn’t be an issue.

Could you post a screenshot or a link so that I can see what the problem is?

Cheers,

Phil

I have the same issue with a website that I’m setting up https://sestrich.com/kollmsestrich/

Peg

and i should have added that I am using the Unite theme which recommended CPT Bootstrap Carousel.

Ah ok – psestrich, your image is too small. It’s narrower than the carousel which is why it doesn’t reach to the far side.

There’s a new feature in the release I pushed out a couple of days ago that could work well for you – under Carousel > Settings there is a dropdown at the bottom that says “Use background images?”. With this setting, the images will be stretched to fit the width of the page.

Let me know if that does the job for you. Alternatively, if you have a larger version of the photo, using that should also work.

Phil

ps. Great engagement photo! Congrats!

Perfect! I wouldn’t have associated choosing “Use background images?” as the option to stretch the pic. I thought they just stretches automatically. In the meantime, i can work on resizing the pics accordingly. Under pressure to get the site up and running asap.

Thank you for your speedy reply!

Peg

No worries, glad that did the job! Yup, the settings page is looking a bit messy – it’s had various extra features sort of bolted on over the last few releases. The “background images” title relates to what’s being done behind the scenes with the HTML and CSS, I agree that it’s not very intuitive as to what it actually means.

I think my main focus for the next release will be to make the whole plugin a bit more user friendly – I’ve noted this point as an issue on github. Thanks for the feedback!

Phil

So I’m having the problem where the images aren’t “centered” and when the window is sized up, there’s a big grey bar to the right of the image taking up space. The images are large so I can’t see this being an issue with the image not being big enough.

I tried “stretching” (using background) images, and there is a major flaw with this procedure, namely that it is distorting the pixels in the image. So what was once a very crisp photo is now not-so-much, which is no good for my purposes (photography).

I don’t think “stretching” the image should be the solution to this problem. There should be a way to ‘cap’ the max size of the slider.

I want to use the “large” size, as the “medium” is too small, and yet the “large” size is too big. Why no options for capping the max width of the slider, or for inputting custom options?

Ok I found out the image quality problem only exists in “Unite – Featured”. If I use Large and “background image” the problem with the quality goes away..

But there remains other problems.. for example, when using “background image”, it doesn’t scale right in the responsive themes. When scaled all the way down, it gets tall and narrow, rather than the height scaling with the page, causing it to look ridiculous.

What I want to do is just be able to set it to Large, NOT select background, and to get rid of that blasted grey bar that pops up if the page gets resized quite large.

Hi siemslikelynn,

If there is a grey bar on the right hand side of the slider, I can assure you that it is because your image is too small. If you’ve uploaded a large image, it’s probably because you have selected a downsized version in the Feature Image selection. Make sure that the drop down box on the bottom right says “Full Size”, and not “Medium” etc..

The default behaviour of the carousel is exactly the functionality that you request – it fills the available space, shrinks (but doesn’t stretch) the image to that width and shows the entire height. There is no option to cap the maximum width of the carousel within the carousel settings as that is a styling design – the plugin simply provides an easy way to manage images and generate the correct HTML, styling the way that the HTML is laid out and looks is up to you / the theme that you use.

The background-image feature is new in the latest release and is still a fairly experimental option that I included at the request of some users. Having different heights for the different bootstrap responsive breakpoints is a nice idea, I’ll look into writing that into a future release. This won’t be very soon though as my work on this plugin is entirely voluntary, I simply wrote the code for myself and thought that others might appreciate it as well.

If you have a link then I’d be happy to have a look for you to see if I can suggest ways that you can configure the plugin to work for you. Otherwise, it sounds like it’s working as it should.

Cheers,

Phil

Hi there. I hope you don’t mind me piggybacking on this topic. I am having the exact same problem as siemslikelynn. There is a gray bar on the right of my carousel images. My images are large, 1000 x 750 px, and I have definitely selected Full Size. The gray bar only appears when I stretch my browser window out to a certain width. Is 1000×750 too small? That is the maximum size I have.

Hi daeruin,

It sounds like it will be the same problem – 1000px isn’t really that wide, according to these stats 99% of people’s computers run with a resolution of more than 1000px width. If your carousel is the full width of the browser and people have the window full screen, you’ll be coming up short.

The solution is the same as described above – either try to find some bigger images or use the new ‘background images’ feature, which will stretch them to the correct width.

Hope this helps anyway, I’ll look into writing a new FAQ on this topic for the next release..

Cheers,

Phil

My images are 1900 (wide) and above, so that continues not to be the problem on my end.

That being said, when you blamed it on the size of my images (even though I knew it wasn’t) I pretty much gave up and used the ‘background image’ feature even though it seems to mess with my image quality at times and there’s no way to control what section of the image is being displayed in the box, so I’ve had to get choosey with the kind of photos that go into it… frustrating.

I’m sorry siemslikelynn – without a link to see your setup it’s almost impossible to diagnose what’s wrong. If you have a link showing the problem I’d be happy to have a look.

The only time that I’ve ever seen a grey bar is when the images are too small. If your source images are bigger then the carousel then there must be something specific to your setup which is making them too narrow (such as conflicting CSS rules or so on). Apologies if my earlier reply came across a bit tetchy, it was the end of a long day.

Phil

Yeah, the “background image” feature works well for larger screens, but for much smaller screens like mobile, it really doesn’t work since it simply shows a narrow slice of the image which isn’t helpful at all.

It seems strange to me that the gray bar only appears after stretching the window a certain width, but never gets bigger than about an inch wide no matter how wide I stretch my browser window across my 27″ iMac screen. Is that because the width of the container is capped in the theme I’m using? The makers of the Unite theme gave me this CSS that has eliminated the gray bar completely:

.carousel-inner .item img, .carousel-inner .item a img {
   width: 100%;
}

siemslikelynn, maybe this code will work for you too since it seems you are also using the Unite theme. They said to put it in Appearance > Theme Options > Other in the Custom CSS box.

That sounds like you have some conflicting CSS (such as padding or a margin) which is pushing the edge of the image back. Almost impossible to diagnose without seeing the page though. Do you have a link?

For reference, none of this topic actually relates to the plugin by the way. All that the plugin does is generate the HTML markup for the Bootstrap Carousel with the images supplied (so that you don’t have to write the HTML yourself). While I’m happy to try and help, the problem is generic enough that you can also ask at places like Stack Overflow where there are many more people on hand to offer advice..

Phil