Setting a slide's status to active/not active

5 posts by 3 authors in: Forums > CMS Builder
Last Post: June 30, 2021   (RSS)

By CommonSenseDesign - May 14, 2021

Hi, all.

Can someone please tell me how to set the status of the first image in a slideshow to "active", but all subsequent statuses set to not active?

<?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?>
<div class="item active">
<div class="fill" style="background-image:url('<?php echo htmlencode($upload['urlPath']) ?>');">
<div class="banner-content">
<div class="container">
<div class="row">
<div class="banner-text al-left pos-left dark">
<div class="animated fadeInUp">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>

This is what the hard-coded version looks like https://www.castlerockcontracting.ca/home2.php

<div class="carousel-inner stky-banner">
<div class="item active">
<div class="fill" style="background-image:url('image/slider-oil-a.jpg');">
<div class="banner-content">
<div class="container">
<div class="row">
<div class="banner-text al-left pos-left dark">
<div class="animated fadeInUp">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('image/slider-oil-b.jpg');">
<div class="banner-content">
<div class="container">
<div class="row">
<div class="banner-text al-left pos-left light">
<div class="animated fadeInUp">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Grateful for any suggestions.

By Dave - May 25, 2021

Hi CommonSenseDesign, 

Try this: 

<?php $counter = 0; ?>
<?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?>
<?php
  $counter = $counter + 1;
  if ($counter = 1) { $class = "item active"; }
  else              { $class = "item"; }
?>
<div class="<?php echo $class; ?>">
  <div class="fill" style="background-image:url('<?php echo htmlencode($upload['urlPath']) ?>');">
    <div class="banner-content">
      <div class="container">
        <div class="row">
          <div class="banner-text al-left pos-left dark">
            <div class="animated fadeInUp">&nbsp;</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<?php endforeach ?>

Hope that helps!

Dave Edis - Senior Developer
interactivetools.com

By CommonSenseDesign - June 29, 2021

Hi, Dave.

Thanks for your advice. Sorry for taking so long to respond.

I tried your code, but unfortunately, it doesn't seem to have made any difference to the displaying of multiple images in the slideshow. It still only shows the top image in the list if the ones that have been loaded into CMSB.

https://www.castlerockcontracting.ca/home.php

Attachments:

home.php 8K

By Djulia - June 30, 2021 - edited: June 30, 2021

Hi CommonSenseDesign,

Change

<?php
  $counter = $counter + 1;
  if ($counter = 1) { $class = "item active"; }
  else              { $class = "item"; }
?>

with

<?php
  $counter = $counter + 1;
  if ($counter == 1) { $class = "item active"; }
  else               { $class = "item"; }
?>

Djulia