Community Forums › Forums › Archived Forums › Design Tips and Tricks › Copying Gallery Pro posts full-width image/header code to Altitude posts
Tagged: Altitude Pro, featured image, Gallery Pro
- This topic has 6 replies, 2 voices, and was last updated 6 years, 11 months ago by Brad Dalton.
-
AuthorPosts
-
May 15, 2017 at 1:01 am #206438CarlaParticipant
Hello, I want to create a site using the Altitude theme, but I prefer the Gallery Pro layout for the blog pages because I want to have a full width image at the top of each blog post in the Altitude theme that also displays the title and date of the post on top of the image like the Gallery Pro theme.
Here is the how Altitude's default blog page currently looks:
I want to get rid of "Blog Page" and have a full-width image immediately after the nav menu. Here's an example of how I want my posts to look (only the header image with the title and date above the blog post):
Does anyone know if I can do this with the Genesis Custom Headers or Box Lite plug-ins or do I need to customize the code? I added features from another theme to my Serenity theme years ago and I'm guessing that I might be able to copy the code for the Gallery Pro header feature from the functions.php file into the Altitude theme. Can anyone point me in the right direction?
If this can't be done easily, I may end up trying to use the Gallery Pro theme, but I don't like the home page as much.
Thanks!
Carla
https://my.studiopress.com/themes/gallery/#demo-fullMay 15, 2017 at 1:11 am #206441CarlaParticipantPS: Here is a Gallery Pro blog post example since the link above is pointing to the demo: https://wildhousedesigns.com.au/2017/05/09/by-jem-lookbook/
May 15, 2017 at 3:04 am #206443Brad DaltonParticipantI think you could copy the code from gallery pro and add it to a single.php file or use in functions.php with a conditional tag.
May 15, 2017 at 4:43 am #206446CarlaParticipantHi Brad,
Thanks for responding. Can you be more specific about how I can track down which portion of the code is dedicated to the full-width image in the Gallery Pro header? It's been a few years since I looked at the functions.php code. If you can say more about the conditional tag, that would be great!
May 15, 2017 at 4:50 am #206447Brad DaltonParticipantTry adding this in a single.php file in Altitude Pro..
<?php /** * Post Header * */ add_action( 'genesis_after_header', 'bbs_single_post_header' ); function bbs_single_post_header() { if ( has_post_thumbnail( ) ) { //* Remove the entry header markup (requires HTML5 theme support) remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 ); remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 ); //* Remove the entry title (requires HTML5 theme support) remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); //* Remove the entry meta in the entry header (requires HTML5 theme support) remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); //* Remove the post format image (requires HTML5 theme support) remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 ); $image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' ); echo '<div class="hero flexible-widget-area bg bg-scrim text-center" style="background-image: url(' . $image[0] . ');"><div class="wrap">'; genesis_entry_header_markup_open(); genesis_do_post_title(); genesis_post_info(); genesis_entry_header_markup_close(); echo '</div></div>'; } } genesis();
Then you'll need to find the CSS rules for each class the PHP generates.
May 25, 2017 at 2:23 am #206953CarlaParticipantThanks so much, Brad!
I'm sorry for the delay. I got locked out of the forum while I was traveling and couldn't respond. I created the new PHP file and I am getting much closer. Here is what it looks like:
http://drcarla.com/home/wp-content/uploads/2017/05/Blog.png
I added a featured image and I want it to be 2-3 times as tall as this one. Do you know what I need to do to change this? I looked in the CSS and I don't see anything obvious that I need to change and I don't see a class for "hero flexible-widget-area".
Also, I want the page title to show up on top of the image like this: https://wildhousedesigns.com.au/2017/05/09/by-jem-lookbook/
Can you clarify what you mean by "find the CSS rules for each class the PHP generates"?
Thanks!
CarlaMay 25, 2017 at 6:09 am #206958Brad DaltonParticipantHi Carla
1. The PHP code contains the featured image size you can change from full to any other size. See the following line of PHP:
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
2. You'll find the CSS rules in the following PHP code.
echo '<div class="hero flexible-widget-area bg bg-scrim text-center" style="background-image: url(' . $image[0] . ');"><div class="wrap">';
You can search the style sheet for the CSS rules used with each of these classes.
hero
flexible-widget-area
bg
bg-scrim
text-center
wrapIf you don't want to do the work yourself, here's a complete tutorial which includes all the code you can copy & paste ( Requires membership )
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.