Archived topic
Entry-title over post-image for Archives
8 replies · Started by Morgan on March 22, 2021
I'm using Ethos which came with an Element for Blog Posts: white titles over a page hero with feat-image as background, and wanted Blog Archives to emulate similiar. I found: https://generatepress.com/forums/topic/custom-archive-layout/page/2/ , and used the function in a snippet and added the CSS offered by David, and it's pretty close to what I'm looking for.
Yet, at different screen sizes - the layout/placement of longer entry-titles &/or entry-meta moves about: http://screen.coach/blog/ , I'm thinking that having entry-title within and aligned to the bottom of the post-image div (seperate from entry-meta + entry-summary) would achieve what I'm looking for/be the easiest fix?
Or another suggestion?
Hi there,
try adding this PHP Snippet to output the title inside the post-image container:
add_action( 'post_thumbnail_html', 'db_title_over_archive_featured_image', 10 );
function db_title_over_archive_featured_image( $html ) {
if ( !is_single() ){
$params = generate_get_the_title_parameters();
$html .= '<h2 class="entry-title" itemprop="headline">' . get_the_title() . '</h2>';
}
return $html;
}
Then some CSS to position it:
.post-image {
position: relative;
}
.entry-title {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
text-align: left;
}
Then you can use a Layout Element to disable the Content Title for Blog and Archives.
Alternatively you can wait for GPP 2.0 which will allow you create this within a Block Element.
I was actually playing with the GPP 2 latest alpha, but as soon as I created a new element, add a Gutenberg container and try to apply Dynamic Data/Dynamic Background Image to container, I get: None - it's greyed, unclickable.
I can insert a dynamic image, but I need it as background of container, and that just isn't working.
Ima gonna rollback and try your method.
1. Layout is looking good, except for there being what looks like every single title overlaying the first post: http://screen.coach/blog/
2. I've used the snippet (at bottom) to get the cats appearing next to meta, it works fine.
But can you pls tell me how I can have the exact archives cats/meta layout on all posts as well?
3. I haven't been able to get an authors avatar to appear on posts with 2 different snippets I've used (element header conflicting?). Latest snippet:
add_filter( 'generate_post_author_output', 'tu_add_author_gravatar' );
function tu_add_author_gravatar() {
printf( ' <span class="byline">%1$s</span>',
sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s %5$s<a class="url fn n" href="%2$s" title="%3$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%4$s</span></a></span>',
__( 'by','generatepress'),
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
esc_html( get_the_author() ),
get_avatar( get_the_author_meta( 'ID' ) )
)
);
}
4. Is there a way to specify pages to have, or not have, meta info? I.e. I want some pages with a plain title as per: http://screen.coach/attorneys/ , but also would like to be able to create Pages with an author box &/or meta/date, etc.
Meta snippet:
if ( ! function_exists( 'generate_posted_on' ) ) :
/**
* Prints HTML with meta information for the current post-date/time and author.
*/
function generate_posted_on() {
if ( 'post' !== get_post_type() )
return;
$date = apply_filters( 'generate_post_date', true );
$author = apply_filters( 'generate_post_author', true );
$categories = apply_filters( 'generate_show_categories', true );
$tags = apply_filters( 'generate_show_tags', true );
$comments = apply_filters( 'generate_show_comments', true );
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) )
$time_string .= '<time class="updated" datetime="%3$s" itemprop="dateModified">%4$s</time>';
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
// If our date is enabled, show it
if ( $date ) :
printf( '<span class="posted-on">%1$s</span>',
sprintf( '<a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>',
esc_url( get_permalink() ),
esc_attr( get_the_time() ),
$time_string
)
);
endif;
// If our author is enabled, show it
if ( $author ) :
printf( ' <span class="byline">%1$s</span>',
sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <a class="url fn n" href="%2$s" title="%3$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%4$s</span></a></span>',
__( 'by','generate'),
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'generate' ), get_the_author() ) ),
esc_html( get_the_author() )
)
);
endif;
// Show the category and tags
if ( 'post' == get_post_type() ) {
$categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generate' ) );
if ( $categories_list && $categories ) {
printf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
_x( 'Categories', 'Used before category names.', 'generate' ),
$categories_list
);
}
$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'generate' ) );
if ( $tags_list && $tags ) {
printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
_x( 'Tags', 'Used before tag names.', 'generate' ),
$tags_list
);
}
}
// Show the comments link
if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) && $comments ) {
echo '<span class="comments-link">';
comments_popup_link( __( 'Leave a comment', 'generate' ), __( '1 Comment', 'generate' ), __( '% Comments', 'generate' ) );
echo '</span>';
}
}
endif;
if ( ! function_exists( 'generate_entry_meta' ) ) :
/**
* Prints HTML with meta information for the categories, tags.
*
* @since 1.2.5
*/
function generate_entry_meta()
{
}
endif;
Could your raise a separate topic for each of the other requests - it will make it easier for users to find the answers and for the support team to track.
For the current topic - did you apply this:
Then you can use a Layout Element to disable the Content Title for Blog and Archives.
Ok, re: other topics.
Re: disabling titles, yes I've created an Element "Disable Titles", which disables Content Title, applied to Display Rules: All Archives.
Can you include Blog in the Layout Elements Display rules as well as All Archives.
That's the one! Thanks for your help :)
Glad to hear that!