Recipe Cards: Multiple Features

Recipe Cards

This example demonstrates loops, isset conditionals, piped functions, and dynamic placeholders all in one template.

<?php

# require the templating library
require '../vendors/ViewFish/viewfish.php';

# instantiate a ViewFish object
$T = new ViewFish\viewfish();

# set the template path
$T->set_template_path(__DIR__.'/../templates/');

# load the recipe card template
$template = $T->load_template("demo6");

# --- Recipe 1: has a note ---
$recipe1 = [
    'title'     => 'classic pancakes',
    'chef'      => 'maria',
    'color'     => 'info',
    'prep_time' => 15,
    'serves'    => 4,
    'note'      => 'Best served with fresh berries and maple syrup!',
    'ingredients' => [
        ['qty' => '2',   'unit' => 'cups',  'item' => 'flour'],
        ['qty' => '2',   'unit' => 'large', 'item' => 'eggs'],
        ['qty' => '1.5', 'unit' => 'cups',  'item' => 'milk'],
        ['qty' => '3',   'unit' => 'tbsp',  'item' => 'melted butter'],
        ['qty' => '1',   'unit' => 'tsp',   'item' => 'vanilla extract', 'note' => 'optional'],
    ],
    'steps' => [
        ['instruction' => 'whisk dry ingredients together in a large bowl.'],
        ['instruction' => 'make a well in the center and pour in wet ingredients.'],
        ['instruction' => 'mix until smooth — don\'t overmix!'],
        ['instruction' => 'heat a griddle over medium-high heat and lightly grease.'],
        ['instruction' => 'pour batter and cook until bubbles form, then flip.'],
    ],
];

# --- Recipe 2: no note, different style ---
$recipe2 = [
    'title'     => 'spicy black bean tacos',
    'chef'      => 'carlos',
    'color'     => 'success',
    'prep_time' => 20,
    'serves'    => 6,
    'ingredients' => [
        ['qty' => '2',   'unit' => 'cans',  'item' => 'black beans', 'note' => 'drained'],
        ['qty' => '1',   'unit' => 'tsp',   'item' => 'cumin'],
        ['qty' => '1',   'unit' => 'tsp',   'item' => 'smoked paprika'],
        ['qty' => '12',  'unit' => 'small', 'item' => 'corn tortillas'],
        ['qty' => '1',   'unit' => 'cup',   'item' => 'salsa verde'],
        ['qty' => '1',   'unit' => 'whole', 'item' => 'avocado', 'note' => 'sliced'],
    ],
    'steps' => [
        ['instruction' => 'heat beans in a pan with cumin and paprika until fragrant.'],
        ['instruction' => 'mash roughly, leaving some beans whole for texture.'],
        ['instruction' => 'warm tortillas on a dry skillet for 30 seconds each side.'],
        ['instruction' => 'spoon beans onto tortillas, top with salsa and avocado.'],
    ],
];

echo "<h4>Recipe Cards</h4>";
echo "<p>This example demonstrates <b>loops</b>, <b>isset conditionals</b>, <b>piped functions</b>, and <b>dynamic placeholders</b> all in one template.</p><hr>";

# render both recipes with the same template
echo $T->render($template, $recipe1);
echo $T->render($template, $recipe2);

<div class="card mb-3">
    <div class="card-header bg-{{color}}">
        <h3>{{title|ucwords}}</h3>
        <small>By Chef {{chef|ucfirst}} &mdash; Added [[year]]</small>
    </div>
    <div class="card-body">
        <p><strong>Prep time:</strong> {{prep_time}} min | <strong>Serves:</strong> {{serves}}</p>
        {{isset $note}}<div class="alert alert-info">&#x1F4DD; {{$note}}</div>{{/isset}}
        <h5>Ingredients</h5>
        <ul>
        {{@loop data=ingredients}}
            <li>{{qty}} {{unit}} {{item|ucfirst}}{{isset $note}} <em>({{$note}})</em>{{/isset}}</li>
        {{/loop}}
        </ul>
        <h5>Steps</h5>
        <ol>
        {{@loop data=steps}}
            <li>{{instruction|ucfirst}}</li>
        {{/loop}}
        </ol>
    </div>
    <div class="card-footer text-muted">
        Generated with ViewFish Templating &mdash; ID: [[uniqid]]
    </div>
</div>