Developing (v7+)

How to wrap page list code in DIV's every 4 items? PHP Question

Permalink 1 user found helpful May 10, 2012 at 4:57 PM

More of a PHP question I suppose but before I hop over to stackoverflow...

I'm hacking the Thumbview Template add-on view.php.

At the moment, the markup it generates is like this:

<div class="coda-slider">
   <div class="panel-wrapper">
      <div class="content_block">
         <a href=""><img class="ccm-output-thumbnail" alt="" src="" width="100" height="67" /></a>
         <h2><a href="">Thing</a></h2>
         <p></p>
      </div>
   </div>
        <div class="panel-wrapper">
      <div class="content_block">
         <a href=""><img class="ccm-output-thumbnail" alt="" src="" width="100" height="67" /></a>
         <h2><a href="">Thing</a></h2>
         <p></p>
      </div>
   </div>

Viewing 15 lines of 37 lines. View entire code block.

 
<div class="coda-slider">
   <div class="panel-wrapper">
      <div class="content_block">
         <a href=""><img class="ccm-output-thumbnail" alt="" src="" width="100" height="67" /></a>
         <h2><a href="">Thing</a></h2>
         <p></p>
      </div>
   </div>
        <div class="panel-wrapper">
      <div class="content_block">
         <a href=""><img class="ccm-output-thumbnail" alt="" src="" width="100" height="67" /></a>
         <h2><a href="">Thing</a></h2>
         <p></p>
      </div>
   </div>
   <div class="panel-wrapper">
      <div class="content_block">
         <a href=""><img class="ccm-output-thumbnail" alt="" src="" width="100" height="67" /></a>
         <h2><a href="">Thing</a></h2>
         <p></p>
      </div>
   </div>
        <div class="panel-wrapper">
      <div class="content_block">
         <a href=""><img class="ccm-output-thumbnail" alt="" src="" width="100" height="67" /></a>
         <h2><a href="">Thing</a></h2>
         <p></p>
      </div>
   </div>
        <div class="panel-wrapper">
      <div class="content_block">
         <a href=""><img class="ccm-output-thumbnail" alt="" src="" width="100" height="67" /></a>
         <h2><a href="">Thing</a></h2>
         <p></p>
      </div>
   </div>
</div>

However, I want to wrap every four <div class="panel-wrapper"> div's inside another div called '<div class="panel">'

How can I amend my view.php to achieve that? Copy paste example great but an explanation of what is done would be even better!

<?php
   if (count($cArray) > 0) { ?>
                  <div class="coda-slider">
   <?php 
   for ($i = 0; $i < count($cArray); $i++ ) {
      $cobj = $cArray[$i]; 
      $title = $cobj->getCollectionName();
      $link = $nh->getLinkToCollection($cobj); ?>   
                     <div class="panel-wrapper">
                        <div class="content_block">
                        <?php 
                        $pt = $cobj->getCollectionAttributeValue('page_thumbnail');
                        if($pt){
                           echo("<a href=\"$link\">");
                           $imgHelper->outputThumbnail($pt, 100,100, $title);

Viewing 15 lines of 32 lines. View entire code block.

 
<?php
   if (count($cArray) > 0) { ?>
 
                  <div class="coda-slider">
   <?php 
   for ($i = 0; $i < count($cArray); $i++ ) {
      $cobj = $cArray[$i]; 
      $title = $cobj->getCollectionName();
      $link = $nh->getLinkToCollection($cobj); ?>   
                     <div class="panel-wrapper">
                        <div class="content_block">
                        <?php 
 
                        $pt = $cobj->getCollectionAttributeValue('page_thumbnail');
                        if($pt){
                           echo("<a href=\"$link\">");
                           $imgHelper->outputThumbnail($pt, 100,100, $title);
                           echo("</a>");
                        }
                        ?>
                        <h2><a href="<?php  echo $link?>"><?php  echo $title?></a></h2>
                        <p>
      <?php 
      if(!$controller->truncateSummaries){
         echo $cobj->getCollectionDescription();
      }else{
         echo $textHelper->shorten($cobj->getCollectionDescription(),$controller->truncateChars);
      }
      ?>
                        </p>
 
                  </div>
                     </div><!-- end of panel-wrapper -->
 
<?php   } ?>   
                     </div><!-- end of slider-->

Thanks for any help...

glockops replied on May 10, 2012 at 8:45 pm Permalink Best Answer Reply

You'll want to use the PHP mod function (%), but it's trickier than that, because you also need to start the wrapper for the first page and close it for the last (even if it only has 1 or 2 total pages in it).

Now tested code, so this *should* work.

<?php 
for ($i = 0; $i < count($cArray); $i++ ) {
   $cobj = $cArray[$i]; 
   $title = $cobj->getCollectionName();
   $link = $nh->getLinkToCollection($cobj); 
   $pt = $cobj->getCollectionAttributeValue('page_thumbnail');
   // Output a div around the wrapper for every 4th page
   if(!($i % 4)) {
      echo '<div class="panel">';
   }
   ?>   
    <div class="panel-wrapper">
        <div class="content_block">
        <?php 
        if($pt){

Viewing 15 lines of 38 lines. View entire code block.

 
<?php 
for ($i = 0; $i < count($cArray); $i++ ) {
   $cobj = $cArray[$i]; 
   $title = $cobj->getCollectionName();
   $link = $nh->getLinkToCollection($cobj); 
   $pt = $cobj->getCollectionAttributeValue('page_thumbnail');
 
   // Output a div around the wrapper for every 4th page
   if(!($i % 4)) {
      echo '<div class="panel">';
   }
   ?>   
    <div class="panel-wrapper">
        <div class="content_block">
        <?php 
        if($pt){
            echo("<a href=\"$link\">");
            $imgHelper->outputThumbnail($pt, 100,100, $title);
            echo("</a>");
        }
        ?>
        <h2><a href="<?php  echo $link?>"><?php  echo $title?></a></h2>
        <p>
        <?php 
        if(!$controller->truncateSummaries){
            echo $cobj->getCollectionDescription();
        }else{
            echo $textHelper->shorten($cobj->getCollectionDescription(),$controller->truncateChars);
        }
        ?>
        </p>
 
        </div><!-- End content_block -->
   </div><!-- end of panel-wrapper -->
 
    <?php // Output ending div for every forth page
   if(!(($i+1)%4) || $i+1 == count($cArray)) {
      echo '</div><!-- End panel -->';
   }
   ?>
<?php   } ?>

Further explanation

<?php
// Output a div around the wrapper for every 4th page
   if(!($i % 4)) {
      echo '<div class="panel">';
   }
   ?>

Here we are going to display the panel div if this is the first loop through the forloop or if the page number is evenly divisible by 4 (as in 4/4 has no remainder and gets the div, where 5/4 has a remainder of 1 and doesn't get the div) On the first loop this is asking what is the remainder of 0/4, the answer is 0 (which means false) So the ! in front of it says if this statement is NOT true (if mod says 0) then display the div.

<?php // Output ending div for every forth page
   if(!(($i+1)%4) || $i+1 == count($cArray)) {
      echo '</div><!-- End panel -->';
   }
   ?>

Here we're closing the div if this page is the fourth in a series ($i+1 - again we're counting from zero, where $i= 3 is the fourth page). Also we're checking to see if this is the last item being displayed. So if you're display a total of 10 items, you'll have two panels with 4 pages each and one panel with 2.

Hope the helps - and works :P

glockops replied on May 10, 2012 at 8:47 pm Permalink Reply

Fixed previous code typos.

benfrainuk replied on May 11, 2012 at 3:35 am Permalink Reply

Hi glockops, thanks very much for taking the time here to explain that. I'm going to give it a whirl shortly but more importantly go through your explanation in the hope I can understand it for next time.

Thanks again, Ben

benfrainuk replied on May 11, 2012 at 11:07 am Permalink Reply

Just done a quick test and works perfect. Will have a closer look this evening to see how it's doing it's thing!

Thanks again - Ben

JonRimmer replied on Jul 13, 2019 at 12:45 pm Permalink Reply

Hi There
I wonder if you could point me in the right direction. I want do a similar thing. I want to wrap every 2 pages in two divs.
<div class=""><div class="grid-x grid-padding-x">

<?php if (is_object($thumbnail)) {
                          ?>
                          <div class="cell large-6 medium-6">
                            <a href="<?php echo h($url) ?>"
                               target="<?php echo h($target) ?>">
                              <?php
                              $img = Core::make('html/image', array($thumbnail));
                              $tag = $img->getTag();
                              $tag->addClass('img-responsive');
                              echo $tag; ?> </a>
                          <?php
                      } ?>
                      <?php if ($includeEntryText) {
                          ?>
                          <div class="single_project_text">

Viewing 15 lines of 50 lines. View entire code block.

 
<?php if (is_object($thumbnail)) {
                          ?>
                          <div class="cell large-6 medium-6">
                            <a href="<?php echo h($url) ?>"
                               target="<?php echo h($target) ?>">
                              <?php
                              $img = Core::make('html/image', array($thumbnail));
                              $tag = $img->getTag();
                              $tag->addClass('img-responsive');
                              echo $tag; ?> </a>
                          <?php
                      } ?>
 
                      <?php if ($includeEntryText) {
                          ?>
                          <div class="single_project_text">
 
                            <?php if (isset($includeName) && $includeName) {
                                ?>
 
                                    <?php if (isset($useButtonForLink) && $useButtonForLink) {
                                        ?>
                                        <a class="admin_name" href="<?php echo h($url) ?>"
                                           target="<?php echo h($target) ?>"><?php echo h($title); ?></a>
                                        <?php
 
                                    } else {
                                        ?>
                                        <a class="admin_name" href="<?php echo h($url) ?>"
                                           target="<?php echo h($target) ?>"><?php echo h($title) ?></a>
                                        <?php
 
                                    } ?>
 
                                <?php
                            } ?>
 
                            <?php if (isset($includeDate) && $includeDate) {
                                ?>
                                <span><?php echo h($date) ?></span>
                                <?php
                            } ?>
 
 
                              <?php if (isset($includeDescription) && $includeDescription) {
                                  ?>
                                  <p><?php echo h($description) ?></p>
                                  <?php
                              } ?>
 
                              <?php if (isset($useButtonForLink) && $useButtonForLink) {
                                  ?>
                                      <a href="<?php echo h($url) ?>" target="<?php echo h($target) ?>"
                                         class="<?php echo h($buttonClasses) ?> button_1"><?php echo h($buttonLinkText) ?> <span> </a>
                                  <?php
                              } ?>
 
                          </div>
                          <?php
                      } ?>
                    </div><!-- cell End -->

</div></div>

Hope you can help
Thanks

JonRimmer replied on Jul 14, 2019 at 11:23 am Permalink Reply

I have managed to get it to wrap every 2 pages but for some reason it seems to be repeating the page list 6 times. Any help would be appreciated.

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$c = Page::getCurrentPage();
/** @var \Concrete\Core\Utility\Service\Text $th */
$th = Core::make('helper/text');
/** @var \Concrete\Core\Localization\Service\Date $dh */
$dh = Core::make('helper/date');
if ($c->isEditMode() && $controller->isBlockEmpty()) {
    ?>
    <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Page List Block.') ?></div>
    <?php
} else {
    ?>
    <div class="ccm-block-page-list-wrapper">
        <?php if (isset($pageListTitle) && $pageListTitle) {

Viewing 15 lines of 182 lines. View entire code block.

 
<?php
defined('C5_EXECUTE') or die("Access Denied.");
 
$c = Page::getCurrentPage();
 
/** @var \Concrete\Core\Utility\Service\Text $th */
$th = Core::make('helper/text');
/** @var \Concrete\Core\Localization\Service\Date $dh */
$dh = Core::make('helper/date');
 
if ($c->isEditMode() && $controller->isBlockEmpty()) {
    ?>
    <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Page List Block.') ?></div>
    <?php
} else {
    ?>
 
    <div class="ccm-block-page-list-wrapper">
 
        <?php if (isset($pageListTitle) && $pageListTitle) {
            ?>
            <div class="ccm-block-page-list-header">
                <h5><?php echo h($pageListTitle) ?></h5>
            </div>
            <?php
        } ?>
 
        <?php if (isset($rssUrl) && $rssUrl) {
            ?>
            <a href="<?php echo $rssUrl ?>" target="_blank" class="ccm-block-page-list-rss-feed">
                <i class="fa fa-rss"></i>
            </a>
            <?php
        } ?>
 
        <div class="ccm-block-page-list-pages">
 
            <?php
 
            $includeEntryText = false;
            if (
                (isset($includeName) && $includeName)
                ||
                (isset($includeDescription) && $includeDescription)
                ||
                (isset($useButtonForLink) && $useButtonForLink)
            ) {
                $includeEntryText = true;
            }
 
            foreach ($pages as $page) {
 
                // Prepare data for each page being listed...
                $buttonClasses = 'ccm-block-page-list-read-more';
                $entryClasses = 'ccm-block-page-list-page-entry';
                $title = $page->getCollectionName();
                if ($page->getCollectionPointerExternalLink() != '') {
                    $url = $page->getCollectionPointerExternalLink();
                    if ($page->openCollectionPointerExternalLinkInNewWindow()) {
                        $target = '_blank';
                    }
                } else {
                    $url = $page->getCollectionLink();
                    $target = $page->getAttribute('nav_target');
                }
                $target = empty($target) ? '_self' : $target;
                $description = $page->getCollectionDescription();
                $description = $controller->truncateSummaries ? $th->wordSafeShortText($description, $controller->truncateChars) : $description;
                $thumbnail = false;
                if ($displayThumbnail) {
                    $thumbnail = $page->getAttribute('thumbnail');
                }
                if (is_object($thumbnail) && $includeEntryText) {
                    $entryClasses = 'col-md-6';
                }
 
                $date = $dh->formatDateTime($page->getCollectionDatePublic(), true);
 
                //Other useful page data...
 
                //$last_edited_by = $page->getVersionObject()->getVersionAuthorUserName();
 
                /* DISPLAY PAGE OWNER NAME
                 * $page_owner = UserInfo::getByID($page->getCollectionUserID());
                 * if (is_object($page_owner)) {
                 *     echo $page_owner->getUserDisplayName();
                 * }
                 */
 
                /* CUSTOM ATTRIBUTE EXAMPLES:
                 * $example_value = $page->getAttribute('example_attribute_handle', 'display');
                 *
                 * When you need the raw attribute value or object:
                 * $example_value = $page->getAttribute('example_attribute_handle');
                 */
 
                /* End data preparation. */
 
                /* The HTML from here through "endforeach" is repeated for every item in the list... */ ?>
 
                <?php
                for ($i = 0; $i < count($pages); $i++ ) {
                   $page = $pages[$i];
                   $buttonClasses = 'ccm-block-page-list-read-more';
                   $entryClasses = 'ccm-block-page-list-page-entry';
                   $title = $page->getCollectionName();
                   if ($page->getCollectionPointerExternalLink() != '') {
                       $url = $page->getCollectionPointerExternalLink();
                       if ($page->openCollectionPointerExternalLinkInNewWindow()) {
                           $target = '_blank';
                       }
                   } else {
                       $url = $page->getCollectionLink();
                       $target = $page->getAttribute('nav_target');
                   }
                   $target = empty($target) ? '_self' : $target;
                   $description = $page->getCollectionDescription();
                   $description = $controller->truncateSummaries ? $th->wordSafeShortText($description, $controller->truncateChars) : $description;
                   $thumbnail = false;
                   if ($displayThumbnail) {
                       $thumbnail = $page->getAttribute('thumbnail');
                   }
                   if (is_object($thumbnail) && $includeEntryText) {
                       $entryClasses = 'col-md-6';
                   }
 
                   $date = $dh->formatDateTime($page->getCollectionDatePublic(), true);
 
                   // Output a div around the wrapper for every 4th page
                   if(!($i % 2)) {
                      echo '<div class="row"><div style="background-color:red;border: solid 2px #000; margin-bottom:20px;" class="col-md-12">';
                   }
                   ?>
              <div class="<?php echo $entryClasses ?> item-wrapper">
 
                    <?php if (is_object($thumbnail)) {
                        ?>
                        <div style="margin:10px;" class="ccm-block-page-list-page-entry-thumbnail">
                            <?php
                            $img = Core::make('html/image', array($thumbnail));
                            $tag = $img->getTag();
                            $tag->addClass('img-responsive');
                            echo $tag; ?>
                        </div>
                        <?php
                    } ?>
 
                    <?php if ($includeEntryText) {
                        ?>
                        <div class="ccm-block-page-list-page-entry-text">
 
                            <?php if (isset($includeName) && $includeName) {
                                ?>
                                <div class="ccm-block-page-list-title">
                                    <?php if (isset($useButtonForLink) && $useButtonForLink) {
                                        ?>
                                        <?php echo h($title); ?>
                                        <?php
 
                                    } else {
                                        ?>
                                        <a href="<?php echo h($url) ?>"
                                           target="<?php echo h($target) ?>"><?php echo h($title) ?></a>
                                        <?php
 
                                    } ?>
                                </div>
                                <?php
                            } ?>
 
                            <?php if (isset($includeDate) && $includeDate) {
                                ?>
                                <div class="ccm-block-page-list-date"><?php echo h($date) ?></div>
                                <?php
                            } ?>
 
                            <?php if (isset($includeDescription) && $includeDescription) {
                                ?>
                                <div class="ccm-block-page-list-description"><?php echo h($description) ?></div>
                                <?php
                            } ?>
 
                            <?php if (isset($useButtonForLink) && $useButtonForLink) {
                                ?>
                                <div class="ccm-block-page-list-page-entry-read-more">
                                    <a href="<?php echo h($url) ?>" target="<?php echo h($target) ?>"
                                       class="<?php echo h($buttonClasses) ?>"><?php echo h($buttonLinkText) ?></a>
                                </div>
                                <?php
                            } ?>
 
                        </div>
                        <?php
                    } ?>
                </div>
                <?php // Output ending div for every forth page
               if (!(($i+1)%2) || $i+1 == count($pages)) {
                  echo '</div></div><!-- End panel -->';
                 } ?>
               <?php   } ?>
 
                <?php
            } ?>
        </div><!-- end .ccm-block-page-list-pages -->
 
        <?php if (count($pages) == 0) { ?>
            <div class="ccm-block-page-list-no-pages"><?php echo h($noResultsMessage) ?></div>
        <?php } ?>
 
    </div><!-- end .ccm-block-page-list-wrapper -->
 
 
    <?php if ($showPagination) { ?>
        <?php echo $pagination; ?>
    <?php } ?>
 
    <?php
 
} ?>

Forums

Developing (v7+)

How to wrap page list code in DIV's every 4 items? PHP Question

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?