resize grid images front page gazette theme

• 

  albalive · Member · Sep 2, 2015 at 8:43 am

  • Copy link
  • Add topic to favorites

  how to resize the grid images shown at the front page of gazette theme?

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

• 

  g471n · Member · Sep 2, 2015 at 12:22 pm

  • Copy link

  Hi albalive

  The following CSS code will resize the images to a maximum height of 137 pixels. This is the height of the shortest image on the page.

  The black spaces on the right and left of some images is as a result of resizing the width in proportion to the maximum 137 pixel height.

  img.attachment-gazette-post-thumbnail.wp-post-image {
      width: auto;
      height: auto;
      max-height: 137px;
      margin-left: auto;
      margin-right: auto;
  }

  To add custom CSS

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  You need to be on the WordPress.com Premium Plan for custom CSS to save.

• 

  albalive · Member · Sep 2, 2015 at 12:40 pm

  • Copy link

  dear your css code works but 137px is really narrow. how to find the shortest image and fix it ?
  i need almost 300px height and 300 width .

• 

  albalive · Member · Sep 2, 2015 at 12:42 pm

  • Copy link

  in first case of 137px i have to find another code to make the black background white. but it’s really so narrow

• 

  g471n · Member · Sep 2, 2015 at 12:51 pm

  • Copy link

  The 101 Boutique Hotel image is the shortest at 137px.

  If you could use images with a standard aspect ratio for the featured image it would really help.

• 

  albalive · Member · Sep 2, 2015 at 12:56 pm

  • Copy link

  where to use them? as featured images? from which section this tumbnail is taken and previewed to first page ?

• 

  g471n · Member · Sep 2, 2015 at 12:57 pm

  • Copy link

  If you don’t mind the aspect ratio changing you could try.

  img.attachment-gazette-post-thumbnail.wp-post-image {
      max-height: 137px;
  }

• 

  g471n · Member · Sep 2, 2015 at 12:58 pm

  • Copy link

  To remove the black background.

  .post-thumbnail {
      background: none;
  }

• 

  albalive · Member · Sep 2, 2015 at 12:59 pm

  • Copy link

  actually the photo of post 101hotel is 640 × 310px

• 

  g471n · Member · Sep 2, 2015 at 1:05 pm

  • Copy link

  Yes, but it’s low height aspect ratio make it very narrow.

• 

  g471n · Member · Sep 2, 2015 at 1:13 pm

  • Copy link

  I think this is closer to what you want. The aspect ratio is a bit out but I don’t think it is very obvious.

  `img.attachment-gazette-post-thumbnail.wp-post-image {
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  }

• 

  g471n · Member · Sep 2, 2015 at 1:14 pm

  • Copy link

  img.attachment-gazette-post-thumbnail.wp-post-image {
      height: 200px;
      margin-left: auto;
      margin-right: auto;
  }