Header in standard post using masonry

[Garth Dryland]

Hey Tom,

I have just started using the masonry blog feature and noticed that when I use masonry with the standard post type the header merges in with the post content which doesn’t really work as far as context of text and formatting goes etc.

Here is a brief example of what i mean;

Excellent Advice and Service Ivana went above and beyond what I expected and exceeded the quality of accountants that quoted thousands of dollars a year.

“Excellent Advice and Service” being the header which merged with post content and;

“Ivana went above and beyond what I expected and exceeded the quality of accountants that quoted thousands of dollars a year.” being the post content.

You can see that the text doesn’t really flow right etc.

Is there a reason for this that I’m missing or is it something you overlooked?

Please advise.

Cheers

[Garth Dryland]

I also make note Tom that its only when using excerpt, not full posts however all other post types regardless of this setting appear to show the header as it should be.

Cheers

[Tom]

Hi there,

I’m not too sure what you mean – can you link me to the page so I can see it?

[Garth Dryland]

Its on my staging site Tom and its locked down to all traffic so its not practical.

Basically I assume there’s either no <br> or div or <p> or similar separating the header from the post content so it all merges into one line making the header appear to be part of the post content when viewing each post (with the described criteria) as a visitor would.

(I will have a look too see if I can further narrow the issue down. I will create a followup post if I find something of interest that may help you solve this problem.)

It only happens when using the blog masonry setting with a standard post type and except turned on. All other post types don’t have this issue regardless of whether masonry mode or except are on.

Also if I set to show the full post content regardless of post type or masonry mode the content displays as it should with a separation between the header and the post content.

You need to use a standard type blog post with a title, a header and content with it set to except while in masonry mode and publish it to recreate the issue.

Hope that makes more sense to you.

Cheers

• This reply was modified 7 years, 8 months ago by Garth Dryland.
• This reply was modified 7 years, 8 months ago by Garth Dryland.

[Tom]

Any chance you can show me a screenshot?

It doesn’t sound like normal behavior – you may have some custom CSS or a plugin causing the issue.

[Garth Dryland]

Hi Tom

I’ve emailed you a screenshot. I have circled the header portion in the content area.

I have also disabled all plugins and themes bar Generatepress main theme and the GP Pro plugin and the issue remains present. There are no additional CSS or any other tweaks of any sort active.

I’m confident you can fix this problem. If you need more info please ask and I will send asap.

Cheers

[Tom]

Since you’re using excerpts, no HTML will make it through into the excerpt, so if you have any HTML headings in your post at the top, they won’t display the same as they will in the single post.

If you want them to display, you’ll have to set the more tag: https://generatepress.com/knowledgebase/using-the-more-tag/

[Garth Dryland]

Hey Tom

Perhaps I don’t really get what you mean by no HTML will make it through into the excerpt as the header and content are both present. There is just no line break between them.

I’ve tried adding the more option and I suspect you mean to apply it immediately following the header however that cuts it off all the content so that the content text is no longer visible.

Unless I’m doing something differently than what you’re suggesting, surely there must be another work around when using standard posts and excerpts?

I really want to use excerpts with masonry and have some content showing. If the heading can’t be separated from the content it looks really silly.

Fairly sure I’ve seen this done on other sites?

Cheers

• This reply was modified 7 years, 8 months ago by Garth Dryland.
• This reply was modified 7 years, 8 months ago by Garth Dryland.

[Tom]

In the screenshots you sent I see the header as it should be (Chartered Accountant for example).

Then the post meta – still all good.

Then I see the content. It looks like you’ve added a heading (H3) inside of your content, correct?

If so, the excerpt doesn’t recognize HTML inside the content – the HTML is what is making that H3 (Accountant and Office Manager) a heading in the single post.

In order for it to display on your blog, you need to set the more tag which then makes the excerpt recognize HTML.

The excerpt stripping all HTML is basic WordPress functionality using the built in the_excerpt() function.

[Garth Dryland]

Hi Tom

No the “Chartered Accountant” portion is actually the post title. The header which I have put in (h3) header tags (and I assume is the only way to make a header work as required for SEO) is “Accountant and Office Manager” and the post content is as follows;

Accountant and Office Manager I have known Ivana in a professional capacity since 2007. At that time Ivana was the Accounting and Office Manager for Control Contracts Limited, a role she held for 12 years. Ivana had sole responsibility for the general ledger, payroll, IRD, plus the Companies Office statutory onus and management of the … Read more…

I however tested what you suggested and I see exactly what you mean now. I like the result much better as it appears to put an anchor on the referred post so “read more’ flows on from where you left off from as opposed to going to the top of the page so you have to find where you left off.

The only issue that I have with this method is that the text I should see is hiding behind the Menu Plus floating menu. It would work perfectly if I hadn’t activated the Menu Plus floating menu feature.

Is there some CSS I can add to my CSS manager so that it will adjust the content down a bit making the text starts below the Menu Plus floating menu and not behind it, without creating visible white space on post?

Cheers

• This reply was modified 7 years, 8 months ago by Garth Dryland.

[Garth Dryland]

Oops sorry, the post content is actually as follows;

I have known Ivana in a professional capacity since 2007. At that time Ivana was the Accounting and Office Manager for Control Contracts Limited, a role she held for 12 years. Ivana had sole responsibility for the general ledger, payroll, IRD, plus the Companies Office statutory onus and management of the … Read more…

[Tom]

The only issue that I have with this method is that the text I should see is hiding behind the Menu Plus floating menu. It would work perfectly if I hadn’t activated the Menu Plus floating menu feature.

Is there some CSS I can add to my CSS manager so that it will adjust the content down a bit making the text starts below the Menu Plus floating menu and not behind it, without creating visible white space on post?

Can I see what you mean by this? Do you mean when you link to a certain anchor on the page, the top portion of the section you linked to is hidden?

[Garth Dryland]

Hi Tom

I haven’t linked to an anchor. I just assume that’s what happens when using the more tag option given what happened as a result of using and clicking read more, given where the post positions itself after loading.

Sounds like maybe I could link to another anchor from what you said though if CSS is an option it would save the need to remember to link to another anchor when creating posts.

I have emailed 3 screenshots. Hopefully they show you exactly what I mean.

Cheers

[Tom]

You can disable that read more jump like this: https://generatepress.com/forums/topic/no-page-scroll-after-clicking-read-more-link/#post-130709

[Garth Dryland]

Hi Tom

First of all, thanks for all the replies to my questions on various topics over last few days.

I’ve used the function above and while it is better the ultimate result would be having the remaining text follow on from below the menu plus floating menu so the reader doesn’t have to find where they left off from before clicking the read more link.

Is there any way to adjust the anchor position so that the remaining text follows on from below the menu plus floating menu as opposed to behind it as shown in my screenshots?

Cheers

[Author]

Posts