theme 2017: less height for featured images

• 

  manuschwendener · Member · Apr 16, 2017 at 8:26 pm

  • Copy link
  • Add topic to favorites

  Hi
  I would maybe like to switch to Twentyseventeen, but to do that I need to be able to reduce the height of the featured images.

  I tried uploading a picture in the format 2:1, but it just gets cropped to fill the whole screen again.

  But I’d want to show the whole width picture and the start of the text on the same page.

  Thank you :-)

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

• 

  kathrynwp · Staff · Apr 17, 2017 at 8:01 pm

  • Copy link

  We can reduce the height of featured images with custom CSS. Different code may be needed depending which specific images you’d like to affect – for example, the panels on the front page may need different CSS than featured images on pages or posts.

  This CSS would reduce the height of featured images on single posts and pages, for example:

  .single-featured-image-header {
    height: 500px;
  }

  You can modify the height value as you like, and if you wanted it to apply only on certain screen sizes, you can add a media query to it.

  If you need further help, just let me know where else you’d like to change the height of the featured image, or let me know if you need any help with media queries. Once your site is running Twenty Seventeen, I’d also be glad to take another look and we can fine-tune from there.

• 

  manuschwendener · Member · Apr 17, 2017 at 8:57 pm

  • Copy link

  Hi Kathryn

  Thanks a lot. Unfortunately, it is not doing what I need.

  I would upload a picture in the dimensions of (say) 3:1, because I want to decide what to show on the picture.

  Then it should be shown without being cropped by wordpress on:

  1)
  – the blog post (https://ubblogtest.wordpress.com/2017/04/08/first-blog-post)
  or
  – the page (https://ubblogtest.wordpress.com/impressum)

  2)
  – the blog page (https://ubblogtest.wordpress.com/alle)
  – the blog part ‘Post with featured image’ on the homepage (https://ubblogtest.wordpress.com)

  3)
  – the page part ‘Impressum’ on the homepage (https://ubblogtest.wordpress.com)

  So the easiest solution would be if I could upload the picture in any dimension I want and it would just be stretched to fill 100% of the screen, without getting cropped.

  > Once your site is running Twenty Seventeen, I’d also be glad to take
  > another look and we can fine-tune from there.

  Actually I have a long list of elements I’d like to tweak, some of them clearly inconsistencies in the theme. Not sure if this is the right place though?

• 

  manuschwendener · Member · Apr 17, 2017 at 9:10 pm

  • Copy link

  (As there’s not edit function here):

  > “it would just be stretched to fill 100% of the screen”

  I don’t mean “stretch (= distort) the picture”, but “use the picture I uploaded to fill 100% of the width, no matter how high the picture is.

• 

  manuschwendener · Member · Apr 18, 2017 at 7:16 am

  • Copy link

  [Reverting the changes for the moment.]

• 

  kathrynwp · Staff · Apr 18, 2017 at 3:34 pm

  • Copy link

  Then it should be shown without being cropped by wordpress on:

  1)
  – the blog post (https://ubblogtest.wordpress.com/2017/04/08/first-blog-post)
  or
  – the page (https://ubblogtest.wordpress.com/impressum)

  You need to add a height declaration in the CSS to override the default height in the theme. I see that right now you’ve added:

  .single-featured-image-header {
    height: 300px;
  }

  That height is causing the images to be cropped, so you might want to try a higher number.

  – the blog part ‘Post with featured image’ on the homepage (https://ubblogtest.wordpress.com)

  The panel cropping happens directly on the images, so I don’t see a way to make the images taller here.

  Actually I have a long list of elements I’d like to tweak, some of them clearly inconsistencies in the theme. Not sure if this is the right place though?

  Feel free to start new threads for additional CSS help – keeping to a couple of tweaks per thread is helpful.

• 

  manuschwendener · Member · Apr 18, 2017 at 9:01 pm

  • Copy link

  Thank you, Kathryn

  > That height is causing the images to be cropped, so you might want to try a higher number.

  That is not my proplem. My problem is that I can’t upload a picture that is cropped as a stripe and then display that stripe on the page.

  I’ll go and look for a good example, will post link later.

• 

  kathrynwp · Staff · Apr 18, 2017 at 10:06 pm

  • Copy link

  Sounds good – an example might help me understand better what the issue is. Thanks!

• 

  manuschwendener · Member · Apr 18, 2017 at 10:46 pm

  • Copy link

  Examples:

  1) Post with featured image behaves as I would like it to:

  https://ubblogtest.wordpress.com/2017/04/08/first-blog-post

  – No need to alter CSS, image just adapts in width to screen size, without being cropped

  – The picture looks like what I have uploaded: https://ubblogtest.files.wordpress.com/2017/04/2017_2_3.jpg

  – Also works correctly on https://ubblogtest.wordpress.com/alle

  -> Would be very nice if the picture also was visible in the one column layout on https://ubblogtest.wordpress.com

  2) Page with featured image

  – Works like expected on the page itself:
  https://ubblogtest.wordpress.com/impressum

  – I would like to see this image on https://ubblogtest.wordpress.com, uncropped, in the format 3:1.
  Which would mean the picture would fill less of the height of the screen, which is what I want to achieve.

  3) Featured image for the welcome message
  – This is featured picture for the welcome text, format 3:1:
  https://ubblogtest.files.wordpress.com/2017/04/2017_1_3.jpg
  – It should be displayed in format 3:1 on https://ubblogtest.wordpress.com, uncropped, filling less in height.

  4) Ditto for the header media:
  – I would like to upload only a stripe as a background to my blog title – this should not get cropped but be displayed in he dimensions I gave it.
  

• 

  kathrynwp · Staff · Apr 19, 2017 at 2:00 pm

  • Copy link

  Thanks for the additional details.

  For 2 & 3, give this a try:

  #panel2 .panel-image {
    height: 500px; /* reduce height of plant */
    background-size: contain; /* remove background stretch */
  }
  #post-2 .panel-image {
    height: 500px; /* reduce height of people at table */
    background-size: contain; /* remove background stretch */
  }
  
  #panel2 .panel-image::before, #post-2 .panel-image::before {
    background: none; /* remove gradient effect so no grey bar visible */
  }

  I’ll answer the other parts separately.

• 

  kathrynwp · Staff · Apr 19, 2017 at 2:15 pm

  • Copy link

  1) Post with featured image behaves as I would like it to:

  https://ubblogtest.wordpress.com/2017/04/08/first-blog-post

  – No need to alter CSS, image just adapts in width to screen size, without being cropped

  – The picture looks like what I have uploaded: https://ubblogtest.files.wordpress.com/2017/04/2017_2_3.jpg

  – Also works correctly on https://ubblogtest.wordpress.com/alle

  -> Would be very nice if the picture also was visible in the one column layout on https://ubblogtest.wordpress.com

  Featured images within individual blog posts are not output on the homepage when you select the blog as a page panel – that’s not something that can be changed with CSS.

• 

  kathrynwp · Staff · Apr 19, 2017 at 2:16 pm

  • Copy link

  4) Ditto for the header media:
  – I would like to upload only a stripe as a background to my blog title – this should not get cropped but be displayed in he dimensions I gave it.
  https://ubblogtest.files.wordpress.com/2017/04/current_header1.png

  I’m getting a “file not found” error for that image. Let me know if there’s another.

• 

  manuschwendener · Member · Apr 19, 2017 at 8:14 pm

  • Copy link

  > give this a try:

  Thank you!

  My CSS at the moment:

  #panel1 .panel-image {
    height: 300px; /* reduce height of plant */
  }
  #panel1 .panel-image::before, #post-2 .panel-image::before {
    background: none; /* remove gradient effect so no grey bar visible */
  }
  
  #panel2 .panel-image {
    height: 300px; /* reduce height of plant */
  }
  
  #panel2 .panel-image::before, #post-2 .panel-image::before {
    background: none; /* remove gradient effect so no grey bar visible */
  }
  
  #post-2 .panel-image {
    height: 300px; /* reduce height of people at table */
  }

  This makes the two pictures on https://ubblogtest.wordpress.com behave exactly as I wanted :D

  [more following below]

• 

  manuschwendener · Member · Apr 19, 2017 at 8:37 pm

  • Copy link

  Post with featured image is behaving strangely:

  – It works perfectly well if I set either of those two as featured picture:
  https://ubblogtest.files.wordpress.com/2017/04/2017_5_3.jpg
  https://ubblogtest.files.wordpress.com/2017/04/2017_2_3.jpg

  Both are cropped 3:1 and are displayed 3:1 on https://ubblogtest.wordpress.com/2017/04/08/first-blog-post and https://ubblogtest.wordpress.com/alle.

  But if I set https://ubblogtest.files.wordpress.com/2017/04/basel-_3.jpg as featured picture (which is also cropped 3:1), it gets displayed as https://ubblogtest.files.wordpress.com/2017/04/basel-_3.jpg?w=2000&h=1200&crop=1 on https://ubblogtest.wordpress.com/2017/04/08/first-blog-post and https://ubblogtest.wordpress.com/alle

• 

  manuschwendener · Member · Apr 20, 2017 at 5:45 am

  • Copy link

  > I’m getting a “file not found” error for that image.

  Sorry for that.

  Now that the big photos on home can be displayed less high I don’t need a header picture.

  But I would like to make the background behind the blog title another colour (#A5D7D2), change the font colour of the title and the tagline and ideally reduce the height of the title element a little.

• 

  kathrynwp · Staff · Apr 20, 2017 at 5:32 pm

  • Copy link

  But I would like to make the background behind the blog title another colour (#A5D7D2), change the font colour of the title and the tagline and ideally reduce the height of the title element a little.

  This should do the trick for the background colour and height of the header:

  .site-header {
    background-color: #d4feff; /* change background colour of header */
    max-height: 230px; /* change maximum height of header */
  }

  If you also want to change the header height on smaller mobile screens, you can add a couple of media queries targetting smaller screens specifically.

  You can learn more about using media queries that target certain screen sizes here:

  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  Media Queries for Standard Devices

  
  http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

  For the colour of the site title and tagline:

  .site-title a {
    color: #bb00bb;
  }
  .site-description {
    color: #000000;
  }

  Change all the colour codes to whatever you prefer!

• 

  manuschwendener · Member · Apr 20, 2017 at 9:02 pm

  • Copy link

  Thank you, Kathryn, that works very well :-)

• 

  kathrynwp · Staff · Apr 20, 2017 at 9:48 pm

  • Copy link

  Glad to hear that does the trick! I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.