Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Multiple Image Sizes in the loop WordPress

  • REFUND REQUESTED

Looking to display multiple images sizes in a single loop for a picturefill implementation.

How would I get the <strong>project-thumbnail-small</strong> image size to display in the loop below?



<?php
global $post;
$tmp_post = $post;
$args = array(
'post_type' => 'project',
'order' => 'ASC',
'numberposts' => 99
);
$myposts = get_posts( $args );
foreach($myposts as $post) :
setup_postdata($post);
$terms = get_the_terms( $post->ID , 'type' );
?>

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="item">

<picture>
<?php
$title = get_the_title();
$project_thumbnail = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail');
$project_thumbnail_small = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail-small');
foreach ( $project_thumbnail as $image ){
$retinaURL = $image['url'];
$extension_pos = strrpos($retinaURL, '.');
$retinaImage = substr($retinaURL, 0, $extension_pos) . '@2x' . substr($retinaURL, $extension_pos);
echo "<source srcset=\"{$image['url']}, {$retinaImage} 2x\" media=\"(min-width: 1024px)\">";
echo "<source srcset=\"{$image['url']} \" media=\"(max-width: 767px)\">";
echo "<img src='{$image['url']}' alt='$title' title='$title' />";
echo "<p>$title</p><span></span>";
}
?>

</picture>

</a>

<?php endforeach; ?>
<?php $post = $tmp_post; wp_reset_query(); ?>

2015-08-06 by Nick

Answers (2)

2015-08-06

Arnav Joy answers:

try this

<?php

global $post;

$tmp_post = $post;

$args = array(

'post_type' => 'project',

'order' => 'ASC',

'numberposts' => 99

);

$myposts = get_posts( $args );

foreach($myposts as $post) :

setup_postdata($post);

$terms = get_the_terms( $post->ID , 'type' );

?>



<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="item">



<picture>

<?php

$title = get_the_title();

$project_thumbnail = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail');

$project_thumbnail_small = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail-small');

foreach ( $project_thumbnail as $image ){

$retinaURL = $image['url'];

$extension_pos = strrpos($retinaURL, '.');

$retinaImage = substr($retinaURL, 0, $extension_pos) . '@2x' . substr($retinaURL, $extension_pos);

echo "<source srcset=\"{$image['url']}, {$retinaImage} 2x\" media=\"(min-width: 1024px)\">";

echo "<source srcset=\"{$image['url']} \" media=\"(max-width: 767px)\">";

// echo "<img src='{$image['url']}' alt='$title' title='$title' />";

echo get_the_post_thumbnail( get_the_ID(), 'project-thumbnail-small' );

echo "<p>$title</p><span></span>";

}

?>



</picture>



</a>



<?php endforeach; ?>

<?php $post = $tmp_post; wp_reset_query(); ?>

2015-08-06

Sébastien | French WordpressDesigner answers:

just use this code :



<?php

global $post;

$tmp_post = $post;

$args = array(

'post_type' => 'project',

'order' => 'ASC',

'numberposts' => 99

);

$myposts = get_posts( $args );

foreach($myposts as $post) :

setup_postdata($post);

$terms = get_the_terms( $post->ID , 'type' );

?>



<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="item">



<picture>

<?php

$title = get_the_title();

$project_thumbnail = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail');

$project_thumbnail_small = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail-small');

foreach ( $project_thumbnail_small as $image ){

$retinaURL = $image['url'];

$extension_pos = strrpos($retinaURL, '.');

$retinaImage = substr($retinaURL, 0, $extension_pos) . '@2x' . substr($retinaURL, $extension_pos);

echo "<source srcset=\"{$image['url']}, {$retinaImage} 2x\" media=\"(min-width: 1024px)\">";

echo "<source srcset=\"{$image['url']} \" media=\"(max-width: 767px)\">";

echo "<img src='{$image['url']}' alt='$title' title='$title' />";

echo "<p>$title</p><span></span>";

}

?>



</picture>



</a>



<?php endforeach; ?>

<?php $post = $tmp_post; wp_reset_query(); ?>






Your actual code displays the project-thumbnail-small image size
not the project-thumbnail-small image size

as you can see i have just change
foreach ( $project_thumbnail as $image ){
into
foreach ( $project_thumbnail_small as $image ){


Nick comments:

Yes, but I want to display project-thumbnail-small & project-thumbnail in the same loop. Sorry if I wasn't clear.

Aiming to get the following markup (two image sizes in the same loop)

eg as a crude example



<picture>
<source srcset="project thumbnail, project thumbnail retina 2x" media="(min-width: 1024px)"> // project_thumbnail
<source srcset="project thumbnail small, project thumbnail small retina 2x" media="(max-width: 1024px)">// project_thumbnail_small
<source srcset="{$image['url']} \" media=\"(max-width: 767px)\">";
<img src='{$image['url']}' alt='$title' title='$title' />

</picture>



Sébastien | French WordpressDesigner comments:

no problem

use this code :


<?php

global $post;

$tmp_post = $post;

$args = array(

'post_type' => 'project',

'order' => 'ASC',

'numberposts' => 99

);

$myposts = get_posts( $args );

foreach($myposts as $post) :

setup_postdata($post);

$terms = get_the_terms( $post->ID , 'type' );

?>



<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="item">



<picture>

<?php

$title = get_the_title();

$project_thumbnail = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail');

$project_thumbnail_small = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail-small');

foreach ( $project_thumbnail as $image ){

$retinaURL = $image['url'];

$extension_pos = strrpos($retinaURL, '.');

$retinaImage = substr($retinaURL, 0, $extension_pos) . '@2x' . substr($retinaURL, $extension_pos);

echo "<source srcset=\"{$image['url']}, {$retinaImage} 2x\" media=\"(min-width: 1024px)\">";

echo "<source srcset=\"{$image['url']} \" media=\"(max-width: 767px)\">";

echo "<img src='{$image['url']}' alt='$title' title='$title' />";

echo "<p>$title</p><span></span>";

}

?>



</picture>



<picture>

<?php

foreach ( $project_thumbnail_small as $imageSmall ){

$retinaURL = $imageSmall['url'];

$extension_pos = strrpos($retinaURL, '.');

$retinaImage = substr($retinaURL, 0, $extension_pos) . '@2x' . substr($retinaURL, $extension_pos);

echo "<source srcset=\"{$imageSmall['url']}, {$retinaImage} 2x\" media=\"(min-width: 1024px)\">";

echo "<source srcset=\"{$imageSmall['url']} \" media=\"(max-width: 767px)\">";

echo "<img src='{$imageSmall['url']}' alt='$title' title='$title' />";

echo "<p>$title</p><span></span>";

}

?>



</picture>








</a>



<?php endforeach; ?>

<?php $post = $tmp_post; wp_reset_query(); ?>

Sébastien | French WordpressDesigner comments:

sorry, you need probably this code in fact :


<?php

global $post;

$tmp_post = $post;

$args = array(

'post_type' => 'project',

'order' => 'ASC',

'numberposts' => 99

);

$myposts = get_posts( $args );

foreach($myposts as $post) :

setup_postdata($post);

$terms = get_the_terms( $post->ID , 'type' );

?>



<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="item">



<picture>

<?php

$title = get_the_title();

$default_thumb = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=thumbnail');


foreach ( $default_thumb as $image ){

$project_thumbnail = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail');

$project_thumbnail_small = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail-small');

$retinaURL = $project_thumbnail['url'];

$extension_pos = strrpos($retinaURL, '.');

$retinaImage = substr($retinaURL, 0, $extension_pos) . '@2x' . substr($retinaURL, $extension_pos);

echo "<source srcset=\"{$image['url']}, {$retinaImage} 2x\" media=\"(min-width: 1024px)\">";

echo "<source srcset=\"{$project_thumbnail_small['url']} \" media=\"(max-width: 767px)\">";

echo "<img src='{$image['url']}' alt='$title' title='$title' />";

echo "<p>$title</p><span></span>";

}

?>



</picture>



</a>



<?php endforeach; ?>

<?php $post = $tmp_post; wp_reset_query(); ?>

Sébastien | French WordpressDesigner comments:

try and tell me if it's ok please

Sébastien | French WordpressDesigner comments:

You can try this better code.
If you want to use this code :



<?php

global $post;

$tmp_post = $post;

$args = array(

'post_type' => 'project',

'order' => 'ASC',

'numberposts' => 99

);

$myposts = get_posts( $args );

foreach($myposts as $post) :

setup_postdata($post);

$terms = get_the_terms( $post->ID , 'type' );

?>



<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="item">



<picture>

<?php

$title = get_the_title();

$project_thumbnail = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail');

$project_thumbnail_small = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail-small');


$retinaURL = $project_thumbnail[0]['url'];
$extension_pos = strrpos($retinaURL, '.');
$retinaImage = substr($retinaURL, 0, $extension_pos) . '@2x' . substr($retinaURL, $extension_pos);

$retina2URL = $project_thumbnail_small[0]['url'];
$extension_pos = strrpos($retina2URL, '.');
$retina2Image = substr($retina2URL, 0, $extension_pos) . '@2x' . substr($retina2URL, $extension_pos);


echo "<source srcset=\"{$project_thumbnail[0]['url']}, {$retinaImage} 2x\" media=\"(min-width: 1024px)\">";

echo "<source srcset=\"{$project_thumbnail_small[0]['url']} \" media=\"(max-width: 767px)\">";

echo "<img src='{$project_thumbnail[0]['url']}' alt='$title' title='$title' />";

echo "<p>$title</p><span></span>";

?>


</picture>


</a>



<?php endforeach; ?>

<?php $post = $tmp_post; wp_reset_query(); ?>





this code display a code like that :


<picture>

<source srcset="project thumbnail, project thumbnail retina 2x" media="(min-width: 1024px)"> // project_thumbnail

<source srcset="project thumbnail small, project thumbnail small retina 2x" media="(max-width: 1024px)">// project_thumbnail_small

<source srcset="project thumbnail" media=\"(max-width: 767px)\">";// project_thumbnail

<img src='project thumbnail' alt='$title' title='$title' />// project_thumbnail



</picture>

Sébastien | French WordpressDesigner comments:

so, have you try ?

Nick comments:

Doesn't work I'm afraid :(

You removed the foreach and also you don't do anything with retina2Image?

Sébastien | French WordpressDesigner comments:

oh yes sorry !
just replace
echo "<source srcset=\"{$project_thumbnail_small[0]['url']} \" media=\"(max-width: 767px)\">";
by
echo "<source srcset=\"{$project_thumbnail_small[0]['url']}, {$retina2Image} 2x\" media=\"(max-width: 767px)\">";

Sébastien | French WordpressDesigner comments:

please use this code and tell me what is returned by print_r



<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="item">



<picture>

<?php

$title = get_the_title();

$project_thumbnail = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail');

$project_thumbnail_small = rwmb_meta( 'meta_project_thumbnail', 'type=image&size=project-thumbnail-small');

print_r($project_thumbnail);


$retinaURL = $project_thumbnail[0]['url'];
$extension_pos = strrpos($retinaURL, '.');
$retinaImage = substr($retinaURL, 0, $extension_pos) . '@2x' . substr($retinaURL, $extension_pos);

$retina2URL = $project_thumbnail_small[0]['url'];
$extension_pos = strrpos($retina2URL, '.');
$retina2Image = substr($retina2URL, 0, $extension_pos) . '@2x' . substr($retina2URL, $extension_pos);


echo "<source srcset=\"{$project_thumbnail[0]['url']}, {$retinaImage} 2x\" media=\"(min-width: 1024px)\">";

echo "<source srcset=\"{$project_thumbnail_small[0]['url']}, {$retina2Image} 2x\" media=\"(max-width: 767px)\">";

echo "<img src='{$project_thumbnail[0]['url']}' alt='$title' title='$title' />";

echo "<p>$title</p><span></span>";

?>


</picture>


</a>



<?php endforeach; ?>

<?php $post = $tmp_post; wp_reset_query(); ?>