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)
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 -->
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
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 ?>Thats cool - I haven't seen "offset" previously. Thanks!
Tim (toledoh.com.au)
By gkornbluth - September 23, 2020 - edited: September 23, 2020
Thanks Kenny,
neither did I...
Pretty elegant.
I love this forum!
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Hey Tim,
Let us know if this works, and I'll add a new recipe to the Cookbook.
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
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.
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.