• Hello, I use a Twenty Seventeen child theme on https://chronicle.su

    I would like to move my post featured images into the header area, and move the post title from its standard position to instead appear over the image (so it organically looks like an image macro), making each unique post look like the frontpage of theintercept.com, a site we satirize.

    I would like to preserve the frontpage header, though. It should always be the same image uploaded through the Customize – Header menu.

    The only similar solution in this forum, linked below, deletes the header from the frontpage, so it’s not a perfect solution and doesn’t address my title need.
    https://www.ads-software.com/support/topic/featured-header-in-twenty-seventeen/

    Can anyone offer me some guidance as to where to modify the code? I can imagine it’s an easy solution, like moving snippets around and using a couple of ‘if’ codes.

    • This topic was modified 7 years, 5 months ago by wordpriss. Reason: grammar
Viewing 7 replies - 16 through 22 (of 22 total)
  • Haz

    (@tvguy2000)

    Hi Andrew, I am branching off this thread so I do not distract the original poster. I moved my questions to this new thread. I hope I don’t lose you.

    https://www.ads-software.com/support/topic/featured-image-as-header-on-posts-pages-with-title-overlay/

    Thread Starter wordpriss

    (@wordpriss)

    Andrew, thanks for your help. I’ve had extra work, and just gotten around to reading your post in detail. I’m sorry for the late reply.

    I made your changes. It looks fantastic. Really coming together!

    I looked at the font code you directed me to, and I even added your example changes to get a feel for how they worked. I am comfortable editing that code to my liking, and I assume I can specify a font there, too, from a limited set of fonts.

    I offer my assumption in that guess-like manner because from my limited understanding of fonts, I seem to recall reading something about how there is just a handful of fonts which can be read by any browser, and that set includes Times New Roman, Georgia, Arial, and a few other basic ones like that (maybe Verdana and something else). Is my understanding correct?

    And (let’s say that I’m right) so if I want to depart from one of those basic fonts, then I will need the easy-google-fonts plugin you mentioned above. (Am I on track so far?) And because most people will want better fonts (myself included, probably), is that why you recommend it up front?

    Having gotten all this stuff squared away, and now rounding it off, we are fast approaching the finish line. I would like to remove the second instance of the headline now, just like we removed the redundant featured post. It would be good if we could keep the byline, though, so our desktop users still know who the authors are.

    I understand these questions are probably making you pull your hair out, just out of the dumb simplicity of them, and I apologize for that. It is really just now that design standards are changing so dramatically we are facing pressure to catch up and look fresh on everybody’s screen at once. You’ve been so kind so far, and I appreciate everything you have done for me.

    • This reply was modified 7 years, 4 months ago by wordpriss.
    • This reply was modified 7 years, 4 months ago by wordpriss. Reason: clarity
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    We’re all taking some of our spare time to help here so don’t worry about replying late ??

    … I seem to recall reading something about how there is just a handful of fonts which can be read by any browser, and that set includes Times New Roman, Georgia, Arial, and a few other basic ones like that (maybe Verdana and something else). Is my understanding correct?

    Yes that’s right.

    And (let’s say that I’m right) so if I want to depart from one of those basic fonts, then I will need the easy-google-fonts plugin you mentioned above. (Am I on track so far?) And because most people will want better fonts (myself included, probably), is that why you recommend it up front?

    Exactly. Using one of those Google font plugins will make available a lot more fonts than the default ones.

    I would like to remove the second instance of the headline now

    The easiest way to do that would be through CSS:

    
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .entry-header .entry-title {
        display: none;
    }
    

    None of your questions have been stressing me, you’ve been very cooperative, calm and patient with me too. This feature has essentially taken 1 week from when we started talking about it and I think that’s pretty good considering our time zones and busyness. I’m in the UK ??

    Thread Starter wordpriss

    (@wordpriss)

    Thank you Andrew. It just occurred to me that removing all the post titles will only look right if there’s a featured image attached to the post. For much of our content – perhaps hundreds of articles – that deletion would destroy readability because there would be no featured image at the top of the page, and therefore no post title, too. Is there a conditional statement we can make in the code that says only if there is a featured image, remove post title?

    Or what would you suggest in lieu of that?

    Thread Starter wordpriss

    (@wordpriss)

    Also, I installed the font plugin, and I look forward to learning how to use it with custom css. Andrew, thank you so much.

    Thread Starter wordpriss

    (@wordpriss)

    Hello everyone!

    I am attempting to use easy-google-fonts to take control of my post titles. Andrew Nevins was helping me in this thread.

    Before Andrew disappeared, he told me the following code, found in my child theme’s style.css, deals with the title font:

    .single-format-standard.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-branding {
        color: white;
    }

    I would imagine connecting that … what do you call the .item behind a period in css, is that a class? I would guess putting that into some field in the plugin’s settings window and telling it how to modify all things under that class (if that’s the right word).

    I just don’t know how to do that.

    https://chronicle.su/society/misunderstood-serial-killer-indignant-after-he-is-mistakenly-identified-as-a-rapist/

    Additionally, I want my post titles to display only if there is no featured image set for that post.

    Here are links to my child theme’s header.php and style.css so you can see how Andrew and I put it all together:

    style.css
    https://pastebin.com/SCvUrBFR
    header.php
    https://pastebin.com/94mUHmMe

    He did most of the work and it’s now so far over my head, I turn to this forum in the hopes someone can understand and help me complete this task. Andrew was great, but I took a few days to get back to him last week and he has since stopped replying.

    Thank you for this~ : )

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘Use featured image as header on posts & pages with title overlay’ is closed to new replies.