Home Forums Add-ons Gallery Field Different layout in frontend


Different layout in frontend

  • 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.

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

    $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'].'"  />';

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.