Dara Featured Images

  • Unknown's avatar
    echealthycommunities · Member ·

    I’m encountering a problem with the Dara theme when adding a featured image to a news post or to a site. When I add a featured image, the featured image gets manipulated and placed such that it’s behind the text of the post or page. Is there any way that I can change the CSS so that the featured image reaches a certain size and is placed directly above the page/post instead of behind it?

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

  • Unknown's avatar
    gemmacevans · Member ·

    Hi echealthycommunities,

    When I add a featured image, the featured image gets manipulated and placed such that it’s behind the text of the post or page.

    Would you be able to send a link to an example post or page where the featured image is being manipulated? I just want to make sure I’ve understood what you are referring to, first :)

    You can either reply here with a link or start a chat and we’ll be happy to take a look for you.

  • Unknown's avatar
    echealthycommunities · Member ·

    https://echealthycommunities.org/health-data/

    Hi gemmacevans, thanks for your reply. It looks like the image is scaled and cropped, and then instead of looking like the front page image (https://echealthycommunities.org/), the image extends downwards around the lefthand side of the message. Is there anyway to maintain the look and feel of the homepage on the rest of the pages?

  • Unknown's avatar
    familymentalwealth · Member ·

    Can you tell me how I can set the Dara theme so that the featured image does NOT show on the page. I need to have a featured image so that it shows on the grid (see https://familymentalwealth.com/FamilyFiles) but I then don’t want that featured image to show on the actual page (see https://familymentalwealth.com/familyfiles/the-abcde-tool-for-spotting-the-early-signs-of-an-eating-disorder/ – this page would look much better if it didn’t have the featured image at the top

  • fstat · Staff ·

    @familymentalwealth – Please start your own thread from the link below, add the tag modlook and we’ll get back at you. Posting in other people’s threads makes it difficult to support both you and the original poster. Thanks!

    https://en.forums.wordpress.com/?new=1

  • Unknown's avatar
    echealthycommunities · Member ·

    Hi there,

    If anyone can provide assistance, I’m still looking for a solution to this problem. The way featured images are being handled dampens the style of the site pretty severely, especially since featured images are pretty key to getting attention in our news grid. Most recent example is this news item:
    https://echealthycommunities.org/news/time-to-celebrate/

    Thanks for any feedback you are able to give.

  • staff-doublebassd · Staff ·

    Hey there @echealthycommunities,

    Please add this code to additional CSS under Appearance > Customize

    @media screen and (min-width: 1000px) {
.post-thumbnail+.entry-header {
    margin: 86px 0 0 175px;
}
}

@media screen and (min-width: 1000px) {
.entry-body {
    margin-top: 6.0em;
    padding: 0 0 0 211px;
}
}

    Let me know if you have any questions. Thanks!

  • Unknown's avatar
    echealthycommunities · Member ·

    Hi staff-doublebassd,

    Thanks for the reply. That modifies the posts for news content, but still doesn’t quite fix the issue–some news images are still too large and are not flush with the content at the top of the page. Plus the code doesn’t impact the featured image on pages like https://echealthycommunities.org/healthy-relationships/. What I’m trying to mimic is the home page look on the rest of the pages…do you have any other advice? I appreciate you supplying code but what I’m really looking for are pointers on where to look so that I can learn a little bit about modifying these themes, too.

    Thank you!

  • supernovia · Staff ·

    Hi @echealthycommunities, we have a bunch of resources here:
    https://en.support.wordpress.com/?s=css

    Generally speaking, most of us are using Inspect Element to test out code and find what works best. There are videos out on the web showing how to do this.

    That said, this particular edit sounds like it could be a bit more intermediate, so we’re happy to help you come up with the right code if we can fully understand what you’re aiming for.

    It sounds to me like you want all featured images (on posts and pages) to be as short as the one on the front page, and for the content to never overlap it. If that is correct, is this closer to what you want (just for the pages)?

    @media screen and (min-width: 1000px) {
.hero .entry-thumbnail {
		max-height: 296px;
		overflow: hidden;
}
}

@media screen and (min-width: 1000px) {
.content-wrapper.with-featured-image {
    margin: 3.2em;
}
}

    I understand if this is correct, you’ll likely want something similar on posts, but first, I wanted to note the featured images on posts in this theme are designed to be narrower so the sidebar fits up on the right. Are you okay with that or are you hoping to have that changed as well?

    And, if we’re still totally not catching the vision, could you possibly link to a site, or send a quick sketch of what you’re after for pages and posts?

  • Unknown's avatar
    echealthycommunities · Member ·

    Thanks for your response @supernovia. I’ll dig through that when I have time to check in on it.

    What you’ve supplied truly helps with the site pages, but because of some unintended consequences on news posts I’m leaving that change unpublished. What shows on the health data page would be the goal. So for that page and a few others, it’s perfect. Thank you. Is there any way that I can select what portion of the image is cropped to fit that space without extensive camera work? Also, some images are not large enough to span the top of the page, I assume that I can upload some high-res photos to ensure that they do?

    Currently the text in news posts get overlapped, like in this picture. The photos that are used for those posts will generally be smaller, so if they could be centered and placed above the body of the post, that would be great. Otherwise I would love to see something similar to the page setup that is pictured above.

    Thank you again for your help, this is lovely.

  • supernovia · Staff ·

    but because of some unintended consequences

    You can make the CSS more specific if needed, down to the individual page.

    You’d look up the page ID (easiest to find via inspect element, IMO) and make adjustments accordingly.

    Noting one of your screenshots shows a *post* and the other shows a *page* so if pages are working with that CSS but posts are suffering for it, try this:

    @media screen and (min-width: 1000px) {
.page .hero .entry-thumbnail {
		max-height: 296px;
		overflow: hidden;
}
}

@media screen and (min-width: 1000px) {
.page .content-wrapper.with-featured-image {
    margin: 3.2em;
}
}

    See the difference? Now it only applies to pages.

    For posts, if you’ll answer this question we’ll see what we can recommend:

    I understand if this is correct, you’ll likely want something similar on posts, but first, I wanted to note the featured images on posts in this theme are designed to be narrower so the sidebar fits up on the right. Are you okay with that or are you hoping to have that changed as well?

  • Unknown's avatar
    echealthycommunities · Member ·

    @supernovia

    Thank you again; I do see the difference. I had a separate line of code still in my additional CSS that was distorting the news posts, the problem was not with the code that you supplied. I do see how adding “.page” makes a difference, and I may need to shuffle images around based on the page. If I need to do so, where would I insert the [page id] in order to only modify a specific page? Would it look something similar to this?


    @media     screen and (min-width: 1000px) {
    .page-id-## .hero .entry-thumbnail {
    max-height: 296px;
    overflow: hidden;
    }
    }

    And yes, I would like to do something similar with posts. I would certainly be fine if the featured images on posts are narrower, allowing the side bar to stay where it is. This may be easier for users to distinguish between news posts and pages, as well as provide room for a news widget.

  • Unknown's avatar
    echealthycommunities · Member ·

    I tested the .page-id-## above and it worked well for my needs, should allow us to touch up a few specific pages. I also took a second look at the earlier solution and applied some of that to .posts and I’m almost there, I just can’t seem to get it to show the proper amount of the image because the entry-header or body blocks some of it. any more thoughts? Here is an image of one example.

    Again, thank you for your assistance, you have been marvelous.

  • supernovia · Staff ·

    Good job figuring out the .page-id-## thing! And helping you has been delightful. I’m glad it’s clicking for you.

    About the too-small image: the image for that particular post is too small to fit well — 620×273 vs the specs listed here:

    – The Featured Image on the front page and on pages works best with images at least 1180 wide.
    – Featured Images for posts should be at least 880 wide by 312 tall.

    You could hide the featured image for that post alone, on that page alone:

    .single.postid-986 .post-thumbnail {
    display: none;
}

    I noticed some other posts have that issue as well, though. So you could consider hiding the featured image on all single-post pages, and simply add the image in the content of each post instead. I want to say there’s a setting in Dara’s content options for that if you’re interested. Or there’s CSS for that as well (just drop the .postid-### from the code above).

    The caveats: you’ll need to go back and add images to the post body. And if you switch to to another theme, you could see duplicate images (once featured and once in the post) unless you use CSS or other settings to specify otherwise. But while the CSS would likely be a bit different, figuring out what to use isn’t too bad. :)

  • The topic ‘Dara Featured Images’ is closed to new replies.