Different layout in frontend

• jeanko

• October 9, 2015 at 6:53 pm

Hi!
I need to develop an acf for the insert of images. The user can insert one, two, three (and so on…) images.
In frontend I need to develop a different templates for each case (i.e. Template one image / Template Multi-image), or there’s a function in acf gallery that select:
– when user insert one image, the frontend image height is (i.e.) 400px
– when user insert more images, the frontend image height is (i.e.) 200px

thank you for support.

• mediawerk

• October 26, 2015 at 9:47 pm

use code like this that count images inside the gallery and depends on that count use a if else loop for the different outputs.

<?php 
$images = get_field('gallery'); 
$total_images = count($images); //how many images are inside the gallery
foreach( $images as $image ): 
if ($total_images == 1){ //do what you wish i there is only one image
echo '<img class="h400px" src="'. $image['sizes']['large'].'" alt="'.$image['alt'].'"  title="'.$image['title'].'"  />';
} else { //do what you wish i there are multiple images
echo '<img class="h200px" src="'. $image['sizes']['medium'].'" alt="'.$image['alt'].'"  title="'.$image['title'].'"  />';
}
endforeach;
?>

depends on your needs choose at least one:

• use the class and css to style the 2 imagesizes
• add height param to the image
• use own/additional media size with the sizes that you wish

hope that help