First five items in a carousel slideshow, next five in a list

8 posts by 4 authors in: Forums > CMS Builder
Last Post: September 24, 2020   (RSS)

By CommonSenseDesign - September 23, 2020

Hi, All.

I'm working on a news website, and you can see the homepage here: www.wilmotpost.ca/demo/index.php

There's a carousel with some photos and news headlines, followed by a list of insets and headlines. I'd like the first five records to go into the carousel, and the next five to appear in the list format. Can someone talk me through this, please? Right now, I only know how to have the same records appearing in each section.

Here's what I have so far.

===

<!-- Popular news carousel -->
<div class="card__post-carousel">

<?php foreach ($homepage_insetsRecords as $record): ?>
<div class="item">
<div class="card__post">
<div class="card__post__body">
<a href="<?php echo $record['_link'] ?>">
<?php foreach ($record['inset_image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" class="img-fluid" alt="<?php echo htmlencode($upload['info1']) ?>">
<?php endforeach ?>
</a>
<div class="card__post__content bg__post-cover">
<div class="card__post__category"><?php echo $record['category:label'] ?></div>
<div class="card__post__title">
<h2><a href="<?php echo $record['_link'] ?>"><?php echo htmlencode($record['title']) ?></a></h2>
</div>
<div class="card__post__author-info">
<ul class="list-inline">
<li class="list-inline-item"><a href="<?php echo $record['_link'] ?>"><?php echo htmlencode($record['author']) ?></a></li>
<li class="list-inline-item"><span><?php echo date("D, M j, Y", strtotime($record['date_posted'])) ?></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>

</div>
<!-- End Popular news carousel -->

<!-- Category news -->
<div class="wrapper__list__article">
<div class="wrapp__list__article-responsive">

<!-- Post Article List -->
<?php foreach ($homepage_insetsRecords as $record): ?>
<div class="card__post card__post-list card__post__transition mt-30">
<div class="row ">
<div class="col-md-5">
<div class="card__post__transition">
<?php foreach ($record['inset_image'] as $index => $upload): ?>
<a href="<?php echo $record['_link'] ?>"><img src="<?php echo htmlencode($upload['urlPath']) ?>" alt="<?php echo htmlencode($upload['info1']) ?>" class="img-fluid w-100"></a>
<?php endforeach ?>
</div>
</div>
<div class="col-md-7 my-auto pl-0">
<div class="card__post__body ">
<div class="card__post__content ">
<div class="card__post__category "> <?php echo $record['category'] ?></div>
<div class="card__post__author-info mb-2">
<ul class="list-inline">
<li class="list-inline-item"><span class="text-primary"><?php echo $record['author'] ?></span></li>
<li class="list-inline-item"><span class="text-dark text-capitalize"><?php echo date("D, M j, Y", strtotime($record['date_posted'])) ?></span></li>
</ul>
</div>
<div class="card__post__title">
<h5><a href="<?php echo $record['_link'] ?>"><?php echo htmlencode($record['title']) ?></a></h5>
<p class="d-none d-lg-block d-xl-block mb-0"><?php echo $record['content']; ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>

</div>
</div>
<!-- End Category news -->

Attachments:

index.php 9K

By gkornbluth - September 23, 2020 - edited: September 23, 2020

Hi,

What comes to mind is a second load records call in the body of the page after the carousel to load all of your home_page_insets records. Then, if I remember rightly, you should be able to put an if statement into the foreach loop that allows only image 5 through 9 (assuming you really meant the next 5 instead of the rest of the images) to be shown. Maybe even a where statement in the second load records call to limit the specific records that can be retrieved to only those image between number 5 and number 9 (images start with number 0).

I can't get to the CMSB cookbook right now, but I know there's an approach if not an answer on how to do that kind of thing (displaying only certain images on a page) in the images section of the cookbook.

Good Luck,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By KennyH - September 23, 2020

You could probably accomplish this by doing something like what I have done with article posts:

Here we load the first 5 articles

  list($article_postsRecords, $article_postsMetaData) = getRecords(array(
    'tableName'   => 'article_posts',
    'limit'       => '5',
    'loadUploads' => true,
    'allowSearch' => false,
  ));

Now, we can create add this again for the next five records, but with a few modifications

  list($article_postsSideListRecords, $article_postsSideListMetaData) = getRecords(array(
    'tableName'   => 'article_posts',
    'limit'       => '5',
    'offset'      => '4',
    'loadUploads' => true,
    'allowSearch' => false,
  ));

$article_postsRecords, $article_postsMetaData becomes $article_postsSideListRecords, $article_postsSideListMetaData

Add 'offset' => '4', to skip the first 5 records (numbering starts at zero)

Then you would display the first 5 images on the page like this

<?php foreach ($article_postsRecords as $record): ?>

<?php foreach ($record['images'] as $index => $upload): ?>
  <img src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="">
<?php endforeach ?>

<?php endforeach ?>

The next 5 images pull from $article_postsSideListRecords

<?php foreach ($article_postsSideListRecords as $record): ?>

<?php foreach ($record['images'] as $index => $upload): ?>
  <img src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="">
<?php endforeach ?>

<?php endforeach ?>

By gkornbluth - September 23, 2020 - edited: September 23, 2020

Thanks Kenny,

neither did I...

Pretty elegant.

I love this forum!

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By gkornbluth - September 23, 2020

Hey Tim,

Let us know if this works, and I'll add a new recipe to the Cookbook.

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By CommonSenseDesign - September 23, 2020

Thank you so much for such a detailed response, Kenny. I'll give this a shot in the morning, and I'll let you know how it goes.

By CommonSenseDesign - September 24, 2020

Hi, Kenny.

Your solution worked perfectly! http://wilmotpost.ca/demo/index.php

Thanks so much for taking the time to come up with this, and - crucially - make it easy enough for me to understand!

Cheers.