• Resolved braggm

    (@braggm)


    Man, I’m so glad to have found this support forum. May I thank you in advance for your excellent advise.

    I am trying to include a image on the front page. That would seem like a easy task but when I set the featured image at the suggested size of 1230×1230 the results are not great. The cropped rectangle is grainy and off kilter.
    Here is the site I’m working on
    tyretax.mattbragg.com
    When I remove the featured image, the site displays like it should. When I add an image, either it’s too large and caused the browser to cut off the edges (unless I zoom out the browser view) or a smaller image gets scaled to where it looks like crap.

    Is there a optimal image size for the front page?

    Also, I have three child pages on the front page that link to other pages. When clicked, the featured image displays under the nav bar but the image is not cropped in the most optimal position. Is there any way to control which portion of the featured image will display ?
    Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Also, I have three child pages on the front page that link to other pages. When clicked, the featured image displays under the nav bar but the image is not cropped in the most optimal position. Is there any way to control which portion of the featured image will display ?

    Defining a particular crop area is something you’d need a plugin to do. You might like to try this one:

    https://www.ads-software.com/plugins/post-thumbnail-editor/

    When I remove the featured image, the site displays like it should. When I add an image, either it’s too large and caused the browser to cut off the edges (unless I zoom out the browser view) or a smaller image gets scaled to where it looks like crap.

    Is there a optimal image size for the front page?

    1230 x 1230 is the recommended size in the Edin setup guide, but the way Edin is designed, the image does adjust depending on the viewer’s screen size.

    If you’re not happy with the results, you could try uploading a larger image and see how that looks.

    If you still need help, could you provide a direct link to your file in the media library (it’ll probably end with .jpg or .png) so I can test with it and try to see the effect you’re referring to? Thanks!

    Thread Starter braggm

    (@braggm)

    Thank you for your help.

    I have been catching heck with my client. They want beautiful, crisp and sharp images on their site, but can only provide measly web images that are only a few kb in size. I have been having problem getting larger images from my client. Smaller images just won’t do the trick.

    I have yet to get the hang of the post thumbnail editor I installed. Maybe when I figure out where the crops and edits the plug-in creates are stored, I’ll have a better chance of using those edited images.
    I have temporally inserted a large generic image of 1230×1230 size on the front page to test its display. it looks Ok but I need to get a image suitable to my client for this space.

    As far as the first child page featured image, I am using the image below:
    https://tyretax.mattbragg.com/wp-content/uploads/2015/04/Steve-HeadshotBig-2.jpg

    It may do the trick but I need to adjust where the crop of the image takes place. The plug-in you suggested may be helpful, but I really need humungous images to crop down to the right size.

    Bottom line is, I need more suitable images from my client in order to use them in this theme.

    I appreciate all the assistance.

    Thank you.

    Thread Starter braggm

    (@braggm)

    I believe I have made some significant progress this morning. I gave up on using portraits as featured images on child pages because when the child page was rendered, the featured image was displayed as a large rectangle with a random positioned portion of the portrait. That was just too creepy having a just eyes or a partial facial image.

    I created a child theme and edited my new style.css file with the following

    .hero.with-featured-image {
        display: none;
    }

    That got rid of the creepy featured images.

    I then added images inside the page text that looked more normal.

    However, On the page chosen as the Front Page, I no longer have the featured image under the text. I didn’t think the front page would have been impacted by my .css mod as they don’t seen to be in the same div id.

    Any thoughts on how I can regain the front page featured image but lose it on the child pages?

    Thanks

    Moderator Kathryn Presner

    (@zoonini)

    Any thoughts on how I can regain the front page featured image but lose it on the child pages?

    By adding a new selector to target only child pages, you can apply the change only to child pages. So try replacing this:

    .hero.with-featured-image {
        display: none;
    }

    With this;

    .page-child .hero.with-featured-image {
        display: none;
    }

    I just looked at your site’s home page. This is off-topic but hopefully helpful. You have potentially nice images on that page. The operative word is “potential.” I encourage you to optimize them in Photoshop or, absent Photoshop, try the open-source Photoshop-like program, Gimp. The images look washed-out. If you want me to optimize one here, I can show you what I mean and you can take it from there.

    Looks like you got all of your Edin questions answered…

    Thread Starter braggm

    (@braggm)

    Thanks Kathryn. I tried another approach while awaiting your solution. If my client likes what I currently have going them I’m cool. If not the

    .page-child .hero.with-featured-image {
        display: none;
    }
    .css should be the icing  on the cake.

    @ nwwoman I have had a time getting images of decent resolution from my client and that has contributed to the poor image quality on several images. I fiddled with the opacity on the image in the header in order to make the business name more visible. I also am awaiting a better image of Tony. One > 32kb I’m hoping for.

    Thank you for your input.

    I understand the problem with getting quality images from the client. Been there, too! What I do, though, is run them through an optimization process in Photoshop, starting with raw. Take a look at sandscustomcabinets.com — was given some really bad images to start with. Yes, I charged him. And yes, now they get me much better images. :-))

    That said, if you are significantly enlarging an image, sure, that’s going to be a huge problem.

    Good luck!

    $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    echo ‘$feat_image’;

    it dispaly to frantpage in home pade
    i how to display this image
    thank you

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Front Page Featured Image’ is closed to new replies.