Dyad Theme – blog post featured image size
-
Hi. I’ve had quite a bit of feedback from my readers on the way Dyad presents blog posts when viewed on a desktop. The theme takes the featured image, and makes it static on the left hand side of the page. Many people have said that it’s too big.
Example:
This is the “standard” post option. I’m wondering if there is a way of reducing the size of it, leaving more space for the main body of the article?
There is an alternative posting option called “image” which places the image at the top of the page, but I don’t like the way it hacks the image up. By way of example, I’ve changed an old post to show how this appears:
The blog I need help with is: (visible only to logged in users)
-
Hi there!
Have you heard feedback that their browsers aren’t adjusting it properly so the image takes over more of the screen than intended or reduces the blog post line to smaller than it should? If so, any details you can provide on that would be great so we can check it out.
If not, and they mean the design in general, you may want to consider using a different theme if you have many readers who struggle with this (probably depends on your audience) or using the Image post format, as you’ve tried on the older post.
The Dyad theme has the two layout options for individual posts, depending on if you set it to Standard or Image post format, as you’ve shared above. It’s doesn’t have other options for set sizes, but is made to be responsive, so it adjusts based on screen size automatically for best viewing.
The current blog post line length is right in the range of what’s said to be an ideal line length for easily reading things online. There’s some information on that here if you’re interested in details: https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/.
Let me know if you have any questions! :)
-
Thank you Sarah. I get the impression its a preference thing for some users. The issue (for those that don’t like it) is clearly to do with the theme itself rather than any local hardware/screen scaling issues.
Can the CSS be tweaked by me to reduce the amount of space the left hand image takes up?
-
Hi Tony,
The width of the left hand image could be reduced with some custom CSS. By default, the image and the post’s content area both take up 50% of the screen.
You could use the following CSS to change the widths of both the image and the content area:
.has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header, .is-singular .entry-media { width: 30%; } .is-singular:not(.home) .site-inner { width: 70%; }The first width in the above snippet defines the width of the image and the second defines the width of the content area. You can experiment with the values of both to get the look that feels right for you.
It’s worth noting that the ability to add CSS is a Custom Design option that’s only available with one of our paid plans.
If you’d like, you can navigate to My Site > Customize > Custom Design and then “Try Now” to preview how your site would look with the CSS before upgrading to a paid plan.
If you don’t wish to upgrade, then an option is to assign the Image post format to your posts to give them the alternative layout for this theme.
Let me know if that’s helpful or if you have any other questions.
-
Thanks for this Siobhan – I can see the effect in preview. reducing the image size seems to crop it width ways as well? (rather than just shrinking it). It’s hard to tell as having the customiser open further optimises the site! I’ll have a play and see what’s best. Much appreciated!
T
-
Hi Tony,
You’re right that the previous CSS cropped the featured image, but you could override the cropping with the following:
.is-singular .entry-media { background-position: 0 50%; }Hope that works out for you. :)
-
Thanks for the above solutions. Is there anyway to have a featured image but it not appear at the top of each when in the ‘image’ format mode rather than the ‘standard’ format mode?
-
@juicyluce9: You could remove the featured image on posts that have been assigned the “image” post format using some custom CSS.
If you’d like some help with the specific custom CSS that’s needed then please start a new forum thread on our dedicated CSS forums:
https://en.forums.wordpress.com/forum/css-customization#postform
Please include links to your site and as much detail as possible.
-
Well I’ve found the whereabouts of the code for the featured image in the content-featured-img part of the Editor now it’s just a question of how to minimise the banner after the featured image has been removed.
<div class="site-banner-media"> <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'dyad-banner' ); ?> <div class="site-banner-thumbnail" title="<?php the_title_attribute(); ?>" <?php if ( has_post_thumbnail() ) { echo 'style="background-image: url(' . esc_url( $thumb[0] ) . ');"'; } ?>></div> </div> -
have found a better workaround. The CSS is as follows:
.single-format-image.has-post-thumbnail .content-area { margin-top: 5%; } .single-format-image.has-post-thumbnail .content-area { margin-top: 5%; } .single-format-image.has-post-thumbnail .site-banner-media { display: none; } -
@juicyluce9: I’m glad you’ve found a workaround. If you’d like help then please start another thread.
The original poster is likely receiving an email notification for each reply despite their question being answered. In addition, it’s easier for us to triage and help when separate issues are posted to separate threads.
Here’s the direct link for you to start a post on our CSS forums:
https://en.forums.wordpress.com/forum/css-customization#postform
Thanks!
-
Hello again. I’ve implemented the code suggested, which reduces the main image to 40% of the screen, and the increases the copy to 60%. The improvement can be seen here:
However, I’ve noticed an issue on mobile devices – for some reason the title of posts has now bunched up to the left hand side of the screen, making it decipherable. Before I made this change, the title would be nicely centered on mobile screens.
Is there a way to fix this?
Thanks
-
To clarify:
I’ve entered this CSS code:
.has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header, .is-singular .entry-media { width: 40%; } .is-singular:not(.home) .site-inner { width: 60%; }Which as well as adjusting the post pages on desktop as discussed above, also seems to affect the way the post title is displayed on a mobile device.
The blog I need help with is http://www.arcadeblogger.com
-
Hi Tony,
You could wrap a Media Query around the snippet I gave you. Media Queries are a way of only targetting devices of a certain width with your CSS.
The following, for example, will only change the width of your images and content on devices that are 1200px or wider:
@media only screen and (min-width: 1200px) { .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header, .is-singular .entry-media { width: 40%; } .is-singular:not(.home) .site-inner { width: 60%; } }Let me know if that solution works out for you.
-
-
- The topic ‘Dyad Theme – blog post featured image size’ is closed to new replies.
WordPress.com Forums 