[Resolved] Post Title inside featured image on blog page

Home Forums Support [Resolved] Post Title inside featured image on blog page

Home Forums Support Post Title inside featured image on blog page

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #636843
    blitzgeek

    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

    #636903
    David
    Staff
    Customer Support

    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’?

    #636907
    blitzgeek

    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

    #637030
    David
    Staff
    Customer Support

    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;
    }
    #637085
    blitzgeek

    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!

    #637093
    David
    Staff
    Customer 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.

    #637109
    blitzgeek

    I will start my famous “Try & Fail”! ๐Ÿ™‚

    #637110
    David
    Staff
    Customer Support

    Haha – I like the “try, try, try again….. give up and do something else” method lol

    #637111
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.