Amerpsand: Changing Image Size on a Portfolio Page

• 

  jjcha314 · Member · Jul 27, 2015 at 9:07 pm

  • Copy link
  • Add topic to favorites

  On a portfolio page, can I change the image size of the featured images for the portfolio child pages?

  The images are pretty large on the default portfolio page.

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

• 

  supernovia · Staff · Jul 27, 2015 at 9:25 pm

  • Copy link

  This makes the images and the text columns each take up 50% of the width. You could adjust those numbers as you’d like.

  Also, you might need to test this on phones and adjust the min-width accordingly.

  @media screen and (min-width: 320px)
  	{
  	.portfolio-columns .portfolio-featured-image {
  		width: 48%;
  	}
  	.portfolio-columns .portfolio-column-text {
      width: 50%;
  	}
  }

• 

  jjcha314 · Member · Jul 29, 2015 at 8:01 am

  • Copy link

  Thanks. I implemented the change and it lets me adjust the width of the text and image column. But now, unfortunately, the image column is now flush with the right edge of the browser window, and no longer has the white margin on the right side. Is there any way I can get this back?

  Best,

  -Jason

• 

  jjcha314 · Member · Jul 29, 2015 at 8:04 am

  • Copy link

  Also, can I have the image resize down? E.g., if I change the text column to 75% and the image column to 25%, the image, instead of resizing down to fit in that 25% image column, simply gets cropped on the right.

  Ideally, I’d like to set the size of the image at a certain number and have the text fill the width of the page (with some spacing around said image so that the text doesn’t butt up against it, as well as the margins to the right and left to the page).

• 

  thesacredpath · Member · Jul 30, 2015 at 6:53 pm

  • Copy link

  @jjcha314, can you point to an example portfolio page that I can take a look at? The site you referenced is using Edin. I did find one of your sites, https://gelineauandking.wordpress.com/ , that is using Ampersand, but it doesn’t have any Portfolio.

• 

  jjcha314 · Member · Jul 30, 2015 at 7:06 pm

  • Copy link

  Yes that is the correct website. this is where the portfolio displays

  https://gelineauandking.wordpress.com/books/

  here is one of the child pages

  https://gelineauandking.wordpress.com/books/a-reaper-of-stone-2/

  thank you!

• 

  jjcha314 · Member · Jul 31, 2015 at 9:55 pm

  • Copy link

  I solved my own question by learning a little something about css. To get it to do what I wanted it to do, I had to override the default of the width of the columns as well as change the size of the image itself. supernovia was a big help in introducing me to the concept of the min-width as that was necessary for it to not mess up how the pages looked on a phone or tablet and getting me started. Here is the full CSS customization

  @media screen and (min-width: 1000px) {
  .portfolio-columns .portfolio-featured-image {
  width: 50%;
  }

  .portfolio-columns .portfolio-column-text {
  width: 45%;
  }

  img.attachment-portfolio-thumb {
  width: 500px !important;
  }

  .portfolio-single #secondary {
  width: 45%;
  }

  .portfolio-single #primary {
  width: 50%;
  }

  img.attachment-post-image {
  width: 500px !important;
  }
  }

• 

  thesacredpath · Member · Aug 1, 2015 at 4:19 am

  • Copy link

  @jjcha314, nice job of figuring that out!