[Resolved] Element using generate_before_main_content will not render on Blog Page

[Gordon]

Currently I have created two elements. One is displayed as expected on Posts> All Post as you can see here:
https://www.gordonlear.com/what-makes-it-happen/

Second one is the same type of element and it should be displayed here:

https://www.gordonlear.com/blog/

Block Type: Hook Location Page > Blog

Both are using using generate_before_main_content and BOTH ELEMENTS can be found in the page source.

I have not coded anything. I have only used the UI to create and insert content.

This did work at one time and some how stopped.

The only code/customizing I have done was additional CSS

.speech-bubble {
position: relative;
background: #f1f1f1;
border-radius: .4em;
}

.speech-bubble:after {
content: ”;
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 27px solid transparent;
border-right-color: #f2f2f2;
border-left: 0;
margin-top: -27px;
margin-left: -27px;
}

.div-just {
text-align: justify;
text-justify: inter-word;
}

I spend an hour or so trying to adjust the template settings mainly the padding and container settings but just can not figure it out.

[Ying]

Hi Gordon.

Block Type: Hook Location Page > Blog

Choose Blog instead of page > blog.

Let me know 🙂

[Gordon]

Below is the source after I set location to BLOG and it did not render. HTML IS NOT WHERE I EXPECTED Anyway, seeing you went to location as the possible problem and not the template settings which was where my head was, I tired every location/hook and BLOG after_navigation worked. Thanks for getting my head in the right space.

<div class="site grid-container container hfeed grid-parent">
<div class="site-content">  (THIS IS WHERE I WOULD HAVE EXPECTED before_main_content)

<div class="content-area grid-parent mobile-grid-100 grid-100 tablet-grid-100">
<main id="main" class="site-main">
<div class="generate-columns-container masonry-container are-images-unloaded">\\
<div class="grid-sizer grid-33 tablet-grid-50 mobile-grid-100"></div>
<div class="wp-block-columns alignwide are-vertically-aligned-center">
<div class="wp-block-column is-vertically-aligned-center">
<p></p>
</div>

<div class="wp-block-column is-vertically-aligned-center">
<div class="wp-block-image">
<figure class="aligncenter size-large"><img width="160" height="163" src="https://www.gordonlear.com/wp-content/uploads/2020/12/head-shot-shawdow-circle-1.png" alt="gordon lear" /></figure></div>
</div>
<div class="wp-block-column speech-bubble">
<p style="font-size:22px"><strong>I hope you enjoy my posts.  </strong>Hopefully you will find something interesting. <br> If you need any help please give me a call.  <a href="tel:941-356-5097">941-356-5097</a>  </p>
</div>

<div class="wp-block-column">
<p></p>
</div>
</div>

[Ying]

Yes, the blog page is a bit tricky, especially when your posts are laid in columns.

Using after_navigation is a good call 🙂

[Author]

Posts