Featured Image Resolution and Sizing

Great, let’s solve these last two issues!

For the image height, the part between the “/* */” is just a comment and isn’t used – I could have made that clearer. The following CSS will work:

#tracks-child .entry .featured-image {
  padding-bottom: 25%;
}

For the cropping, the theme always centers the image. For example, if the image is wider than the space available, the left and right side will be cropped equally leaving the image centered.

I would first adjust the height with the CSS above and then see how the images look. Then, you can find the new width:height ratio and crop your images accordingly.

Thanks, Ben. I tried the code above but it still looks the same. Going lower than 25% didn’t help either.

I just checked out the child theme’s style.css and it looks like the */ that ends the comment on line 8 got removed. This means the entire file is being commented out which is why the changes aren’t taking place.

Here’s how it should look:

/*
 Theme Name:   Tracks Child
 Template:     tracks
*/

@import url("../tracks/style.min.css");

/* =Theme customization starts here */

#tracks-child .entry .featured-image {
  padding-bottom: 25%;
}

a:link {
    color: #900;
}
a:active, a:focus, a:hover, a:visited {
    color: #099;
}
article a {
    text-decoration: none;
}

/* optional - make links full opacity */
#tracks-child .social-media-icons a,
#tracks-child .social-media-icons a:link,
#tracks-child .social-media-icons a:visited {
  opacity: 1;
}
/* change colors of facebook & twitter icons */
.fa-facebook-square {
  color: #3b5998 !important;
}
.fa-twitter-square {
  color: #55acee !important;
}

You can either copy and paste that into your stylesheet or simply change line 8 to this:

/* =Theme customization starts here */

That should do the trick ??

Ahhh, so that’s it! Fixed the image size issue (and the other changes I made now showed up, too!).

Still having trouble with the positioning of he featured image. Have tried 3 diff’t plugins – most effective is Post Thumbnails Editor, which let’s me edit both the “thumbnail” and “blog” size image. I do that, save and update post (even tried deleting and re-inserting feature image) and it reverts back to wherever it wants in the image.

Have to go in and set featured image for 5 yrs of posts, so want to get it right before I do that! Thank you for ALL of your help, Ben!

Yea no problem!

Not sure if this will be helpful, but the positioning of the featured images are controlled by the background-position CSS property. It can’t be used on an individual basis, but you could bulk adjust the positioning of the images up/down/left/right.

The following would keep it set to the middle:

#tracks-child .featured-image {
  background-position: 50% 50%;
}

The first percentage controls the left/right positioning and the second percentage controls the up/down positioning.

That seems to have worked. I’ll just have to be selective about which images to use as features since I can’t control the percentage on individual pages. Thanks again, Ben.

You’re welcome ??