Show theme images based on the visitor’s browser

[ad_1]

Hello everyone,

I’m trying to get my WordPress site to display theme images in the appropriate format based on the visitor’s browser and its supported image types, such as WebP, GIF, JPEG, etc.

So far, I’ve tried adding this code to the end of the functions.php file in my theme:

`// Añade soporte para el formato de imagen WebP (no es necesario si usas WordPress 5.8 o superior)`

`/*`

`function add_webp_mime_type( $mimes ) {`

`$mimes[‘webp’] = ‘image/webp’;`

`return $mimes;`

`}`

`add_filter( ‘mime_types’, ‘add_webp_mime_type’ );`

`*/`

​

`// Muestra las imágenes del tema activo en la misma carpeta que la imagen sidebar-bg.jpg`

`function show_theme_images() {`

`// Obtiene la URL de la carpeta de imágenes del tema activo`

`$theme_directory = get_template_directory_uri() . ‘/wp-content/’;`

​

`// Define los formatos de imagen permitidos`

`$image_formats = array( ‘webp’, ‘jpeg’, ‘jpg’, ‘png’, ‘gif’ );`

​

`// Obtiene la ruta física de la carpeta de imágenes del tema activo`

`$image_path = get_template_directory() . ‘/wp-content/’;`

​

`// Obtiene todas las imágenes válidas en la carpeta de imágenes del tema activo`

`$images = get_images_in_directory( $image_path, $image_formats );`

​

`if ( $images ) {`

`foreach ( $images as $image ) {`

`// Obtiene la URL y la ruta física de la imagen actual`

`$image_url = $theme_directory . $image;`

`$image_file = $image_path . $image;`

​

`// Obtiene el tipo MIME de la imagen actual`

`$mime_type = wp_check_filetype( $image_file )[‘type’];`

​

`// Si el navegador admite el tipo MIME de la imagen actual, la muestra y sale del script`

`if ( in_array( $mime_type, $image_formats ) ) {`

`header( “Content-type: $mime_type” );`

`readfile( $image_url );`

`exit;`

`}`

`}`

`}`

`}`

​

`// Obtiene todas las imágenes válidas en una carpeta dada`

`function get_images_in_directory( $directory, $formats ) {`

`$images = array();`

​

`if ( is_dir( $directory ) ) {`

`$files = scandir( $directory );`

​

`foreach ( $files as $file ) {`

`$path = $directory . $file;`

`$extension = strtolower( pathinfo( $path, PATHINFO_EXTENSION ) );`

​

`if ( in_array( $extension, $formats ) ) {`

`$images[] = $file;`

`}`

`}`

`}`

​

`return $images;`

`}`

​

`// Agrega el script que muestra las imágenes del tema activo al inicio de la ejecución de WordPress`

`add_action( ‘init’, ‘show_theme_images’ );`

And I’ve uploaded WebP versions of the images with the same name to the theme folder where the original versions are located.

However, I haven’t been able to achieve any results, and I can’t figure out why. I even tried changing the image folder path to be less specific, in case that was the issue. Could someone please help me out?

[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer