image

Example 1: Simple image

An image can be rendered with the function tb_render_image($img_id)

Images and image sliders, should be wrapped in a div with class .tb-image-part
This class makes sure that each image is renderd with a fixed aspect ratio of 4/3.
This is especially important for parts of the websites where multiple images need to be aligned. Eg. in a slider or a multi-column layout.

Code

<div class="tb-image-part">
    <?= tb_render_image(1010) ?>
</div>

Result

Example 2: Image slider

Sliders can be rendered with the tb_render_slider($img_ids) function.
Behind the scenes, this function uses the tb_render_carousel functions. See Carousel.

Code

<div class="tb-image-part">
    <?= tb_render_slider([1010, 1020, 1030]) ?>
</div>

Result

Example 3: Carousel with images

Related components:

carousel

Code

<?php
    // Example data. In reality this data comes from the block's ACF fields.
    $fields = [ 'entries' => [
        [ 'image' => 1010, 'title' => 'An astronaut on the moon.' ],
        [ 'image' => 1020, 'title' => 'Craters on the moon.' ],
        [ 'image' => 1030, 'title' => 'More craters on the moon.' ],
        [ 'image' => 1040, 'title' => 'Outer space.' ],
        [ 'image' => 1050, 'title' => 'The moon.' ],
    ]];
?>

<?php if ( is_array( $fields['entries'] ) ) { ?>
    <?= tb_render_carousel_head() ?>
        <?php foreach ( $fields['entries'] as $entry ) { ?>
            <div class="entry tb-card">
                <div class="tb-image-part">
                    <?= tb_render_image($entry['image']) ?>
                </div>
                <h3><?= $entry['title'] ?></h3>
            </div>
        <?php } ?>
    <?= tb_render_carousel_foot() ?>
<?php } ?>