0

I need to retrieve the featured image according to the screen type.
For tablet and mobile medium size and for desktop large.
How can I know the user's device type on server side to retrieve the appropriate image size?
(In the example I use the theme API but of course I can use WordPress native API)

       $thumb_args = array(
            'class'    => 'alignnone',
            'img_id'   => $thumbnail_id,
            'wrap'     => '<img %IMG_CLASS% %SRC% %SIZE% %IMG_TITLE% %ALT% />',
            'echo'     => false,
            'img_meta' => wp_get_attachment_image_src($thumbnail_id, 'medium'),
        );

        // Thumbnail proportions.
        if ( 'resize' === of_get_option( 'blog-thumbnail_size' ) ) {
            $prop = of_get_option( 'blog-thumbnail_proportions' );
            $width = max( absint( $prop['width'] ), 1 );
            $height = max( absint( $prop['height'] ), 1 );

            $thumb_args['prop'] = $width / $height;
        }

        $post_media_html = presscore_get_blog_post_fancy_date();
        if ( $config->get_bool( 'post.fancy_category.enabled' ) ) {
            $post_media_html .= presscore_get_post_fancy_category();
        }

        $post_media_html .= dt_get_thumb_img( $thumb_args );
2

You should not attempt to know the user device on server side, as this kind of thing will mean you will not be able to use any page caching, and it will fail when the browser "window" size changes.

Do such decisions on client side. If it is impossible to simply use CSS, just prepare an appropriate JS array with the URLS of possible images and set the images to the appropriate one based on actual client area detection done in JS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.