Current image

[Basil]

hi to Processwire LOVELY COMMUNITY!

i have a question about how can i add a class to current viewable image from images field.

my code is like this:

<?php foreach($page->images as $img) { ?>
<div class="item">
<img src="<?php echo $img->url; ?>" />
<div class="container">
<div class="carousel-text">
<h2><?php echo $img->description; ?></h2>
</div><!-- /carousel-text -->
</div><!-- /container -->
</div><!-- /item -->
<?php } ?>

i need to add only for the current image  to this div <div class="item">  the class of active, like this <div class="item active">

is there any way to make it happen?

Thank you in advance!
 

[kongondo]

If I get you correctly, you want the current image displayed by your carousel? PW has no control over that. That will have to be done using JS I think....

[Basil]

thank you kongondo! i manage to solve it this way:

<!-- Wrapper for slides -->
<div class="carousel-inner">

<?php $first = $page->images->first(); ?>
<div class="item active">
<img src="<?php echo $first->url; ?>" />
<div class="container">
<div class="carousel-text">
<h2><?php echo $first->description; ?></h2>
</div><!-- /carousel-text -->
</div><!-- /container -->
</div><!-- /item -->

<?php 
foreach($page->images->slice(1) as $img) { 
?>
<div class="item">
<img src="<?php echo $img->url; ?>" />
<div class="container">
<div class="carousel-text">
<h2><?php echo $img->description; ?></h2>
</div><!-- /carousel-text -->
</div><!-- /container -->
</div><!-- /item -->
<?php } ?>

</div><!-- /carousel-inner -->

i dont know a better way, but i wait and see..

[bernhard]

you mean you want to apply the "active" class only to the first item?

maybe something like this

<?php
$active = ' active'; // set active for first item
foreach($page->images as $img) { ?>
    <div class="item<?= $active ?>">
        <img src="<?php echo $img->url; ?>" />
        <div class="container">
            <div class="carousel-text">
                <h2><?php echo $img->description; ?></h2>
            </div><!-- /carousel-text -->
        </div><!-- /container -->
    </div><!-- /item -->
    <?php
    $active = ''; // remove class "active" for following items
}
?>

i like to use short tags <?= $var ?> instead of <?php echo $var; ?> maybe you have to change this depending on your server

[Basil]

thank you 

BernhardB

that is exactly what i want!

<?php
$active = ' active'; // set active for first item
foreach($page->images as $img) { ?>
    <div class="item<?= $active ?>">
        <img src="<?php echo $img->url; ?>" />
        <div class="container">
            <div class="carousel-text">
                <h2><?php echo $img->description; ?></h2>
            </div><!-- /carousel-text -->
        </div><!-- /container -->
    </div><!-- /item -->
    <?php
    $active = ''; // remove class "active" for following items
}
?>