Here’s the HTML that get’s screwed up by some sort of javascript?
<div class="edit_form_line"><div class="slider" style=""><input type="range" min="0" max="2" step="0.01" value="1" class="wpb_vc_param_value nectar-range-slider scale_desktop nectar_range_slider" id="scale_desktop" name="scale_desktop" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;"><div class="rangeslider rangeslider--horizontal" id="js-rangeslider-0" style=""><div class="rangeslider__fill" style="width: 10px;"></div><div class="rangeslider__handle" style="left: -20px;"></div></div></div><output class="output"><span class="number">2</span><span class="suffix">x</span></output></div>
]]>The problem is: When I have Resize larger images checked in the settings, and then also have the Disable Big Image code installed (see below), Imagify creates 2 images: an Original image file unchanged + Scaled image file that is sized as the Resize larger images max pixel size settings.
The way this should be working is: No scaled image is created and the Original image is set as the Resize larger images max pixel size settings.
Rather than the scaled image not being created and my original image being resized: The scaled image is being created using the Resize lager image max pixel settings, and the original image is being left alone. It looks like the process is REVERSED. Scaled should not be created. Original should be resized.
add_filter( 'big_image_size_threshold', '__return_false' );
This is no longer working. I have tested it on a few sites. I can confirm this filter code works without Imagify and works properly with other compression plugins like Shortpixel.
]]>I am using shortcode for product categories. I have added a bit of css to scale the image icon on mouse-over. It appears overflow: hidden, will not work for me, so how can I crop the image to contain it within it’s space.
Css (neither of the overflow kicks in):
/*** product_categories - Grid Image Styling ***/
.woocommerce ul.products li.product a img {
border-radius: 25px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
.woocommerce ul.products li.product a img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
overflow: hidden !important;
}
/**** Category Image Container in Grid ****/
ul.awf-product-categories li.product-category,
ul.awf-product-categories li.product-category.last,
ul.awf-product-categories.columns-3 li.product-category,
ul.awf-product-categories.columns-4 li.product-category,
ul.awf-product-categories.columns-5 li.product-category,
ul.awf-product-categories.columns-6 li.product-category {
position: relative;
margin: -3px 1px;
width: 24,5%;
overflow: hidden !important;
}
How can I fix this?
]]>For example, (1) I upload a base image with dimensions 2560 x 1707 pixels. (2) I am prompted to crop to the right aspect ratio. (3) I select the crop and crop the image to 2559 x 1342 pixels (1.906 aspect ratio, the correct one for Twitter).
But Twitter card images have a maximum width. When this image is embedded into my twitter meta tags: <meta?name="twitter:image"?content=".../image-scaled.webp" />
the scaled image that is chosen is 2559 x 1342, not 800px by 418px.
Is this expected behavior? What can I do to fix it?
]]>https://drive.google.com/file/d/1be9TlLU4TENFp2t1DQEoeUIea7RHHJKf/view?usp=share_link
https://drive.google.com/file/d/1u8jPipTcuwuO10pYh69-jwxcXezA2pVF/view?usp=share_link
]]>Yarrp is not scaling at all. It appears static and sort of blocky. Is anyone willing to share CSS that scales to fit 100% auto margin and then switch to layer for mobile and maybe tablet.
Is there another way to fix? Is there a block Gutenberg style that does this. If inserting at block, how can I avoid related to display twice?
]]>