Altitude Pro : home page style on other pages

[Tbnk]

Hi,

I use Altitude Pro with Woocommerce. Works great.

I've just a simple question : how can I use the same design template of the home page (with some images in background, including the first one which deeply change the menu appearance) on product page template ?

But not with the same images. I thought about adding custom fields on the product page, to upload like 1 picture (or use the featured picture ?) and then the template would use it to show a nice relevant background behind the menu and the "1st section".

[James]

you can do a function to pull the featured image, like on here http://demo.communityprotheme.com/our-values/

but having a layout like the home page of Altitude would be tricky, as it uses widgets where you require this on a page

did you just need the one image at the top, or several images down the page as well?

[Tbnk]

Hi,

thanks for your reply.

I just need 1 picture, like the first one on the homepage of Altitude (so with the same CSS) : behind the menu, around 574px height and the dark color gradation.

It's for the product page : each product has a featured image and I would like this image as "background top image". 🙂

[James]

would the product/page title need to be over the image too?

[Tbnk]

In fact I use WP-Views by Toolset. I built my product page with a title on the top (same style as in homepage, but I can change it) and a 5 columns part. I planned to put that on a DIV with the background featured image (and main menu on it), like in your demo page.

Then, in another div, what remains of the product page : details, description, add-to-cart, related products, slider, all with regular white background.

Of course I can do it another way in order to have that result. But the idea was to have over the background feature image :
- the menu (like in homepage),
- the title of the product,
- excerpt,
- a row with 5 columns.

Thanks a lot !

[James]

i'm not sure how to do the product stuff, not without diving into woocommerce and toolset.

are you able to adapt what i have done so far?

i'll add the code to github for now.

[Tbnk]

Where do I find the code ?

I'll try tomorrow and let you know. 😉

Thanks a lot !

[James]

i just came up with it.

the community pro theme has something similar, so i worked from there.

i'm smarter than i look 🙂

[James]

here is the code i wrote if you want to have a play with it.

https://gist.github.com/jamiemitchell/d04ab7920386904e8085

[Tbnk]

Hi Jamie,

I guess I've to change this :
if ( has_post_thumbnail() && is_page() && !is_page_template() )

But with what ?

It's for a single product page (theme/woocommerce/single-product.php), the template is called "Single Product Page Template"... I've no idea how to attribute this code to the good page.

For instance, here's the code of my single product page template :

<?php
/**
 * This file adds the Landing template to the Altitude Pro Theme.
 *
 * @author StudioPress
 * @package Altitude
 * @subpackage Customizations
 */

/*
Template Name: Single Product
*/

//* Add custom body class to the head
add_filter( 'body_class', 'altitude_add_body_class' );
function altitude_add_body_class( $classes ) {

   $classes[] = 'altitude-landing';
   return $classes;
   
}

//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

//* Add site header elements
add_action( 'genesis_header', 'genesis_header_markup_open', 5 );
add_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', 'genesis_header_markup_close', 15 );

//* Add navigation
add_action( 'genesis_header', 'genesis_do_nav', 12 );
add_action( 'genesis_header', 'genesis_do_subnav', 5 );

//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Add site footer widgets
add_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

//* Add site footer elements
add_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
add_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

//* Run the Genesis loop
genesis();

As you can see, it's the Landing Page Template, but I added the header with the menu (add_action rather than remove_action).

[Tbnk]

Well that's a good start !!! 🙂 🙂

In functions.php I replaced this if ( has_post_thumbnail() && is_page() && !is_page_template() ) by this if ( has_post_thumbnail() && is_product() ).

It works : I've the featured image in background as expected, but on mobile, the menu becomes white with white typo instead of black with white typo.

I'll watch the CSS, I think I'll be able to fix it and share the result.

And finally my question is : how can I include with the title a div which I'll fill with WP-Views by Toolset, with an excerpt and other elements and then "tell" to the template, "after it's white"... !?

[Exkalibur85]

With all respects. That code is awesome. I used too and It is exactly what I was looking for my new Altitud pro customizations.

Thank you so much.

Are there any way to make the image shorter for the pages? I mean, to adjust the Height?
Same height as the Community theme.

Thank you so much for your help.

[James]

sorry guys for the lately reply

the emails didn't come through from this post till now.

so for the height, it is just padding added to the '.image-header .entry-title' so you just adjust that.

for the woocommerces shop pages, there is some info on the woocommerce site (documentation) for all the conditionals.

for the header turning white, make sure you have all the css, including media queries (which is add at the bottom of your css).

[Tbnk]

Hi,

I removed the a "static" thing about header in the CSS and it works perfectly !

As said above, I juste replace "page" by "product" and it works. 🙂

Just don't know how to add something else that the title. Can I just add a div, attribute an ID or a class and then add something in functions.php in order to place it just under the title, inside the "background image zone" !?

Thanks a lot !

[James]

ok, see this bit here

add_action( 'genesis_after_header', 'altitude_open_post_title', 1 );
add_action( 'genesis_after_header', 'genesis_do_post_title', 2 );
add_action( 'genesis_after_header', 'altitude_close_post_title', 3 );

you can add another action under the title (don't forget the priority, was 123, now 1234)

like so

add_action( 'genesis_after_header', 'altitude_open_post_title', 1 );
add_action( 'genesis_after_header', 'genesis_do_post_title', 2 );
add_action( 'genesis_after_header', 'my_awesome_custom_thing', 3 ); //* new add action
add_action( 'genesis_after_header', 'altitude_close_post_title', 4 );

then create your new function

// Add awesome thing
function my_awesome_custom_thing() {

	//* your code here

}

and that will output whatever put in there to just under the title

so the whole thing would now look like this

/* Add page title on pages if has featured image
------------------------------------------------------------ */

add_action ( 'genesis_meta', 'altitude_add_page_title' );
function altitude_add_page_title() {

	if ( has_post_thumbnail() && is_page() && !is_page_template() ) {
	
	  remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
	  remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
          remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
	  add_action( 'genesis_after_header', 'altitude_open_post_title', 1 );
          add_action( 'genesis_after_header', 'genesis_do_post_title', 2 );
          add_action( 'genesis_after_header', 'my_awesome_custom_thing', 3 ); //* new add action
          add_action( 'genesis_after_header', 'altitude_close_post_title', 4 );
	  add_filter( 'body_class', 'altitude_featured_body_class' );
	
		
	}
}

// Add opening div and background image
function altitude_open_post_title() {
	if ( $image = genesis_get_image( 'format=url&size=full' ) ) {
		 printf( '<div class="image-header" style="background-image: url(%s);"><div class="image-header-wrap"><div class="wrap">', $image );
	}
}

// Add awesome thing
function my_awesome_custom_thing() {

	//* your code here

}

// Add closing div
function altitude_close_post_title() {
	echo '</div></div></div>';
}

// Add body class
function altitude_featured_body_class( $classes ) {
	$classes[] = 'featured-section';
        return $classes;
}

[Brad Dalton]

Here's a template you can use which is exactly the same as the Altitude Pro themes home page.

---

Tutorials for StudioPress Themes & WooCommerce.

[Tbnk]

Hi Jamie,

thank you again. I've no idea what have to look like the code //* your code here.

I tried <div>.....</div>, don't work. echo '<div>....</div>';, don't work. Can you give me a clue ?

I've on my page a div with a class and an id, just would like to "call it and place it" under the title with the background image behind.

[atimeto]

Im looking to do the same thing. Does this pull the featured image for all pages or can you change each one?

[Brad Dalton]

It adds another option for unique background images for each widget area area to the customizer which are different to the front page and it also adds another colour option.

---

Tutorials for StudioPress Themes & WooCommerce.

[Exkalibur85]

Hi guys. I used the code provided at https://gist.github.com/jamiemitchell/d04ab7920386904e8085
and works very good. Only one thing.

When I adjust the responsiveness to relosutions lower than 800px meaning (@media only screen and (max-width: 800px)
my header changes the height so the issue is after the header image. The margin between the header image (from the featured post image) and the starting point of the site inner content is huge, and I don´t know where to reduce that margin.

It only appears at reslutions lower than 800 as I mentioned. Check it out here.
http://www.tcmchinatravel.com/viajes-mtc-medicina-china-acupuntura/

Any help is welcome.Thank you guys.

[Author]

Posts