Replace Image size related to screen resolution? WordPress

julesphoto comments:

Is it possible to do it without shortcode?

Sébastien | French WordpressDesigner comments:

we can probably imagine the same system, searching in all content the tag <img> with a regex.

julesphoto comments:

I am only thinking that if you have to insert shortcodes everywhere and then in the future I change the system I need to go and remove or update them all the posts.

Is it possible to expand upon this to also check browser resolution and then serve the correct attachment size?


<?php
$images =& get_children( array (
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image'
));

if ( empty($images) ) {
// no attachments here
} else {
foreach ( $images as $attachment_id => $attachment ) {
echo wp_get_attachment_image( $attachment_id, 'thumbnail' );
}
}
?>


Sébastien | French WordpressDesigner comments:

This method (see my link) check browser resolution and then serve the correct attachment size...
If you don't want to use shortcode you can probably adapt this code with a system of regex instead of shortcode.


If you want adapt your function, why do not just use mobble (here : http://wordpress.org/plugins/mobble/)
With this little plugin you can use different conditionnal tag like : is_iphone(), is_mobile() and is_tablet().

For example, you code became :
<?php

$images =& get_children( array (
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image'
));


if ( empty($images) ) {
// no attachments here
} else {
foreach ( $images as $attachment_id => $attachment ) {
if (is_mobile()) echo wp_get_attachment_image( $attachment_id, 'small' );
elseif (is_tablet()) echo wp_get_attachment_image( $attachment_id, 'medium' );
else echo wp_get_attachment_image( $attachment_id, 'large' );
}
}

?>

julesphoto comments:

This is exactly what I want but is it not possible to define resolutions instead? So where it says is_mobile I can set a screen detection script? This way I can avoid the plugin.

Sébastien | French WordpressDesigner comments:

You can add this function in your file functions.php

add_filter('get_image_tag', 'restructure_imgs', 10, 2);
function restructure_imgs($html, $id, $alt, $align, $size='thumbnail') {

$sizes= array('thumbnail', 'medium', 'large', 'full');

$pic_mobile = wp_get_attachment_image_src($id, 'thumbnail');
$pic_tablet = wp_get_attachment_image_src($id, 'medium');
$pic_desktop = wp_get_attachment_image_src($id, 'large');


list( $img_src, $width, $height ) = image_downsize($id, $size);
$hwstring = image_hwstring($width, $height);

$title = $title ? 'title="' . esc_attr( $title ) . '" ' : '';

$class = 'align' . esc_attr($align) .' size-' . esc_attr($size) . ' wp-image-' . $id;
$class = apply_filters('get_image_tag_class', $class, $id, $align, $size);

$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" ' . $title;
$html.= 'data-img-tablet-url="'.$pic_tablet[0].'" data-img-tablet-width="'.$pic_tablet[1].'" data-img-tablet-height="'.$pic_tablet[2].'"';
$html.= 'data-img-desktop-url="'.$pic_desktop[0].'" data-img-desktop-width="'.$pic_desktop[1].'" data-img-desktop-height="'.$pic_desktop[2].'"';
$html.= 'data-img-mobile-url="'.$pic_mobile[0].'" data-img-mobile-width="'.$pic_mobile[1].'" data-img-mobile-height="'.$pic_mobile[2].'"';
$html.= '>';
//$html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size );

return $html;
}

All images that you will insert will be like something like that :

<img src="http://your-site/wp-content/uploads/2014/04/example-image-150x150.jpg" alt=""
data-img-tablet-url="http://your-site/wp-content/uploads/2014/04/example-image-300x195.jpg"
data-img-tablet-width="300"
data-img-tablet-height="195"
data-img-desktop-url="http://your-site/wp-content/uploads/2014/04/example-image.jpg"
data-img-desktop-width="960"
data-img-desktop-height="624"
data-img-mobile-url="http://your-site/wp-content/uploads/2014/04/example-image-150x150.jpg"
data-img-mobile-width="150"
data-img-mobile-height="150"
>

Now you can add jQuery and this script :

jQuery(document).ready(function($){
/* This function choose the good image relating resolution */
/* by Sébastien|french WordPressDesigner */
/* http://www.wpquestions.com/user/profile/id/2608 */

function checkWidth() {

if("matchMedia" in window) { // Détection du matchmedia
if(window.matchMedia("(min-width:1000px)").matches) {
console.log('min-width:1000px');
$("img[data-img-desktop-url]").each(function(i){
this.src = $(this).data("img-desktop-url");
});
}
else if(window.matchMedia("(min-width:800px)").matches) {
console.log('min-width:800px');

$("img[data-img-tablet-url]").each(function(i){
this.src = $(this).data("img-tablet-url");
});

}
else if(window.matchMedia("(min-width:400px)").matches) {
console.log('min-width:400px');
$("img[data-img-mobile-url]").each(function(i){
this.src = $(this).data("img-mobile-url");
});
}
}
}

// au chargement
checkWidth();
// au resize
$(window).on('resize',function(){
checkWidth();
});

});

Here the size of the image (thumbnail, medium or large) will be choice relating the media-query (min-width:400px,min-width:800px or min-width:1000px)

Sébastien | French WordpressDesigner comments:

Have you try this code ?

julesphoto comments:

hi, not yet. hope to try it today.