Portfolio image height

Hey, I am using your awesome Sydney theme. Just struggled with one issue and wondered how to make it work:

The width of the images shown by the portfolio plugin scales correctly, but unfortunately I have to use many portrait images in this section which currently results in a messy layout because height is not considered. Is there a way to either

  1. scale portrait images to the height of the landscape images
    or
  2. use the image’s thumbnail for displaying on the front page instead of the full image (I could then easily crop the thumbnail to the correct bounds with WP’s built-in tool)

I appreciate your work and hope you can help me with this issue.

Thank you, best regards
Andy

Hey,

Could you post your link so I can see exactly what you mean by messy layout? The portfolio uses a masonry layout so yeah, height is not taken into consideration.
No, the full image isn’t used, we have our own image size. The easiest solution would be to edit the plugin’s main file and modify that image size. Search for 480 in the plugin, then replace that line with this:


add_image_size('sydney-mas-thumb', 480, 320, true);

Adjust those values as needed, then run a thumbnail regeneration plugin.

Sorry, I have just learned what “masonry layout” actually means. What I meant was the different height of the portrait and landscape images what looks not very neat if you only have one row of images. In my opinion they should have scaled to the same height (e.g. 320px) resulting in different widths instead of different heights. But that is probably a different layout pattern…

Nevertheless, thank you for the piece of code which goes in the right direction. I just decided to only have portrait images in this view, so I thought I would only have to do the following to get 10 of them in a row:
add_image_size(‘sydney-mas-thumb’, 240); // half of 480
But of course, that’s just an image size, the divs have separate widths of ~20% as well as a “left” attribute set in their element style. How can I also change them? I could not find anything of that kind in the plugin code. I want 10 images in a row so the thumbnails are not that large as now.

See: http://handball-apps.de/wordpress

Thank you again.
~Andy

The styles are in the theme, not in the plugin. If you want 10 images on a row then you’ll need to add this to your custom CSS:


.roll-project.fullwidth .project-item {
     width: 10%;
}

Thank you, works like a charm!

Cool. Feel free to rate the theme if you enjoy it: https://wordpress.org/themes/sydney/ :slight_smile:

Done.
Thank you again, you saved me a lot of time and money with your theme and your support!

Dear Vlad,

I try to present my projects 3 per row. For that, i use the following custom Css :

.roll-project.fullwidth .project-item {
width: 30%;
position: relative !important;
left: 0 !important;
}

.project-item img {
width: 100%;
/*height: 200px; */
max-width: none;
}

.project-wrap {
height: auto !important;
}

.project-item.item {
top: auto !important;
}

But It doesn’t fit the entire page. It’s not important if i can center all projects but I can’t.

Thank you for your help.