Limiting size of vertical images on portfolio pages

Rob

Hi,

I have several portfolio pages and horizontal images look great, but vertical images don't because when they appear they are resized to fill the page which makes them bigger than the original file. I don't want to upload bigger files - I'd rather have the vertical images appear smaller. Is there a way to set a maximum size for them so they don't appear so big.

Thanks!

-Rob

Argone

Hi,

Image size is set in three files. Firstly in php file by crop function. Second dependancy css file and third js file.

Please send me a screenshot how would you like to set it on your page and i will try to apply it in this files to create your skyfashion customization.

Kind regards

Rob

Attached is a screenshot showing how I'd like the vertical images to appear. Thanks for your help with this.

Argone

Ok,

Please insert this photo on page and then please send me a link. I will try to resolve it on your wordpress.

Kind regards

Rob

Here's a link: http://robdweck.com/newwp/portfolio/the-falling-light/

As you can see it's much wider (and taller) than the screenshot I sent.

Thanks again for looking into this!

-Rob

thanhn2001

Ignore this comment

thanhn2001

I fixed this by adding a new image size in apollo13.php that proportionally scales. I use 500px for the width and the 9999px essentially gives it unlimited height. Obviously, you can use whatever width you want.

Line
#107 add_image_size('apollo-portfolio-thumb', 500, 9999);

Then, I uncommented the following lines and use 'apollo-portfolio-thumb' instead of 'apollo-big-thumb'.

Line
#2231 $slide['src'] = $this->prepare_path($slide['src']);
#2232 $src = TPL_ADV . '/inc/timthumb.php?src=' . $slide['src'] . '&w=' . $wig
#2233 $attachment_id = $this->get_attachment_id_from_src($slide['src']);
#2234 $src = wp_get_attachment_image_src($attachment_id, 'apollo-portfolio-thumb')
#2235 $src = $src[0];

Next, I set img src to $src instead of $slide['src']

Line
#2236 echo '<div class="vert-item"><a class="alpha-scope alpha-scope-image no-bord er" href="' . $slide['src'] . '" rel="group"><img src="' . $src . '" ' . $slide['attrs'] . ' ' . $img_style . ' /></a></div>';

Then to center the image and make it responsive to mobile screen I use the following CSS.

<style type="text/css" media="screen">
.vert-item {width: 500px; margin: 0 auto;}
@media only screen and (min-width: 0px) and (max-width: 509px) {
.vert-item {width: 310px;}
}
</style>

Finally, I used the Simple Image Sizes plugin to generate the new image size for all my existing images. And new image upload will be automatically generated.

http://wordpress.org/plugins/simple-image-sizes/

Attached is my apolo13.php file for reference. Warning!! I made other site specific changes. So, don't just replace your file with mine.

You can see it in action here: http://colourmequinn.com/portfolio/nikki/

Rob

Thanks for the detailed reply thanhn2001! I'll give it a try and hopefully won't mess anything up while doing this.

Thanks again!

-Rob