Post Title within Global Header Template

Hi Danny,

Take a look at layout variables:

https://docs.grabaperch.com/perch/pages-and-nav/layouts/layout-variables/

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 -->

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, 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, 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