How This Site is Built

AKA Why I love ProcessWire

The nerdspecs.com site itself is my favorite website I've ever built. 

Why? 

Because it is a showcase on the backend of how planning and forethought create a DRY and elegant application. 

Let's take a look.

partials

Auto-loading partials in ProcessWire makes my templates extremely simple. Here's how I did it.

First, I created a head.inc and foot.inc file. I used .inc extensions for the partials because ProcessWire automatically finds .php files and asks if I want to hook it into the CMS as a template.

Then, I opened config.php and added these two lines of code at the bottom.

//prepend append template files
$config->prependTemplateFile = 'head.inc';
$config->appendTemplateFile = 'foot.inc'

template files

Then I put on my thinking cap regarding the type of content my web application would handle.

At first, I created a template for each of them. Then, I realized that was not very DRY. I wasn't looking for a complicated, over-styled website. But rather, a simple, elegant, high-ranking, and accessible application. 

So I opted for the following templates

That's it. Really. 

single-page.php

<?php foreach ($page->section as $section): ?>
  <?php if ($section->image): ?>
    <?php if ($section->image->width < 1920): ?>
      <section>
        <a title="view full size <?= $section->image->description ?>" href="<?= $section->image->url ?>">
          <img style="display:block;margin:0 auto;max-height:40vh;" src="<?= $section->image->url ?>">
        </a>
      </section>
    <?php else: ?>
      <section style="padding:0;background-color:white;">
        <img src="<?= $section->image->width(1920, array('upscaling' => false))->url ?>">
      </section>
    <?php endif; ?>
  <?php else: ?>
    <section>
      <?= $section->richText ?>
    </section>
  <?php endif; ?>
<?php endforeach; ?>

list-page.php

<?php foreach ($page->children as $single_page): ?>
  <section>
    <h2><a class="single-page-link" href="<?= $single_page->url ?>"><?= $single_page->title ?></a></h2>
  </section>
<?php endforeach; ?>

sections

As you can see, all I really did was look through sections and output the content.

There is a an if/else statement that treats rich text and images differently.

I think sections are the way people process information visually. It's why WordPress themes like Divy are so popular. So, that's all that this website offers.

images

I was able to take advantage of ProcessWire's easy-to-use API to deal with images. 

First, I have a string with some image styling which will center a smaller image.

<?php $image_style = "style='width:auto;max-width:100%;display:block;margin:0 auto;'"; ?>

Second, if the image is less than 1920px, I will add that styling to the img tag. Otherwise, I will resize that image to 1920px and display it. 

<img <?= $section->img->width < 1920 ? $image_style : "" ?> alt="<?= $section->img->description ?>" title="<?= $section->img->description ?>" src="<?= $section->image->width(1920)->url ?>">