Float thumbnail images with custom pagelist template

So my client would like her site’s pagelist blocks displaying news-type pages to display the thumbnails with the title and description wrapped around the thumbnail (the descriptions can be long and are not truncated). I have created a custom template with a float:left custom css file in application/… but having some trouble reorganising the view.php so it displays correctly, presumably as one div.

How would I redo this code (I removed unneeded parts like Date) so it would just be the thumbnail floated left with title and text wrapped around - does it need a new div class? I did try reorganising but it doesn’t seem to float the image.

 <div class="<?php echo $entryClasses ?>">


                    <?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) ?><br /><br /></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
            } ?>
        </div><!-- end .ccm-block-page-list-pages -->


Try something like this

<?php
defined('C5_EXECUTE') or die('Access Denied');
use Concrete\Core\File\Image\Thumbnail\Type\Type;

/** @var array $pages */
?>
<div class="ccm-block-page-list-pages news-list">
  <?php foreach ($pages as $page):
    $title       = h($page->getCollectionName());
    $url         = $page->getCollectionLink();
    $target      = h($page->getAttribute('nav_target') ?: '_self');
    // Use the controller-provided description if available, otherwise the page description:
    $description = $page->getCollectionDescription();

    $thumb       = $page->getAttribute('thumbnail');
    $thumbSrc    = '';
    if ($thumb) {
      // Use your preferred thumbnail type handle here:
      $type = Type::getByHandle('blog_list') ?: Type::getDefault();
      $thumbSrc = $thumb->getThumbnailURL($type->getBaseVersion());
    }
  ?>
    <article class="news-item">
      <?php if ($thumbSrc): ?>
        <a class="news-thumb" href="<?= $url ?>" aria-hidden="true" tabindex="-1">
          <img src="<?= $thumbSrc ?>" alt="<?= $title ?>">
        </a>
      <?php endif; ?>

      <h3 class="news-title">
        <a href="<?= $url ?>" target="<?= $target ?>"><?= $title ?></a>
      </h3>

      <div class="news-desc">
        <?= $description // not truncated; let it flow ?>
      </div>
    </article>
  <?php endforeach; ?>
</div>

With this css

/* Ensure the entry itself is a normal block-level box (not flex/grid) */
.news-item {
  display: block !important;     /* in case the theme sets flex/grid */
  overflow: hidden;              /* clearfix so the container wraps the float */
  margin: 0 0 1.25rem;
}

/* Float the thumb so text wraps to the right */
.news-thumb {
  float: left;
  margin: 0 1rem .5rem 0;        /* space around the image */
  max-width: 35ch;               /* optional: limit how wide the image can be */
  display: block;
}

/* Control image size as needed */
.news-thumb img {
  display: block;
  width: 220px;                  /* pick a size that suits your layout */
  height: auto;
}

/* Tidy headings and copy */
.news-title { margin: 0 0 .35rem; line-height: 1.2; }
.news-desc  { margin: 0; }
.news-desc p:first-child { margin-top: 0; }

Thanks, I’ll try to work this out. I don’t have any PHP experience.

Thanks for this Tim. Very nice. One issue I had. In my ‘stock’ system, ‘blog_list’ is actually ’ ‘blog_entry_thumbnail’ and that triggered Type::getDefault() but that function doesn’t exist.

Great thank you both. I added the Page List Title back at the top. This template would be a great to have out-of-the-box.

Good spot

<?php
defined('C5_EXECUTE') or die('Access Denied');
use Concrete\Core\File\Image\Thumbnail\Type\Type;

/** @var array $pages */
?>
<div class="ccm-block-page-list-pages news-list">
  <?php foreach ($pages as $page):
    $title       = h($page->getCollectionName());
    $url         = $page->getCollectionLink();
    $target      = h($page->getAttribute('nav_target') ?: '_self');
    $description = $page->getCollectionDescription();

    $thumb       = $page->getAttribute('thumbnail');
    $thumbSrc    = '';
    $thumb2x     = '';

    if ($thumb) {
        $type = Type::getByHandle('blog_entry_thumbnail');
        if (!$type) {
            // Safe known fallback type (adjust if you prefer)
            $type = Type::getByHandle('file_manager_listing');
        }
        if ($type) {
            $thumbSrc = $thumb->getThumbnailURL($type->getBaseVersion());
            $thumb2x  = $thumb->getThumbnailURL($type->getDoubledVersion());
        }
    }
  ?>
    <article class="news-item">
      <?php if ($thumbSrc): ?>
        <a class="news-thumb" href="<?= $url ?>" aria-hidden="true" tabindex="-1">
          <img src="<?= $thumbSrc ?>" <?= $thumb2x ? 'srcset="'.h($thumbSrc).' 1x, '.h($thumb2x).' 2x"' : '' ?> alt="<?= $title ?>">
        </a>
      <?php endif; ?>

      <h3 class="news-title">
        <a href="<?= $url ?>" target="<?= $target ?>"><?= $title ?></a>
      </h3>

      <div class="news-desc">
        <?= $description ?>
      </div>
    </article>
  <?php endforeach; ?>
</div>

I didn’t test this for fallback issues

1 Like

Is it possible to disable the vertical cropping of some thumbnails? I’m not sure if it’s using some different Concrete thumbnail method.

If you go in there on your site.

/index.php/dashboard/system/files/thumbnails

you can see that each thumbnail has a sizing property. You can set your own up on here or just use one that has “Proportional” over “Exact.”

in the code

 $type = Type::getByHandle('blog_entry_thumbnail');

Can be set to any handle so if you make your own thumbnail type switch it. Just remember you will bee to rescan all the images you want to use.

1 Like