Hero section image problem

Hi Jakub Bereta,

Thanks for your post. The image is not compressing but instead, it’s trying to fill the entire header section of the page. We can force it to not stretch the image using custom CSS but you might not like the result. Could you share the URL of the page in question?

Hi Jakub,

Thanks for your reply. Could you try using the custom CSS code below and see if it helps? Insert into WP > Appearance > Customize > Additional CSS.

.hero-section .custom-header-media iframe, .hero-section .custom-header-media img, .hero-section .custom-header-media video {
    object-fit: contain;
}

Hi Jakub Bereta,

Thanks for your reply. Could you adjust the media size as explained here https://wpgeodirectory.com/docs-v2/design/images/#intro and see if it helps? If not, share your Website WP admin access here in private reply and we’ll check this out for you.

Hi jakub,

Thanks for your reply. If you insert this custom CSS code below, you’ll see the entire image with good resolution. Since the height is so limited, could you tell me what are you trying to achieve?

div#wp-custom-header {height: 500px;}

Hi Jakub,

Thanks for your patience. I’ve applied the PHP code below to remove srcset and could you check and see if it looks correctly now?

add_filter('wp_get_attachment_image_attributes', function($attr) {
    if (isset($attr['sizes'])) unset($attr['sizes']);
    if (isset($attr['srcset'])) unset($attr['srcset']);
    return $attr;
}, PHP_INT_MAX);
add_filter('wp_calculate_image_sizes', '__return_false', PHP_INT_MAX);
add_filter('wp_calculate_image_srcset', '__return_false', PHP_INT_MAX);
remove_filter('the_content', 'wp_make_content_images_responsive');