[Resolved] Showing Element Header photo after post title

Home Forums Support [Resolved] Showing Element Header photo after post title

Home Forums Support Showing Element Header photo after post title

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #707219
    Ivan Cazorla

    Hi there, is it possible to show an element header background photo after the post blog title, instead of shoing it before?

    I’ve also tried to create 2 element headers (one with a photo and another one with the title), but they never show together when activated.

    Let me know.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #707222
    Ivan Cazorla

    Like this draw: https://snag.gy/x7svl5.jpg

    #707225
    Leo
    Staff
    Customer Support

    Hi there,

    Wouldn’t that just a be feature images below title?
    https://docs.generatepress.com/article/adjusting-the-featured-images/

    Otherwise I guess you could try inserting the title first using the template tags:
    https://docs.generatepress.com/article/page-header-template-tags/#post_title

    Then adding a static image after that.

    Let me know if this helps 🙂

    #707336
    Ivan Cazorla

    It wouldn’t work as feature image below title because I want it to be full screen, therefore the max width is the container width.

    So I would create one page header with: {{post_title}}

    And then another page header with just the background image? Or a manual static image inside the post? Or where?

    thanks,
    Ivan

    #707350
    Leo
    Staff
    Customer Support

    Manual static image inside the page hero content after template tag.

    #707363
    Ivan Cazorla

    So that means I would have to create one new element header for every post with his own image inside?

    #707373
    Ivan Cazorla

    If I do it like this:

    <h1>
    	{{post_title}}	 
    </h1>
    <img src="https://newdeacampada.campingsport.es/wp-content/uploads/2018/10/featured_corduroy_iron_and_resin_banner_photo.jpg">

    The image shows inside the container and not in full width.

    #707391
    Leo
    Staff
    Customer Support

    I’ll check with Tom to see if there is a good way to do a full width featured image below the title as it will break the content container.

    Also the image isn’t full width because your original image is 1170px in width and isn’t big enough to be full width.

    #707394
    Ivan Cazorla

    Alright thanks Leo, keep me updated.

    Besides that, I thik you can make a photo cover the entire screen even if its width its not big enough, isn’t it?

    thanks!

    #707420
    David
    Staff
    Customer Support

    Hi there,

    try this, create your Header Element and add your title etc. No background image.
    Then new Hook Element > after_header hook, execute PHP checked and priority of 15 then add this for its content:

    <?php 
    global $post;
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
    ?>
    <div id="post" class="feat-image" style="background-image: url('<?php echo $thumb['0'];?>')"><!-- featured image --></div>

    Then try this CSS:

    .feat-image {
        padding-top: 56%; /* Adjust to match image aspect ratio */
        background-size: cover;
        background-repeat: no-repeat;
    }
    #707610
    Ivan Cazorla

    Woah! it worked like a champ!! thanks!!

    #707890
    Ivan Cazorla

    And is it possible to make the image show at its original width instead of fixing it to a certain padding width?

    thanks,

    #707990
    David
    Staff
    Customer Support

    That’s great. So the image you want displayed at full image size? Which would mean it wouldn’t be full width on larger screens?

    #708092
    Ivan Cazorla

    Oh I didn’t realised that. Maybe its better to leave it as it is now.

    thanks

    #708249
    David
    Staff
    Customer Support

    Trick is to set the padding % to match the images aspect ratio. Then if all images are the same ratio they should display 100% of the image on all screen sizes.

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.