New image sections for Workstation Pro?

[customary12]

Can anyone help add image sections? I've altered the arrays in output.php and customization.php to reflect the new additions, and styled them in css, as well as expanding the front-page.php to include:

$image_section_3 = get_option( '3-workstation-image', sprintf( '%s/images/bg-3.jpg', get_stylesheet_directory_uri() ) );

and

if ( ! empty( $image_section_3 ) ) {
echo '<div class="image-section-3"></div>';
}

They don't show up, but I can't see anything else that looks relevant. Thanks.

[Marcy]

You said you already did this, but these are the steps to try.

The other thing that could help is to remove the images that are already there in the Customizer, and save it. Then add the images again, and save again. It seems that when changes are made to the code, it doesn't always pick it up, unless the images are added again.

1. style.css near line 1565 add .image-section-3

.image-section-1,
.image-section-2,
.image-section-3 {
    background-position: top;
    background-size: cover;
    min-height: 500px;
}

2. /lib/output.php near line 19, add 3
$opts = apply_filters( 'workstation_images', array( '1', '2', '3' ) );

3. /lib/customize.php near line 37, add 3
$images = apply_filters( 'workstation_images', array( '1', '2', '3' ) );

4. front-page.php, change this:
First change near line 56, add $image_section_3

function workstation_front_page_widgets() {

	$image_section_1 = get_option( '1-workstation-image', sprintf( '%s/images/bg-1.jpg', get_stylesheet_directory_uri() ) );

	$image_section_2 = get_option( '2-workstation-image', sprintf( '%s/images/bg-2.jpg', get_stylesheet_directory_uri() ) );

	$image_section_3 = get_option( '3-workstation-image', sprintf( '%s/images/bg-3.jpg', get_stylesheet_directory_uri() ) );

Second change, add where you want it to appear - I'm adding between front-page-2 and front-page-3

			genesis_widget_area( 'front-page-2', array(
		'before' => '<div id="front-page-2" class="front-page-2"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-2' ) . '">',
		'after'  => '</div></div>',
	) );

if ( ! empty( $image_section_3 ) ) {
		echo '<div class="image-section-3"></div>';
	}

	genesis_widget_area( 'front-page-3', array(
		'before' => '<div id="front-page-3" class="front-page-3"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-3' ) . '">',
		'after'  => '</div></div>',
	) );

---

Marcy | Amethyst Website Design | Twitter

[Marcy]

You also need to edit in the @media sections:

@media only screen and (max-width: 1220px) {

    .image-section-1,
    .image-section-2,
    .image-section-3 {
        min-height: 400px;
    }
}

@media only screen and (max-width: 880px) {
    .image-section-1,
    .image-section-2,
    .image-section-3 {
        min-height: 200px;
    }
}

---

Marcy | Amethyst Website Design | Twitter

[Adrien Sanborn]

Hey, This is awesome! I was having trouble getting this to work, but all I was missing was adding the '3' to the array in output.php. Thanks Marcy!

---

I’ve accepted the challenge! I’ll be answering at least 1 unanswered post per week.

[Author]

Posts