Oxygen theme: how to display different crops of same image for different views?

• 

  janeven · Member · Dec 20, 2012 at 10:14 pm

  • Copy link
  • Add topic to favorites

  I’m using Oxygen theme, which uses a single blog post image in 3 different sizes: 750 x 380 for the front page slider, 470 x 310 in the blog post, and 470 x 140 for the blog post thumbnail that appears with most recent blog posts on the home page. Because of the extreme horizontal aspect ratio of the thumbnail, some images in home page section of most recent posts look bizarrely cropped. In Forums there was a suggestion to add a featured image to blog post that is cropped and sized to 470 x 140. But how can I do that and still keep the image a more normal aspect ratio when you are viewing the blog post as its own page or in the home page slider?
  Alternatively, is there a way to hide home page thumbnails of most recent posts on a per-post basis if the crop would look bad?
  Look at post entitled Front Page Photo 3 for an example of the problem I am trying to fix.
  Thank you,
  Jan
  Thank you, Jan

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

• 

  kathrynwp · Staff · Dec 21, 2012 at 5:37 pm

  • Copy link

  Hi there – a workaround to hide the thumbnails on posts where you don’t like the cropping would be to hide them using some CSS code.

  You can add CSS through our Custom Design upgrade. An example of what the code would look like for the “Front Page Photo 3” is:

  .post-215 .attachment-archive-thumbnail,
  .post-215 .cat-links,
  .post-215:hover a.read-more {
  	display: none;
  }

  You would repeat this block, editing the post ID as needed, for any other posts where you wanted to hide the thumbnails.

  Just let me know if you need further help.

• 

  janeven · Member · Dec 21, 2012 at 8:54 pm

  • Copy link

  Thanks very much. I have never worked with CSS before. Would I paste this into each blog post in which I want to hide the thumbnail from appearing on the home page, or do I paste it into the home page?

• 

  zandyring · Staff · Dec 21, 2012 at 9:31 pm

  • Copy link

  Hi there,

  You wouldn’t add this to the post itself, you would add this to the Custom CSS page (Dashboard > Appearance > Custom Design > CSS tab). In order to save to the Custom CSS, you would have to purchase the Custom Design upgrade.

  So if you had three posts that you wanted to work this bit of CSS magic on, and they had the post IDs of 215, 277, and 300, you’d want to make sure your CSS read like

  .post-215 .attachment-archive-thumbnail,
  .post-215 .cat-links,
  .post-215:hover a.read-more {
  	display: none;
  }
  
  .post-277 .attachment-archive-thumbnail,
  .post-277 .cat-links,
  .post-277:hover a.read-more {
  	display: none;
  }
  
  .post-300 .attachment-archive-thumbnail,
  .post-300 .cat-links,
  .post-300:hover a.read-more {
  	display: none;
  }

  I hope that helps!

• 

  janeven · Member · Dec 22, 2012 at 2:46 am

  • Copy link

  Thank you, I get it now.

• 

  kathrynwp · Staff · Dec 23, 2012 at 4:59 pm

  • Copy link

  Great – glad to hear it. Just let us know if you need anything else.