• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Altitude Pro : home page style on other pages

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Pro : home page style on other pages

This topic is: not resolved

Tagged: Altitude Pro, background, featured image

  • This topic has 33 replies, 8 voices, and was last updated 6 years, 6 months ago by slythic.
Viewing 20 posts - 1 through 20 (of 34 total)
1 2 →
  • Author
    Posts
  • June 1, 2015 at 8:39 am #154375
    Tbnk
    Member

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

    June 1, 2015 at 3:29 pm #154433
    James
    Participant

    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?

    June 1, 2015 at 6:06 pm #154470
    Tbnk
    Member

    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". πŸ™‚

    June 1, 2015 at 7:11 pm #154476
    James
    Participant

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

    June 1, 2015 at 9:09 pm #154479
    Tbnk
    Member

    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 !

    June 1, 2015 at 9:47 pm #154481
    James
    Participant

    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.

    June 1, 2015 at 9:48 pm #154482
    Tbnk
    Member

    Where do I find the code ?

    I'll try tomorrow and let you know. πŸ˜‰

    Thanks a lot !

    June 1, 2015 at 9:56 pm #154484
    James
    Participant

    i just came up with it.

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

    i'm smarter than i look πŸ™‚

    June 2, 2015 at 2:23 am #154506
    James
    Participant

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


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

    June 2, 2015 at 9:03 am #154551
    Tbnk
    Member

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

    June 2, 2015 at 12:53 pm #154588
    Tbnk
    Member

    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"... !?

    June 4, 2015 at 5:33 am #154830
    Exkalibur85
    Participant

    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.

    June 4, 2015 at 3:43 pm #154888
    James
    Participant

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

    June 4, 2015 at 6:16 pm #154902
    Tbnk
    Member

    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 !

    June 4, 2015 at 7:03 pm #154916
    James
    Participant

    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;
    }
    
    June 5, 2015 at 7:04 am #154978
    Brad Dalton
    Participant

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


    Tutorials for StudioPress Themes.

    June 5, 2015 at 1:34 pm #155020
    Tbnk
    Member

    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.

    June 15, 2015 at 1:20 pm #156300
    atimeto
    Member

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

    June 16, 2015 at 2:04 am #156367
    Brad Dalton
    Participant

    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.

    July 5, 2015 at 10:10 am #158405
    Exkalibur85
    Participant

    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
Viewing 20 posts - 1 through 20 (of 34 total)
1 2 →
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble