Allow users to change/customize background image for pages

[SteelWagstaff]

Description

All pages created on a network using the Aldine theme, like https://integrations.pressbooks.network/about/ or https://integrations.pressbooks.network/help/ currently use the same background image: https://integrations.pressbooks.network/app/themes/pressbooks-aldine/dist/images/catalog-header.jpg. This background image is added to the header via inline CSS:

pressbooks-aldine/header.php

Lines 46 to 55 in 743e20f

	<?php
	if ( is_front_page() ) {
	if ( has_header_image() ) {
	echo( get_header_image() );
	} else {
	echo get_template_directory_uri() . '/dist/images/header.jpg';
	}
	} else {
	echo get_template_directory_uri() . '/dist/images/catalog-header.jpg';
	}

Some network managers would like a GUI tool that allows them to change or customize this image as they personalize the look/feel of their network -- both globally and for individual pages.

[SteelWagstaff]

If users would like to modify the background image for non home pages currently, they can use custom CSS, but this is a bit cumbersome:

.page-template-default:not(.home) header.header {
	background-image: url(https://desiredimage.url) !important;
}

To change it for the catalog page (which uses inline styling), you'll need to apply something like:

.catalog .header[style] {
    background-image: url(https://desiredimage.url) !important;
}

[SteelWagstaff]

I propose that we do two things:

1. Add a customizer option for Aldine that allows network managers to use a header image which would replace https://github.com/pressbooks/pressbooks-aldine/blob/dev/dist/images/catalog-header.jpg for the catalog and other child (i.e. not-main/home) pages on the root site (in much the same way that Header Image replaces https://github.com/pressbooks/pressbooks-aldine/blob/dev/dist/images/header.jpg if it has been set:

   pressbooks-aldine/header.php

   Lines 47 to 54 in 743e20f

   	if ( is_front_page() ) {
   	if ( has_header_image() ) {
   	echo( get_header_image() );
   	} else {
   	echo get_template_directory_uri() . '/dist/images/header.jpg';
   	}
   	} else {
   	echo get_template_directory_uri() . '/dist/images/catalog-header.jpg';

   ). When doing this we may wish to change the name of the current 'Header Image' option to say 'Home Page Header Image' and this second option to say 'Child Page Header Image' or something to that effect.

2. On the edit page menu for individual pages on the site root we should add a small button that allows the user to set a custom header image for that page. It would look/function much like the featured image function for core WordPress.
   

When a page has a custom header/featured image, that image would display as the page's header background image instead of the theme default.

See https://github.com/pressbooks/ideas/issues/193

[SteelWagstaff]

Voting applies for #2 above

[SteelWagstaff]

Notify Lindsey Gumb at Roger Williams when implemented.

[pb-amy]

More in favour for this feature: https://pressbooks.zendesk.com/agent/tickets/3245

[pb-amy]

More in favour of this feature: https://pressbooks.zendesk.com/agent/tickets/4966

[tw77]

More in favour: https://pressbooks.zendesk.com/agent/tickets/9509

[SteelWagstaff]

Ready for release! Users should now be able to change the background image on individual Aldine pages using the 'featured image' WP feature.