Delayed output and markup files

[combicart]

Hello!

I'm currently building my first website with Processwire. So far i'm really loving it, however i'm having a hard time wrapping my head around the delayed output in combination with separate partial files which are used for styling small parts of the website.

I've seen this approach on the blog profile of Ryan and prefer this method where most of the markup resides inside small partial files instead of echoing the html markup inside the template file.

I currently use the method below, but I'm not really sure if this is the best way to set this up. Perhaps someone uses this same setup or has a better approach? Would really love to hear your thoughts!

This is my layout for the homepage. It consists of a title, a body text and a repeater field with 'widgets'.

_main.php

<article>
  <h1><?php echo $title; ?></h1>
  <?php echo $content; ?>
</article>

home.php

function renderHomepageWidgets() {
  foreach($page->homepage_widget as $widget) {
    $page->homepage_widget;
  }
  $t = new TemplateFile(wire('config')->paths->templates . 'partials/homepage_widgets.php');
  return $t->render();
}

$content = $page->body . renderHomepageWidgets();

partials/homepage_widgets.php

<?php if(count($page->homepage_widget)) : ?>
  <div class="homepage-widgets">
    <?php foreach($page->homepage_widget as $widget) : ?>
      <div class="widget">
        <picture>
          <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source srcset="<?php echo $widget->homepage_widget_image->size(360, 200)->url; ?>, <?php echo $widget->homepage_widget_image->size(720, 400)->url; ?> 2x" media="(min-width: 1088px)" />
          <source srcset="<?php echo $widget->homepage_widget_image->size(360, 200)->url; ?>, <?php echo $widget->homepage_widget_image->size(720, 400)->url; ?> 2x" media="(min-width: 860px)" />
          <source srcset="<?php echo $widget->homepage_widget_image->size(250, 140)->url; ?>, <?php echo $widget->homepage_widget_image->size(500, 280)->url; ?> 2x" media="(min-width: 640px)" />
          <!--[if IE 9]></video><![endif]-->
          <img srcset="<?php echo $widget->homepage_widget_image->size(360, 200)->url; ?>, <?php echo $widget->homepage_widget_image->size(720, 400)->url; ?> 2x" alt="<?php echo $widget->title; ?>" />
        </picture>
        <div class="content">
          <h3><?php echo $widget->title; ?></h3>
          <?php echo $widget->body; ?>
          <a href="<?php echo $widget->homepage_widget_url->url; ?>"><?php echo $widget->title; ?></a>
        </div>
      </div>
  <?php endforeach; ?>
  </div>
<?php endif; ?>

[pwired]

This might be of your interest:

https://processwire.com/docs/tutorials/how-to-structure-your-template-files/page4

https://processwire.com/talk/topic/11199-mainphp-inflexibility/

[combicart]

Thanks, i've already read the tutorial, but will definitely take a look at the second link.

[bernhard]

Hi and welcome combicart! You can use "wirerenderfile" for that. On mobile, so please use Google. It's very easy and i use it in all my projects

[combicart]

Thanks Bernhard, wirerenderfile looks indeed like the function I was searching for!

Will definitely try it out for the website i'm currently building