We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

Forum

Thread tagged as: Problem

perch_template doesn't seem to respect the image tag "output" attribute

I have a content namespaced template that I'm outputting using perch_template() after modifying the data in PHP.

The issue I'm seeing is that image tags trying to output using the output attribute (in this case w, h,width, or height) still output the filepath. The template behaves as expected when using perch_content().

I just updated the site to Perch 3.0.14 and will include diagnostics below.

Here is the template:

<perch:before>
  <div id="masonry-container" class="photoswipe-container super-index" data-columns="3">
    <div class="gutter-sizer"></div>
</perch:before>
      <perch:content type="image" id="image" label="Image" width="1200" height="1200" suppress="true" />
      <perch:content type="albumlist" id="albumSlug" label="Album Link" title="true" suppress="true" />
      <figure>
        <perch:content id="image" type="image" output="w" />
        <a href="/<perch:content id="albumSlug" type="hidden" />#<perch:content id="albumID" type="hidden" />" data-target="all" data-id="<perch:content id="albumID" type="hidden" />" data-view-all-link="/<perch:content id="albumSlug" type="hidden" />/all">
          <img class="lazy" src="/_/img/placeholder?<perch:content id="image" type="image" width="1200" height="1200" output="width" />x<perch:content id="image" type="image" width="1200" height="1200" output="h" />"  alt="">
          <figcaption>
            <div class="wrapper">
              <div class="bd">
                <div class="model"><perch:content id="model" type="hidden" /></div>
                <div class="source"><perch:content id="client" type="hidden" /></div>
              </div>
              <div class="details"><perch:content id="imageCount" type="hidden" /> image<perch:if id="imageCount" match="neq" value="1">s</perch:if></div>
            </div>
          </figcaption>
        </a>
      </figure>
<perch:after>
  </div>
</perch:after>

Diagnostics:

Perch: 3.0.14, PHP: 5.6.32, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id: 76b08b24596e12d4553bd41fc93cccd5bac2fe7a $, with PDO
Server OS: Darwin, cgi-fcgi
Installed apps: content (3.0.14), assets (3.0.14), categories (3.0.14), perch_gallery (2.8.9), perch_members (1.4.2)
App runtimes: <?php $apps_list = array( // 'content', // 'categories', 'perch_gallery', 'perch_members', 'kirk_meta', 'kirk_admin_links', 'kirk_email_obfuscator', );
Image manipulation: GD Imagick
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 3b606135b33e6a102526838f4152a807
Resource folder writeable: Yes
Kirk Roberts

Kirk Roberts 0 points

  • 1 year ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

What data are you passing into perch_template()? It can only use what you give it.

That's interesting, because using skip-template on the region only returns a filepath for images. Is there a way to get the image width/height data for an image tag through a skip-template?

I get this back from my region when I use skip-template:

array(2) {
  [0]=>
  array(7) {
    ["_id"]=>
    string(1) "3"
    ["image"]=>
    string(27) "/admin/resources/lameka.jpg"
    ["albumSlug"]=>
    string(14) "esti-van-balen"
    ["_title"]=>
    string(14) "esti-van-balen"
    ["_page"]=>
    string(10) "/index.php"
    ["_pageID"]=>
    string(1) "3"
    ["_sortvalue"]=>
    string(4) "1000"
  }
  [1]=>
  array(7) {
    ["_id"]=>
    string(1) "4"
    ["image"]=>
    string(27) "/admin/resources/chair1.jpg"
    ["albumSlug"]=>
    string(10) "florence-k"
    ["_title"]=>
    string(10) "florence-k"
    ["_page"]=>
    string(10) "/index.php"
    ["_pageID"]=>
    string(1) "3"
    ["_sortvalue"]=>
    string(4) "1001"
  }
}

The image ID is an image fieldtype but it only returns a string of the filepath.

I mistakenly assumed I could plug that back into the template using perch_template and still output different characteristics of that image using output.

Is there something I'm missing or do I need to rearchitect my approach?

Drew McLellan

Drew McLellan 2638 points
Perch Support

What are you doing in PHP to modify the content? Could you do it with an each callback or using template filters?

I have two arrays, one from the original skip-template on the content region, and another that is a list of albums from the Gallery app. Then I merge some of the data before passing it back to the original template using perch_template. Not sure if either an each callback or template filters could do the job. Here's the actual code:

  // get data
  $images = perch_content_custom('Images', array(
    'skip-template' => true
    ));
  $albums = perch_gallery_albums(array(
    'skip-template' => true
    ));

  // make albums array by slugs
  $albumsBySlug = [];
  foreach ($albums as $album) {
    $albumsBySlug[$album['albumSlug']] = $album;
  }

  // add data to $images array
  for ($i = count($images) - 1; $i >= 0; $i--) {
    $image = $images[$i];
    $album = $albumsBySlug[$image['albumSlug']];
    $arr = array(
      'albumID' => $album['albumID'],
      'model' => $album['model'],
      'client' => $album['client'],
      'imageCount' => $album['imageCount'],
    );
    $images[$i] = array_merge($image, $arr);
  }

  // show it on the page
  perch_template('content/index_super.html', $images);
Drew McLellan

Drew McLellan 2638 points
Perch Support

I would prep the albums array, and then template the images with an each callback. use the albums array to bring it into scope of the callback.

Great, thank you! That did the trick. I ended up with this working code:

  // get data
  $albums = perch_gallery_albums(array(
    'skip-template' => true
    ));

  // make albums array by slugs
  $albumsBySlug = [];
  foreach ($albums as $album) {
    $albumsBySlug[$album['albumSlug']] = $album;
  }

  // show it on the page
  perch_content_custom('Images', array(
    'template' => 'index_super.html',
    'each'  =>  function($item) {
      global $albumsBySlug;

      $album = $albumsBySlug[$item['albumSlug']['albumSlug']];
      $arr = array(
        'albumID' => $album['albumID'],
        'model' => $album['model'],
        'client' => $album['client'],
        'imageCount' => $album['imageCount'],
      );
      $item = array_merge($item, $arr);

      return $item;
    },
  ));