Generate content wrappers and additional div for custom field data?

Hi there,

Have you looked into our hooks?: https://docs.generatepress.com/article/hooks-visual-guide/

You can add an opening <div> in one hook, then adding the closing </div> in a hook lower down in the page to wrap elements. It will likely take some adjusting depending on the hooks you need to use, but it should be possible.

All of our hooks are documented inside the templates as well: https://github.com/tomusborne/generatepress

Let me know :)

Thank you, Tom. Always such great support on here! I'll check those out today.
Steve

Happy to help! :)

Hi Tom,
I managed to deploy the content wrapper #djwrap to work via a hook and managed to display the ACF data with #mixplaylists div also created via a hook.

My only sticking point now is not being able to get the wrapper #djrightpanel to commence above the <header class="entry-header"> tag and around the .entry-header and .entry-content divs. I can only imagine this is because currently the title is displayed below the featured image when in full width mode.

Could this be achieved via code in functions.php as I couldn't find a hook for before_entry_header. Thanks

So are you wanting to do something like this?:

<div class="your-element">
   <div class="entry-header">..</div>
   <div class="entry-content">..</div>
</div>

Yes, exactly.

Hi there,

try this:

add_action( 'generate_before_content', function(){
    echo '<div class="open-wrapper">';
}, 25);

add_action( 'generate_after_entry_content', function(){
    echo '</div>';
}, 5);

Hi David,
that worked brilliantly! I imagine positioning has a lot to do with the level of importance (25 & 5) as to where they will appear within the schema.

Now I'm just left with the conundrum of how to dynamically set the height for the right panel wrapper to equal the height of the featured image so that they both stay within the constraint's of the outer wrapper. Something like: outer wrapper's height = inside article img height, as the image's height responds by width. Here's a rough plan of the layout:

Thats correct - the Simply Show Hooks plugin is handy for quickly seeing what is hooked at what priority.

I would use CSS Flexbox like this:

/* Make article flex */
.dj .inside-article {
    display: flex;
}

/* Make featured image container fill available space */
.dj .inside-article .featured-image {
    flex: 1 0;
}

/* force image to cover featured image containe */
.dj .inside-article .featured-image img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

/* Djright panel to occupy maximum 30% of container */
.dj .djrightpanel2 {
    flex: 0 0 30%;
}

Hi David,
that didn't work unfortunately as it made the image 100% height. I suspected you meant .dj .inside-article .featured-image to be 1 0 70% so I went with that and then that made .djrightpanel2 100% (the full height of the contained text) and therefore a higher value than the featured image. I'm trying to contain the height of this wrapper to be the same as the image as I would prefer to use overflow:scroll on its content.

The idea was to force the image to fit the space available to it as that easily achieved with object-fit. To force the right panel to fit vertically is more complicated and can't be done with just CSS when using floats.

Can you remove all the CSS you currently have for inside-article layout and its contents and ill take a look at what can be done.

Hi David,
okay, all CSS removed from those items. I was thinking if it were possible to use a script to dynamically monitor the height of the featured image and apply that to the outside wrapper? I doubted it could be achieved that way around though?

I wondered if something like this would work?

var divHeight = $('.featured-image  page-header-image-single').height(); 
$('.inside-article).css('min-height', divHeight+'px');

and then set .djrightpanel2 height to 100%

*I’ve just realised this would need to be a listening function as the layout is dynamic.
Thanks again in advance for your time on this.

Try this:

@media(min-width: 769px) {
    
    /* Make container a flexbox */
    .dj .inside-article {
        display: flex;
    }
    
    /* Allow featured image to grow to fill space */
    .dj .inside-article .featured-image {
        flex: 1 0;
    }
    
    /* Force Image to always occupy available space */
    .dj .inside-article .featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Fix panel to 30% and responsive height */
    .dj .inside-article .djrightpanel2 {
        flex: 0 0 30%;
        max-height: 47vw;
        overflow: auto;
    }
    
}

This will work fine IF all your images have the same aspect ratio. If not you're going to be adjusting this value max-height: 47vw; for each post.....

Amazing, David! Yes, they will all be the same ratio so this solution will work for all.
Thank you so much for for helping. Now I just need to figure out how to centre align grid template items and utilise the mixcloud footer api! I wish there were more forums like this where we can learn and share solutions.