Header background Image does not change in all pages from cms

Question

I'm using Couch CMS ,and i made the header background an editable region,then when I change the image from the admin page the new image appear only in the home page although in the other pages i use this

<?php echo file_get_contents("header.php");  ?>

the code in index.php:

    <?php require_once('admin/cms.php'); ?>
    <cms:template title = 'English Home Page'>
    <cms:editable name='header' type='image' />
    </cms:template>
     <?php echo file_get_contents("header.php");  ?>
    <?php COUCH::invoke(); ?>

the code in header.php

    <?php require_once( 'admin/cms.php' ); ?>
    .site-header {
        background-image: url("<cms:show header />");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: notdefined;
        background-clip: padding-box;
        background-size: cover;
        background-origin: padding-box;
    }

    <?php COUCH::invoke(); ?>

why when i get the header page contents in other pages except index the image does not change??

Answer 1

I think that You need to append Couch CMS's cms:editable to a regular html tag pair.

Like so:

<div class="header-bg" style="background-image: url('<cms:show header />');"></div>

You simply need to append a style="background-image: url("<cms:show header />");" to your main header container.

eg

<cms:editable name='header' type='image' style='style="background-image: url("<cms:show header />");'/>

Specify the rest of the CSS in your main styles file.

Answer 2

You actually do not need to use the 'header' as a full-fledged template (because I don't think it is supposed to be accessed directly through a browser using its URL). Instead, it should be converted into a 'snippet' that can then be included in the other templates.

To do that, please create a text file named 'header.html' with the following contents and then place this file within the 'snippets' folder of your Couch installation (which appears to have been renamed as 'admin' in your case). Please note that no <?php require_once('admin/cms.php'); ?> <?php require_once('admin/cms.php'); ?> or <?php COUCH::invoke(); ?> <?php COUCH::invoke(); ?> are required in snippets.

.site-header {
background-image: url("<cms:get_custom_field 'header' masterpage='index.php' />");
background-repeat: no-repeat;
background-position: center;
background-attachment: notdefined;
background-clip: padding-box;
background-size: cover;
background-origin: padding-box;
}

Next, in all your templates where you wish to include the header, use the following statement

<cms:embed 'header.html' />

So, for example, your index.php template would now become this -

<?php require_once('admin/cms.php'); ?>
<cms:template title = 'English Home Page'>
    <cms:editable name='header' type='image' />
</cms:template>

<cms:embed 'header.html' />
<?php COUCH::invoke(); ?

Hope this helps.