Image Size Setting Issue
Scott
I am surprised tghat SPPG does not have the option to set image size
- fill
- by percentage
- cover
All we can set is physical size. I've run into a a problem when resizing browser The image size is default and fill correclty when viewing standard browser width. The button is set to full width which is what I want.
See home page and resize brwoser width to see what I am referrring too https://test.2bpdesign.com
How do I set iamge size to either fill or by percentage?
Paul Frankowski
Accepted AnswerImage Overlay No Animation Custom CSS
.overlay-background-image,
.image-effect-zoom-in .overlay-image-title::before
{ transition: none; transform: none; }
.image-effect-zoom-out .overlay-image-title::before {
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transition:none;
transition:none;}
.title-subtitle-bottom-left .sppb-addon-subtitle,
.title-subtitle-center-left .sppb-addon-subtitle {
transform: none;
transition: none;}
.image-effect-slide-right:hover .overlay-background-image,
.image-effect-zoom-in:hover .overlay-background-image,
.image-effect-zoom-out .overlay-background-image,
.image-effect-zoom-out:hover .overlay-background-image
{ transform:none; }
Paul Frankowski
Accepted AnswerHi Scott, Image addon is classic < img HTML tag - so it never had those values.
But you can use image as background for any Addon or Row, then you can set Image background size (in HTML called CSS background-size Property):
- cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
- contain - Resize the background image to make sure the image is fully visible
Paul Frankowski
Accepted AnswerBTW
Anytime you can use Custom CSS to modify any image you want also by using CSS @media - media queries to apply different styles for different media types/devices - also basic CSS.
Paul Frankowski
Accepted AnswerIn general for your Slideshow bg images you should use images that are 1920x600px - then it should look much better on laptop screen.
But I am guessing about what images/addon you are talking.
Scott
Accepted AnswerRemoved teh main image and set background image using the SPPB default image. Set custom width to 100 but have no height and becuase I did not use an main image the missing image symbol is visible
What am I doing wrong
Scott
Accepted AnswerSet the hieght in main setting to 255px that worked. However if I set the image to Contained and run into the same issue on browser resize. The only option is "Cover" but that crops image when browser is resized not suitable for display product images
it is odd the SPPB Devlopers did expand on main image tools but allocated those tools to background image. Does not make sense
Still have the problem of missing image icon.
Scott
Accepted AnswerThe second Product Vertical Change in Level I used "Image Overly Add-on" and is works better than background iamge only.
Animation would be nice to have an option to set no animation. What would be custom css to disable the zoom effect I am using now