Site logo

Archived topic

Post Title inside featured image on blog page

8 replies · Started by blitzgeek on July 31, 2018

Viewing posts 1–9 of 9

Hi there,
is it possible to recreate something like this:
Blog page
Means: post title inside the featured image (or inside a placeholder and responsive), metas and excerpts below (as usual).
Volker

Hi there,

for the blog page we could use some Custom CSS. do you have a Site setup with your content, we can then have a 'play'?

Hi David,
nice! I tried it a week ago on FB (Freddie May) with no effort, lol.
It's a site in development, just a landing page is visible for now.
I tried some CSS there, but i'm not glad with it.
I can give you credentials on FB, ok?
Volker

Hi Freddie,

so first off we need to create a wrapper around the article post image and the entry header.
Done this in Elements. Creating 2 hooks.

Hook 1 Blog Article Wrap Open:
<div class="article-wrap">
Hook - Before Content.
Location - Blog, you need to add All archives and Search Results.

Hook 2 Blog Article Wrap Closed:
</div>
Hook - After Entry header.
Locations same as the above. I only added to Blog.

Now we can absolute position the Entry header in this new container which the post image also occupies - i have added the additional classes for archive and search results -just need to update your hooks.

.archive .article-wrap, .blog .article-wrap, .search-results .article-wrap  {
	position: relative;
}
.archive .entry-header, .blog .entry-header, .search-results .entry-header {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}

Wow!
Thank you so much David, that's awesome.
I always forget "hooks" ....
And now i try to figure out how to change some stuff (subtitle instead of metas)

I'm totally glad about your support!

Awesome :)

Hmm subtitles - probably need to look at a Custom Field and hook that in the same position as the Close wrapper hook with a higher priorty.

I will start my famous "Try & Fail"! :-)

Haha - I like the "try, try, try again..... give up and do something else" method lol

This archived topic is closed to new replies.