Display a featured image on archive/category pages in Harmonic?

  • Unknown's avatar
    mid0nz · Member ·

    Is there a way to display a featured image on a specific category page in Harmonic using CSS?

    All pages and posts in Harmonic display Featured Images prominently at the top of the screen, but my full blog previews, which I’m using a Category menu item to display, don’t display the image. My beta testers said this is really confusing given that every other post/page on my WP site displays a featured image.

    If that’s not possible, is there any other way I can display both a featured image at the top AND a preview of all my blog posts on one page?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, this would be difficult, but it could possibly be done if you had a header image set at Appearance > Customize > Header Image. We could then use the category body class to target that page and then set the existing header image to hidden and add the new image to the parent div something like this (I randomly chose one of your category pages): 

    .category-cinematography .backstretch {
    background: url('URL_OF_IMAGE') no-repeat scroll center top / cover transparent;
}
.category-cinematography .backstretch img {
    visibility: hidden;
}

    You would want to use an image that is the same size recommended for the header image.

  • Unknown's avatar
    mid0nz · Member ·

    Genius! It works! It’s not the same size as the other Featured Images, but it does the job well enough. THANK YOU!

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome!

  • Unknown's avatar
    mid0nz · Member ·

    LOL– I just figured out that Harmonic’s Header image (in the customize menu) displays on all the category and tag pages. But the method above allows you to have different images on different category pages.

  • Unknown's avatar
    thesacredpath · Member ·

    Yes, it does. You can have a different header image on each category page if you wish using this method.

  • Unknown's avatar
    mid0nz · Member ·

    This post is a continuation of the current thread and doesn’t make sense without the above, so I’m not starting a new conversation…

    Perhaps I should give up the ghost and learn to love the smaller header image on Harmonic Category pages rather than try to make the Category header look like the Page Featured Images? Here are some of the things I’ve tried (and failed at.)

    Playing with my Category page (ex. here) I figured out that I can change the size of the Category image with this code: 

    #page.hfeed.site, #custom-header {
background: url('foo') no-repeat scroll center top / cover transparent;
height: 525px;
position: relative;
}

.backstretch {
background-size: 100% 525px;
}

.backstretch img {
visibility: hidden;
}

    (That didn’t really work so I reverted the page linked above back to a Category page with a traditional header.)

    I see why you didn’t send me down that ^ path b/c if I change the header image size with that code, it causes problems when I scroll. The text jumps into the image. Is there anything I can do about that with CSS so I can mimic the effect of Featured Images on this Category page? My next problem would be addressing the “Read More” function, but I figured I could give up on that feature if I could simply make the category header image slightly bigger- say 550px rather than the default 400px so it’s more in line with the Featured Images on pages.

    To make the Category page look more like a regular page, I’ve also tried another method- I added a Page and inserted [display-posts] into the body. My goal was to format the results of the shortcode to look more like the Harmonic post previews on the Harmonic category page. So I’ve been fumbling around with almost no success, trying to tweak the shortcode display. I added

    [display-posts image_size="large" include_excerpt="true" wrapper_class=".display-posts-listing"] then I tried to modify the “display-posts-listing” attributes in the CSS.

    Example: 

    display-posts-listing .title {
font-size:150%;
font-weight:bold;
/* Etc */

    }
    .display-posts-listing .excerpt {
    font-size:100%;
    /* Etc */
    }
    .display-posts-listing img {
    float: center;
    /* Etc */
    }`

    Now I’m way out of my depth! It <strong>seems</strong> to me that the formatting for the Harmonic post preview is done on the Harmonic <article id="post-foo" class="post-foo"> I have no idea whatsoever how to mimic that formatting in the “.display-posts-listing” CSS. For example, I couldn’t do simple stuff like display the medium sized post image on its own line, with the header underneath it, and the post excerpt underneath that.

    The post excerpt on the category page is formatted in Harmonic I <strong>think</strong> with #entry-main, #.entry-content

    Like I said– it’s probably better to learn to love the 400px header image!? I can see why you might want to have distinct templates for Categories and Pages, but I don’t. :-D Posts and Pages use the Featured Image — Categories with the Header image stick out like a sore thumb…

    I’m about to give up and surrender. Do you have another approach I might take?

    Thank you for all your help so far! It’s much appreciated.

  • Unknown's avatar
    thesacredpath · Member ·

    Can you point me to the page you are using the display posts shortcode on? I can look even if it is still a draft page and I can see what I can do to help with the code to style it similarly to the categories pages. We will probably not be able to get them to look completely the same, but we can probably get close.

  • Unknown's avatar
    mid0nz · Member ·

    Here’s a test page with my terrible shortcode formatting first, and then what the Category page looks like in Harmonic below.

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    @mid0nz, we can’t do the metadata at the left when using the shortcode, but we could make things look more similar to the Categories pages. First, open that page and change the image size in the shortcode from medium to large. Next, add the following CSS and see what you think. 

    .display-posts-listing {
    margin-left: 25%;
}
.display-posts-listing .title {
    display: block;
}
  • Unknown's avatar
    mid0nz · Member ·

    Ok– I’m nearly there!

    I can’t figure out how to style
    .display-posts-listing .button to look like Harmonic’s
    a.more-link

    And I’m not sure if there is anything I can do to add those horizontal rules that distinguish the post text from the titles and images. The <hr> lives after the
    ::before in div.entry-content

    If I can’t get an <hr> in there above and below the quotations I’ll have to live with the default Category page.

    Cheers!

  • Unknown's avatar
    thesacredpath · Member ·

    We can add a top and bottom border to the quotes with the following. There was another issue with a width and a left margin for the content, which I have also fixed. I think I got all the changes copied out, so give this a try and see how it goes. 

    .page .excerpt {
    border-top: 2px solid #777;
    border-bottom: 2px solid #777;
    padding-top: 25px;
    padding-bottom: 25px;
    margin-bottom: 25px;
}
body.secondary-sidebar #primary {
    width: 95%;
}
.display-posts-listing {
    margin-left: 0;
}
  • Unknown's avatar
    thesacredpath · Member ·

    Actually, change the width for the second rule to 75% instead of 95.

  • Unknown's avatar
    mid0nz · Member ·

    I think I’ve got the hang of this with your help! It seems that Harmonic’s [display post] shortcode calls the “Excerpt” field if you’ve entered one on posts, and displays that (which is desirable) BUT it doesn’t seem to be updating. I mean it does update eventually, but there’s an indeterminate lag. I can’t find a rhyme or reason. I clear my cache, etc. but I don’t see the update immediately. If I can figure out what text that short code displays (does it display an excerpt first, and if there isn’t one does it go to the post’s body?) and when it updates I think I’m good. Better than good– you’ve been amazing help!

    (I decided to use the default category template b/c of the limitations of doing this on a page, but this is PRECISELY what I need for my Q&A page– a [display post] that looks convincingly Harmonic.)

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, display posts shortcode should update immediately. I’ll have to play around with that and see if I can replicate it.

    Sorry we couldn’t get the shortcode stuff right where you wanted it, but I’m glad it will work out for your Q&A page. Let us know if you have any further questions.

    On excerpts, it should pull first from the Excerpt field, if you have done one, and if one isn’t there, it should pull the first 55 words from the post body.

  • Unknown's avatar
    mid0nz · Member ·

    The same problem occurs if you change a Category description. It can take quite some time to update what the shortcode displays.

    Thanks for the info re: excerpts– Just what I needed to know.

    I have a problem with the custom CSS and the iPad– I opened another thread. It works in the emulator but not on an actual iPad…

  • Unknown's avatar
    thesacredpath · Member ·

    @mid0nz, on the updates to shortcodes, can you try something for me and let me know? Next time you update something and it doesn’t update on your site, can you quickly flush the cache on your browser and then reload the page and see if it updates? Knowing the answer to that would help a lot in troubleshooting this. I want to rule out browser caching as a possible cause.

  • Unknown's avatar
    thesacredpath · Member ·

    I see your other thread on the iPad issue and will get to that as soon as I can.

  • Unknown's avatar
    mid0nz · Member ·

    It’s definitely not a browser issue– I viewed the discrepancy on Chrome (Yosemite & Win 7), as well as Safari, and Firefox (Yosemite).

    I changed the text on my post then I went to my Q&A page but the shortcode didn’t display the changes. Then I cleared my Safari cache, but the shortcode didn’t update. Next I tried Firefox which I’d never used to access the site before. Still no update. It will come through eventually but it’s definitely not immediate.

    It’s something to do with the shortcode b/c changes are reflected immediately to my category page.

    The lag happens with changes to the post Excerpt, the post text body, and category descriptions.

  • Unknown's avatar
    mid0nz · Member ·

    An amendment– I changed the text of the Excerpt on a post and it didn’t update the preview on my categories page, but changes to the text body took immediately.

1 2
  • The topic ‘Display a featured image on archive/category pages in Harmonic?’ is closed to new replies.