Changing portfolio and slider images to view in full 16:9

[timgarcia]

All my images are 16:9 aspect ratio (1920 x 1080), I want them to view in their entirety. How can I change the slider and portfolio dimensions to 16:9?

Topic

[Jason Bobich]

Hello,

If I understand you correctly, unfortunately, there is no feature in the theme for a full-width slider or portfolio. This would only be possible through your own child theme customizations. Or, perhaps through a third-party plugin like Revolution slider, which is a popular one (I’m not sure if their full-width feature will actually work in the theme or not, as I’ve never tried it personally).

[timgarcia]

I doesn’t need to be full screen. I just want to change the aspect ratio of the slider, because all my images are 16:9. It automatically crops them to fit in the slider. How can I change the slider’s aspect ratio to 16:9?

[Jason Bobich]

Assuming you’re working with our Theme Blvd Sliders plugin, when you’re configuring an individual slide there’s a select box there where you can pick from any registered crop size.

In terms of editing registered crop sizes, creating new ones, working with them, etc, checkout this article:

http://dev.themeblvd.com/tutorial/crop-sizes/

Also this plugin may be helpful:

https://wordpress.org/plugins/theme-blvd-image-sizes/

Does that help?

[Jason Bobich]

Remember that if you’re using any methods or tools to edit crop sizes, to always regenerate previously uploaded images afterwards.

https://wordpress.org/plugins/regenerate-thumbnails/

[timgarcia]

Thank you. The TB Images Sizes plugin was awesome. I changed the sliders to 940×529 (hard cropped). But, I’m still having trouble. When I view the slider in mobile, it’s 16:9. When I view in my MacBooks Safari browser, it’s not.

[Jason Bobich]

Did you try clearing your safari browser cache where you’re working?

I’m not sure how else the image aspect ratio could be different from browser to browser. If clearing your cache doesn’t do it, throw up a link to the page on your site with slider and I’ll check it out.

[timgarcia]

Yea. I did. I can’t figure out what I’m doing wrong here.

Sending you links now.

• This reply was modified 7 years, 6 months ago by timgarcia.

[timgarcia]

Ok, so I made 2 new sliders — Nivo and Bootstrap Carousel. They both display perfectly in 16:9 aspect ratio. I guess I’ll just use one of those.

• This reply was modified 7 years, 6 months ago by timgarcia.

[Jason Bobich]

On the other standard slider, after you changed the image dimensions did you regenerate your thumbnails with the plugin I gave you above? And then also re-save the slider?

[timgarcia]

Yep, I did regenerate thumbnails with the plugin you provided. I’ll try re-saving the slider.

[timgarcia]

I don’t know what else to do. The TB slider just doesn’t seem to want to resize. I even just created a new slider entirely, applied it, and it’s still not in 16:9. I’ve regenerated thumbnails, cleared my cache, etc. I may just end up using another slider.

• This reply was modified 7 years, 6 months ago by timgarcia.

[Jason Bobich]

ha! ok, so I just looked at your site link, and checked it out in my browser’s dev inspector… and you’re not crazy, and now neither am I. The theme has a max-height 350px set with CSS on the slide items containing the images. That’s why you’re having issues. On your theme options page in the Custom CSS box, just put this:

#featured .standard-slider li.slide {
	max-height: none;
}

… On mobile the width of the viewport is so narrow, that the height of the image when scaled down is less than 350px. And thus, that’s why you see the whole thing.

[timgarcia]

Perfect! Worked! Thank you!

[Author]

Replies