Laying out 4 products when 4th product has a different CSS Class
2 posts by 2 authors in: Forums > CMS Builder
Last Post: April 18, 2012 (RSS)
By benedict - April 17, 2012
Hi guys,
I run into this problem a bit and just wanted to seek a definitive answer on the best way to lay it out.
I have 4 images I am laying out horizontally using an unordered list. What usually happens is that I have a style for the first 3 products (.product) and then a different style for the last product as the margin/padding is different (.product last).
How do I apply this in two instances:
a) using a multi-record section with a single image per record.
b) using a single record section with multiple images in an upload field.
These two snippets will save me work - I'm currently using offset, which seems a bit laborious...
Here is the original HTML:
I run into this problem a bit and just wanted to seek a definitive answer on the best way to lay it out.
I have 4 images I am laying out horizontally using an unordered list. What usually happens is that I have a style for the first 3 products (.product) and then a different style for the last product as the margin/padding is different (.product last).
How do I apply this in two instances:
a) using a multi-record section with a single image per record.
b) using a single record section with multiple images in an upload field.
These two snippets will save me work - I'm currently using offset, which seems a bit laborious...
Here is the original HTML:
<ul class="clearfix">
<li class="product">
<a href="product.html" class="thumb"><img src="images/products/product-1.jpg" alt="" /></a>
<a href="product.html" class="title">Product1</a>
<div class="clearfix info">
<a href="#" class="add-to-cart">READ MORE</a>
</div>
</li>
<li class="product">
<a href="product.html" class="thumb"><img src="images/products/product-2.jpg" alt="" /></a>
<a href="product.html" class="title">Product2</a>
<div class="clearfix info">
<a href="#" class="add-to-cart">READ MORE</a>
</div>
</li>
<li class="product">
<a href="product.html" class="thumb"><img src="images/products/product-3.jpg" alt="" /></a>
<a href="product.html" class="title">Product3</a>
<div class="clearfix info">
<a href="#" class="add-to-cart">READ MORE</a>
</div>
</li>
<li class="product last">
<a href="product.html" class="thumb"><img src="images/products/product-4.jpg" alt="" /></a>
<a href="product.html" class="title">Product4</a>
<div class="clearfix info">
<a href="#" class="add-to-cart">READ MORE</a>
</div>
</li>
</ul>Re: [benedict] Laying out 4 products when 4th product has a different CSS Class
By (Deleted User) - April 18, 2012
Hi benedict,
To add a specific class to every fourth image, count the number of times you've run the loop. If the number hits four, add the special class and reset the counter.
This first snippet is the (generalized) method for displaying multiple products with one image each:
This next snippet is for multiple images per product:
In the first case, the products are loaded via getRecords with no limit on the returned result set and in the second case you would add "'limit' => 1," to the options array for the function.
Remember, these two instances are generalized so you may need a few changes to suit your particular site/variable names etc.
Let me know if this helps,
Tom
To add a specific class to every fourth image, count the number of times you've run the loop. If the number hits four, add the special class and reset the counter.
This first snippet is the (generalized) method for displaying multiple products with one image each:
<ul class="clearfix">
<?php $counter = 0; ?>
<?php foreach ($products as $product) : ?>
<li class="product<?php if ($counter == 4 ) { $counter = 0; echo " last"; } ?>">
<a href="<?php echo $product['_link']; ?>" class="thumb"><img src="<?php echo $product['uploads'][0]['thumbUrlPath']; ?>" alt="" /></a>
<a href="<?php echo $product['_link']; ?>" class="title"><?php echo $product['name']; ?></a>
<div class="clearfix info">
<a href="#" class="add-to-cart">READ MORE</a>
</div>
</li>
<?php $counter = $counter + 1; ?>
<?php endforeach; ?>
</ul>This next snippet is for multiple images per product:
<?php $uploads = $product['uploads']; ?>
<ul class="clearfix">
<?php $counter = 0; ?>
<?php foreach ($uploads as $upload) : ?>
<li class="product<?php if ($counter == 4 ) { $counter = 0; echo " last"; } ?>">
<a href="<?php echo $product['_link']; ?>" class="thumb"><img src="<?php echo $uploads['thumbUrlPath']; ?>" alt="" /></a>
<a href="<?php echo $product['_link']; ?>" class="title"><?php echo $product['name']; ?></a>
<div class="clearfix info">
<a href="#" class="add-to-cart">READ MORE</a>
</div>
</li>
<?php $counter = $counter + 1; ?>
<?php endforeach; ?>
</ul>In the first case, the products are loaded via getRecords with no limit on the returned result set and in the second case you would add "'limit' => 1," to the options array for the function.
Remember, these two instances are generalized so you may need a few changes to suit your particular site/variable names etc.
Let me know if this helps,
Tom