Forum

Thread tagged as: Question, Problem

How to add a masthead image from 2 possible sources

The title might be somewhat confusing but it's the best I could come up with, so let me explain:

I have a template for a masthead image, because the markup is the same on regular pages and on blog pages. But the image itself isn't the same the everywhere, so I'd like to be able upload an image per blogpost and per page.

This is what I've got so far:

index.php, blog/post.php

<?php perch_content('masthead'); ?>

templates/blog/post.html

<perch:blog type="image" id="c_mastheadBlog" label="Masthead" suppress="true" required="true" order="3" />

templates/masthead.html

    <perch:if exists="c_mastheadBlog">
        Blog masthead
        <perch:else />
        Default page masthead
        <perch:content type="image" id="c_mastheadPage" label="Masthead" />
    </perch:if>

So I can add a masthead at my homepage (default) and at every blogpost right now and the default appears on the page. But how do I get the blog masthead to appear? I assume I need to put value of c_mastheadBlog into a variable in post.php so I can pass it to masthead.html, but I can't quite figure it out.
Sjoerd ter Haar

Sjoerd ter Haar 0 points

  • 4 years ago
Simon Clay

Simon Clay 127 points

4 years ago

Hi, one way would be to test for a query string in the URL, to see if it's a blog post. Something like:

<?php 
    if (perch_get('s')) {
        //it's a blog post, output the blog masthead
        perch_blog_custom(array(
            'filter' => 'postSlug',
            'match' => 'eq',
            'value' => perch_get('s'),
            'template' => 'my_blog_masthead.html',
    }
    else {
        //otherwise output page masthead
        perch_content('masthead');
    }
?>
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

The perch_content() page function displays the cached HTML that is rendered when you make edits to your content. If you have dynamic elements happening in the page that could affect the output then you need to use perch_content_custom() which is rendered dynamically.
Sjoerd ter Haar

Sjoerd ter Haar 0 points

4 years ago

Ok, after your comments I decided to worry about the conditionals later and focus on getting familiar with perch_blog_custom first.

So now I'm just trying to get the masthead to appear on the right place of the blog post, but I can't get it right.

blog/post.php

<?php
perch_blog_custom(array(
    'filter' => 'postSlug',
    'match' => 'eq',
    'value' => perch_get('s'),
    'template' => 'blog/masthead.html'
    )
);
?>

templates/blog/post.html

<perch:template path="blog/masthead.html" rescope="parent" />

templates/blog/masthead.html

<perch:blog type="image" id="c_mastheadBlog" label="Masthead"  order="3" />

The problem I'm running into now is that in post.html the perch tag <perch:template path="blog/masthead.html" rescope="parent" /> is not in the place where I want the masthead to be. But I don't understand how to add it through the blogpost section in the CMS and then show it at a different position.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I'm not clear on what you're asking.
Sjoerd ter Haar

Sjoerd ter Haar 0 points

4 years ago

Ok, rereading my last post that's understandable :) It could also be that I'm approaching this completely the wrong way.

I want to add a masthead to my blog post with the CMS, but since the masthead is in a different part of the html than the other blog post content I've added a suppress="true" attribute and now I'm trying to get the masthead in post.php so I can put in in the correct part of the html.

The image below show where the masthead appears now and the arrow points to where I want it to be. Blog post page

The complete code will probably clarify things a lot more:

post.php

The masthead template is included in this file because putting it inside post.html would mean some html tags would be opened in one file and closed in another. Right now it will include the template, but the src of the <img /> remains empty.

<?php include('../perch/runtime.php'); ?>

<?php
    $tags = perch_blog_post_tags(perch_get('s'), [], true);
    PerchSystem::set_var('tags', $tags);
?>

<?php perch_layout('/global/doc_head'); ?>

<body>

<?php perch_pages_navigation(); ?>

<?php
    perch_blog_custom(array(
        'filter' => 'postSlug',
        'match' => 'eq',
        'value' => perch_get('s'),
        'template' => 'blog/masthead.html'
        )
    );
?>

<div class="m-wrapper m-wrapper--constrain m-wrapper--soft-sides">
    <?php perch_blog_post(perch_get('s')); ?>

    <article class="m-article o-grid o-grid--modern o-grid--equal-cells o-grid--modern-vertical-small">

        <div class="o-grid__cell o-grid__cell--fixed-small small-col-1of1">
        </div><!-- END:o-grid__cell -->

        <div class="o-grid__cell small-col-1of1">
            <div class="m-article">
                <div class="m-article__body m-article__body--hard-small">
                    <div class="text-constrain">
                        <?php perch_blog_post_comment_form(perch_get('s')); ?>

                        <?php perch_blog_post_comments(perch_get('s')); ?>
                    </div>
                </div>
            </div>
        </div>
    </article>

</div>

masthead.html

Added suppress="true" because I want to add an image by creating a post but I don't want to show it there (=post.html). This probably also prevents the image to appear in this template though, but removing the attribute doesn't solve it.

<header class="m-masthead">
    <img src="<perch:content type="image" id="c_mastheadBlog" label="Masthead"  order="3" suppress="true" />" />
</header>

post.html

Added the masthead template to post.html because I want to add an image whilst creating a blog post

                <div class="text-constrain">
                    <header>
                        <h1>
                            <perch:blog id="postTitle" type="text" label="Blog Title" required="true" size="xl autowidth" order="1" />
                        </h1>
                        <perch:if exists="blogPostSubtitle">
                        <span class="subheading h3">
                            <perch:blog id="blogPostSubtitle" type="text" label="Blog Subtitle" size="xl autowidth" order="2" />
                        </span>
                        </perch:if>

                        <perch:template path="blog/masthead.html" rescope="parent" />

                    </header>
                </div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

In masthead.html:

<header class="m-masthead"> 
<img src="<perch:content type="image" id="c_mastheadBlog" />" /> 
</header>

In post.html, replace this:

 <perch:template path="blog/masthead.html" rescope="parent" />

with this:

<perch:content type="image" id="c_mastheadBlog" label="Masthead" order="3" suppress="true" />
Sjoerd ter Haar

Sjoerd ter Haar 0 points

4 years ago

Thanks! Omitting the attributes used in the CMS makes a lot of sense. Had to change perch:content to perch:blog in this instance though.