Support » Theme: Dyad » Properly align/crop featured images in both single posts and block pages

  • Bobslee

    (@bobsleeuwenhoek)


    I have a lot of featured images that in different screen sizes and thumbnails, the images are sometimes cropped badly, or focusing on the wrong part of the image. I have tried adding background-style='center top' to the style.css or changing the thumbnail sizes in functions.php, but that will change all images the same way. Is there a way to manually adjust individual cases?

    • This topic was modified 3 months, 3 weeks ago by  Bobslee.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi there,

    First, what you describe is by design. The theme center-crops featured images, so depending on the type of device used, the image wouldn’t necessarily still retain the part you want to be visible. In general it’s best to have the most important part of the image in the center for featured images.

    That said, to avoid your CSS from being applied to all images, you can specify specific images by adding the post ID as selector.

    So before the selector you have to target the featured image, add #post-104, substituting the number for the actual ID. You can find the ID if you look at a specific post in the browser inspector.

    This means you’ll have to add custom CSS for each image you want to affect in this case, though, which could become tedious.

    You might be able to override this behaviour with a plugin instead. A quick search in the plugin directory gave me https://wordpress.org/plugins/crop-thumbnails/ which looks like it might do the trick. I haven’t tested that plugin with this theme, so this is not a recommendation, but it’s an option you can look into. Please post in the forum for that plugin to get confirmation from the author if it would actually work for what you’re trying to do.

    Bobslee

    (@bobsleeuwenhoek)

    Thanks for the help. I will try that. One final question regarding this theme: is it possible to change the text of the ‘Previous post’/’Next post’ navigation links at the bottom of a single page?

    The better way to do that would be using a child theme, where you’d change the text directly in the single.php file, but I’m not able to help with that level of customization.

    However, there’s a way to do it using CSS as well. Add the following code, and substitute the text in quotes with what you want to show.

    /* Replace Previous/Next text in post navigation links with custom text */
    
    .is-singular .post-navigation .nav-links span.nav-subtitle {
      font-size: 0;
    }
    
    .is-singular .post-navigation .nav-links .nav-previous span.nav-subtitle::before {
      content: "New Previous Text";
      font-size: initial;
    }
    
    .is-singular .post-navigation .nav-links .nav-next span.nav-subtitle::before {
      content: "New Next Text";
      font-size: initial;
    }

    Normally this wouldn’t work, as replacing text using CSS in this way would remove the link with no way of adding it back, but in this theme’s case the link is applied to the entire block which includes the post title as well, so we’re able to get away with it.

    Bobslee

    (@bobsleeuwenhoek)

    Thanks. I am using a child theme, so I have been making a lot of modifications to the code. Is it also possible to place the ‘previous’ and ‘next’ blocks next to each other instead of above one another?

    This should do it:

    @media only screen and (min-width: 680px) {
      .is-singular .nav-previous, .is-singular .nav-next {
        display: inline-block;
      }
      .is-singular .nav-previous {
        margin-right: 30px;
      }
      .is-singular .nav-next {
        margin-left: 30px;
      }
    }

    The media query will ensure that on narrower, mobile screens, the links still appear below each other.

    It’s not perfect, though, and if you have post with variable title lengths you might get inconsistent results. I’m not sure how to prevent that.

    Bobslee

    (@bobsleeuwenhoek)

    Once again thank you. It seems a bit unpredictable indeed. And as a final question: what is the use of the link used for the date that you can add to a single post using the Customisation menu? I thought it would send me to a page containing all posts of that date, but it just refreshes the page…

    That link is the permalink for the post, yes, not an archive page for the date.

    I don’t know why it’s that way, but I checked several themes, including the current default WordPress theme, Twenty Nineteen, and they all work that way – the publication date on a post, if visible, links to the permalink for that specific post. So my guess is this behavior comes from WordPress itself, with the theme only controlling whether or not the date is displayed on posts, and how it is styled.

    I’m sure it would be possible to change where that date linked to if you wanted, but that’s a better question for the general support forums.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.