Modify a child theme for full width featured image on home page

  • ridestory

    (@ridestory)


    8 years, 10 months ago

    I am a big fan of how Quartz’s site works (http://qz.com/).

    I found the Independent Publisher theme, where the author’s GitHub page can be found here… https://github.com/raamdev/independent-publisher

    Also, the theme’s home page is here…
    http://independentpublisher.me/

    I have a test site running here…
    http://ridestory.com/substory/

    There is a child theme available for Independent Publisher. I thought it would be best to modify it to make the changes I want.

    The theme includes the ability to auto-set a featured image as a post cover, with the post title overlaying the post cover (featured image). You see this when you click through to read the post.

    On the home page, the most recent post is, of course, at the top of the page. But I would like that first post to be the featured image from the most recent post, including the overlaying title, linking to the full post, like what Quartz does. The second most recent post would then become the first post in the main content area of the home page. The theme already provides the option to abbreviate all posts after the first.

    I hope I am explaining myself clearly enough.

    I am able to do simple theme modifications but nothing like this. Please let me know if this looks possible or if too much work is required to pull it off.

    I appreciate any help you can offer.

    As a side note, I did contact the developer and asked if he would be interested in incorporating this or helping me modify the theme for my use, but he said he has not received any requests like mine, thus didn’t want to take the time to do it, which I understand.

Viewing 10 replies - 1 through 10 (of 10 total)
  • paulwpxp

    (@paulwp)

    8 years, 10 months ago

    The logic is already there, see the first if condition at line #10
    https://themes.trac.wordpress.org/browser/independent-publisher/1.6/content.php

    In childtheme’s version of content.php, delete everything inside that if (from line#11 to line#18) and replace it with this.

    <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'independent-publisher' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
	<?php the_post_thumbnail( 'full' ); ?>
</a>

    The rest is CSS, make use of the .home.page class with :first-of-type or :first-child to target it. Or move over the <header class="entry-header"> to inside the if condition and add extra specific class to it, and have one original (no extra class added) placed after the endif.

    Make sure that the Show Full Content First Post is enabled in theme option.

    Thread Starter ridestory

    (@ridestory)

    8 years, 10 months ago

    Hello, paulwpxp. And thank you for responding to my question. I really appreciate your time and help.

    I understand how to edit the content.php file. I assume you mean to duplicate the content.php file and add it to the child theme, with the revised code.

    But I’m having a hard time understand the CSS code you outlined. I struggle understanding CSS so I’m unclear on what to do.

    Can you explain it another way that I might understand it better?

    paulwpxp

    (@paulwp)

    8 years, 10 months ago

    I just looked at the content.php again and there is this independent_publisher_post_classes() function used in <article> which injects a first-post class into it.

    See it in action here, view source and look at the first <article>, it has first-post class in it.
    https://wp-themes.com/independent-publisher/

    So we can ignore the CSS bit in my previous reply. That part is just a way to get the CSS selector for the first post in front page only, but we don’t need that now because theme has its own function to add usable classes, including the one we want. Anyway, if interested, you can see more details on those selector here :first-child.

    The task here is first to get the childtheme version of content.php working, making sure it outputs the feature image in full and title for the latest post. Then we need to override theme’s CSS, adjust the theme’s content width, move header back to center, sidebar to bottom. Then for the top post only, make image full width, and move title up to overlay on it.

    Thread Starter ridestory

    (@ridestory)

    8 years, 10 months ago

    I get an image above my content but nothing else. It isn’t picking up the headline for the post.

    Do I place a <div class=”first-post”> around the a href you provided above? I did that but it didn’t change anything.

    I don’t know if you’ve looked at this but here is the test site…
    http://ridestory.com/substory/

    Thread Starter ridestory

    (@ridestory)

    8 years, 10 months ago

    There are classes “post-cover-title-wrapper”, “post-cover-title-image” and “post-cover-title-head”.

    You see these after clicking through to read the full post. With the full post, you see the full width image with the overlaying headline. This is what I want on the home page.

    Can those classes be used to help achieve what I want?

    paulwpxp

    (@paulwp)

    8 years, 10 months ago

    Right now, we can display: none; the content and footer of first top post, leaving only image and title. Then move the title up to overlay it. Move site header to the top, sidebar to bottom (undo what theme’s done to them actually), move the max-width: 700px from .site-content, .site-footer to article.post, excluding the article.show-full-content-first-post so it remains full 100% width. Also right now, notice the excerpt of second post is linked, meaning there is something wrong in our content.php, so make sure there is only one change in the first if condition and nothing else.

    But if you don’t want the front page to look like qz.com, instead you want it to look like single page of the theme, then we have to scratch all that, because the whole block of image and title need to be before the main div (it’s not possible with CSS alone to keep site header and sidebar as it is and move the top post to above and expand fullwidth and still work responsively). So if you want this, create a custom page template, and extract the code responsible for the image and title from content-single.php and use it in this custom template, down below it is the usual wp loop but exclude the latest post and use the same markup as used in the content.php.

    Thread Starter ridestory

    (@ridestory)

    8 years, 10 months ago

    Just to clarify, I do want my home page to look like qz.com. I like how their first “post” is a full width image with an overlaying headline. And by clicking either the headline or image, it passes you on to the full post. I’m hoping the Featured Image option in WordPress can serve as the full width image on the home page.

    I would like the full width image and headline to be above the left sidebar information, which I think you are explaining above.

    I’m sorry but I’m having a hard time following your instructions. I am very much a noobie when it comes to altering code and working with CSS.

    I appreciate your time and help. Thank you.

    Thread Starter ridestory

    (@ridestory)

    8 years, 10 months ago

    If anyone is available to take a look at this, please visit…
    http://ridestory.com/substory/

    I have managed to get the full width Featured Image from the most recent post to appear at the top of the home page. I did this by creating a header.php for the child theme.

    What I am struggling with now is styling the headline. I want it to look like the headline when you click through to read a post; i.e., the headline overlays the Featured Image. This should be easy with some CSS but at the moment, I can’t figure it out.

    Also, since I want the most recent post to be represented by the Featured Image on the home page, whereby you access the full post by clicking the image and/or headline, is there a way to skip it and show the next most recent post next?

    For example, if you visit the URL above, you’ll see my dummy post entitled, “Dodge Challenger” at the top of the home page, represented by the full size Featured Image. But the same post appears again below it. Obviously, it needs to be skipped and the Porsche post should appear below the large image of the Dodge Challenger.

    Thanks for any help you can offer.

    Thread Starter ridestory

    (@ridestory)

    8 years, 10 months ago

    Aha…I figured out how to skip a post.

    Simply using the code query_posts('offset=1'); solved it.

    But I still need help styling the headline as explained above.

    Thread Starter ridestory

    (@ridestory)

    8 years, 10 months ago

    If anyone who likes to tinker and figure out custom CSS, please take a look at my explanation of what I would like to do.

    I really appreciate the help.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Modify a child theme for full width featured image on home page’ is closed to new replies.