Forum

Thread tagged as: Question, Blog

Post Title within Global Header Template

I'm using a global header throughout my site in which the user can set a background image, title, and sub-title. I want to add a similar global header to the blog section, but in place of the user added title, the title of the blog post is added. I need something along the lines of the following, but obviously this doesn't work. Any ideas about how to resolve this?

<!-- BEGIN GLOBAL HEADER -->
<section class="global-header" style="background:url(<perch:content id="image" type="image" label="Background Image" />);background-repeat: no-repeat;background-size: cover;padding: 10em 0em 8em 0em;">  <!-- BACKGROUND IMAGE -->
  <div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
          <div class="text-center sm-p-t-30">
            <h1 class="text-white semi-bold"><?php perch_blog_post_field(perch_get('s'), 'postTitle'); ?></h1> <!-- MAIN TITLE -->
          </div>
        </div>
      </div>
    </div>
</section>
<!-- END GLOBAL HEADER -->
Danny Turley

Danny Turley 0 points

  • 4 years ago

Following on from this, can I have inline CSS, editable by the user (for background images), in a Perch Layout file?

<section class="global-header" style="background:url(<perch:content id="image" type="image" label="Background Image" />);background-repeat: no-repeat;background-size: cover;padding: 10em 0em 8em 0em;"><!-- BACKGROUND IMAGE -->
Drew McLellan

Drew McLellan 2638 points
Perch Support

You can use both regions and page attributes in a layout, yes.

Seeing the post title, but seeing this in the browser: https://cl.ly/0A1P1i3r1w2O

Having the following in post.php:

<?php perch_layout('case.study.header'); ?>

And this in my layout file:

<!-- BEGIN GLOBAL HEADER -->
<section class="global-header" style="background:url(<perch:content id="image" type="image" label="Background Image" />);background-repeat: no-repeat;background-size: cover;padding: 10em 0em 8em 0em;">  <!-- BACKGROUND IMAGE -->
  <div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
          <div class="text-center sm-p-t-30">
            <h1 class="text-white semi-bold">
                <?php perch_blog_post_field(perch_get('s'), 'postTitle'); ?>
            </h1> <!-- MAIN TITLE -->
            <h2 class="text-white semi-bold"><perch:content id="sub-title" type="text" label="Sub Title" /></h2> <!-- SUB TITLE -->
            <div class="global_header--links m-t-20">
              <perch:repeater id="links" max="3" label="Global header links">
              <a class="fs-16 text-white bold m-r-10 m-l-10" type="button" href="<perch:content type="text" id="global-header-links" label="Global header link (URL)" />"><perch:content id="read-more-btn" type="text" label="Link text" /></a>
              </perch:repeater>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END CONTENT -->
</section>
<!-- END GLOBAL HEADER -->
Drew McLellan

Drew McLellan 2638 points
Perch Support

You've got template code in your layout. Layouts act as part of the page. They can contain regions, but not template code.

Drew, I understand, I just want to make sure what I'm trying to achieve is possible. Maybe you could shed some light?

I have a global header in the post.php page of my blog. My goal is to allow users to add a different background image to the header in each blog post.

I have this working in other pages, but I understand the blog sections work slightly differently.

Drew McLellan

Drew McLellan 2638 points
Perch Support

If it's per blog post, then you'd need to add the field as part of the post and use perch_blog_post_field() to retrieve it.

Drew, I have this somewhat working now. The postTitle is loading in for each post, but the background image is only working on 1 post. I'm calling for the image associated with the blog post and trying to load it in as a background image using <?php perch_blog_post_field($post_slug, 'image'); ?>:

    <!-- BEGIN CASE STUDY HEADER -->
    <section class="global-header" style="background:url(<?php perch_blog_post_field($post_slug, 'image'); ?>);background-repeat: no-repeat;background-size: cover;padding: 10em 0em 8em 0em;">  <!-- BACKGROUND IMAGE -->
      <div class="container">
        <div class="row">
        <perch:blog id="image" type="image" crop="true" />
            <div class="col-sm-10 col-sm-offset-1">
              <div class="text-center sm-p-t-30">
                <h1 style="max-width: 15em;margin: 0 auto;" class="text-white semi-bold">
                <?php perch_blog_post_field($post_slug, 'postTitle'); ?>
                </h1> <!-- MAIN TITLE -->
              </div>
            </div>
          </div>
        </div>
    </section>
    <!-- END CASE STUDY HEADER -->

I see the issue, the URL is trying to return some extra information about width and height in the file name. How can I avoid this?: https://cl.ly/283j40181d0o

Drew McLellan

Drew McLellan 2638 points
Perch Support

That looks correct - do you not have the image of that size?