==
function onStart()
{
    // This render is cached, so we cannot add to the graph
    // We will print our schema separately and reference the graph

    // Skip in the backend (plugin renders the partials to grab content for search but there is no frontend controller)
    if (app()->runningInBackend()) return;

    $seo = \App::make('dynamedia.posts.seo');
    $seo->loadProperties($this->controller);

    $templateData = $this['template'];

    $recipe = \Spatie\SchemaOrg\Schema::recipe()
        ->setProperty('mainEntityOfPage', ["@id" => $seo->getSchemaArticleId()])
        ->setProperty('isPartOf', ["@id" => $seo->getSchemaArticleId()])
        ->setProperty('author', ["@id" => $seo->getSchemaAuthorId()])
        ->name($this['post']->title)
        ->description(strip_tags($this['post']->excerpt))
        ->datePublished($this['post']->published_at)
        // You can do this better ;-)
        ->prepTime("PT" . $templateData['prep_time_hours'] . "H" . $templateData['prep_time_minutes'] . "M")
        ->cookTime("PT" . $templateData['cook_time_hours'] . "H" . $templateData['cook_time_minutes'] . "M")
        ->totalTime("PT" . $templateData['total_time_hours'] . "H" . $templateData['total_time_minutes'] . "M")
        ->recipeCategory($templateData['category'])
        ->recipeCuisine($templateData['cuisine'])
        ->recipeYield($templateData['servings']);

    // Create and add the ingredients
    if (!empty($templateData['ingredients_form']['ingredients'])) {
        $ingredients = [];
        foreach ($templateData['ingredients_form']['ingredients'] as $item) {
            $ingredients[] = "{$item['amount']} {$item['name']}";
        }
        $recipe->recipeIngredient($ingredients);
    }

    // at least one image is required
    $imageArray = [];
    if (!empty($this['post']->images['banner']['default'])) {
        $imageObject = Spatie\SchemaOrg\Schema::imageObject()
            ->url(\Cms\Classes\MediaLibrary::url($this['post']->images['banner']['default']));
        $imageArray[] = $imageObject;
    }
    $recipe->image($imageArray);

    // Generate the howto
    if (!empty($templateData['method_steps'])) {
        $instructions = [];
        $i = 0;
        foreach ($templateData['method_steps'] as $step) {
            $i++;
            $howToStep = \Spatie\SchemaOrg\Schema::howToStep()
                ->name($step['step_title'])
                ->text($step['step_detail'])
                ->url($this['post']->url . "#step{$i}");
            if ($step['step_image']) {
                $stepImage = \Spatie\SchemaOrg\Schema::imageObject()
                    ->url(\Cms\Classes\MediaLibrary::url($step['step_image']));
                $howToStep->image($stepImage);
            }
            $instructions[] = $howToStep;
        }
        $recipe->recipeInstructions($instructions);
    }

    $this['schema_script'] = $recipe->toScript();
}
==
{# Feel free to include other partials to build modular templates #}
{# Translation keys are used heavily to make post translation very simple #}
{# Inline styles here but you'll probably just incorporate this into your layout css
   - Our demo theme always provides bootstrap 4 so we can rely on those styles here
#}

{{ schema_script | raw }}

<style>
.ingredients {
    margin-top: 10px;
    background-color: #fafafa;
}
.ingredients-list li {
    padding: 2px;
}
.ingredients img {
    max-width: 90%;
    background-color: #ffffff;
    border-radius: 10px;
}

.method figure {
    display: block;
    max-width: 100%;
    padding: 10px;
    margin: 10px auto;
    text-align: center;
}
.method figure img {
    max-width: 100%;
    margin: 0 auto;
}
</style>

<div class="post-body-recipe">
    <div class="row">
    <h3 class="col-12 my-2">{{ 'postbody_template.recipe.title.ingredients' | _ }}</h3>
    </div>
    <div class="ingredients row py-2">
            <ul class="ingredients-list list-unstyled col-12 col-md-6">
            {% for item in template.ingredients_form.ingredients %}
                <li>{{ item.name }} - {{ item.amount }}</li>
            {% endfor %}
            </ul>

            {% if template.ingredients_form.ingredients_image %}
                <div class="col-12 col-md-6 text-center">
                    <img class="p-3" src="{{ template.ingredients_form.ingredients_image | media }}">
                </div>
            {% endif %}
    </div>

    <div class="row">
        <div class="col-12">
            <h3 class="my-2">{{ 'postbody_template.recipe.title.method' | _ }}</h3>

            {{ template.method_intro | raw }}
            <div class="method">
            {% for item in template.method_steps %}
                <div class="method-step" id="step{{ loop.index }}">
                    <h5>{{ item.step_title }}</h5>
                    <p>{{ item.step_detail }}</p>
                    {% if item.step_image %}
                    <figure>
                        <img class="step-image" src="{{ item.step_image | media }}" alt="{{ item.step_title }}">
                    </figure>
                    {% endif %}
                </div>
            {% endfor %}
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-12 my-2">
            {{ template.epilogue | raw }}
        </div>
    </div>

</div>
