Bigger images in Portfolio

Hi there, your site is currently not online so that I can see it. Post back here after you take it out of maintenance mode and I’ll take a look and see what I can do. It will likely take some custom CSS.

It’s online, sorry

The Jetpack software calculates the position of each image, based on the number of columns of images and then inserts absolute positioning for each into the HTML. That means that we can’t use CSS to make the images larger without getting overlap on the images.

I’m asking one of our theme developers to look into it and will let you know when the come back to me on this, and on the issue you have in the other thread with the the image overlaps.

Hi there, I’ll have some code for you a bit later as I have to run an errand, but we should be able to increase the image sizes, but it will reduce the number of columns of images.

@tastymouse, sorry for the delay, I’m just getting back to your site, and find that page is giving a not found. I do see this new page, https://gudakoster.nl/wp/project-type/work/ and things look like they are working pretty well. Do you still need help with this?

I think the current size will work for this website but I think it’s interesting to know how we can change the size. It would make the portfolio plugin even more flexible.

Glad it is working for you now. Add the following to your custom CSS, which widens the .content-area and also widens the portfolio images on that page so that the two columns of images take up the entire width, clear down to 600px in screen/window width, when the display changes to a single column for mobile devices.

@media screen and (min-width: 1020px) {
	.content-area, .portfolio-media, .portfolio-projects {
		width: 100% !important;
	}
	body:not(.single-jetpack-portfolio):not(.search) .jetpack-portfolio.hentry {
		width: 48%;
	}
}
@media screen and (min-width: 896px) {
	.content-area, .portfolio-media, .portfolio-projects {
		width: 100% !important;
	}
	body:not(.single-jetpack-portfolio):not(.search) .jetpack-portfolio.hentry {
		width: 48%;
	}
}

The Jetpack software calculates the position of each image, based on the number of columns of images and then inserts absolute positioning for each into the HTML. That means that we can’t use CSS to make the images larger without getting overlap on the images.

Like you wrote earlier this can’t be done with CSS only. Which PHP and/or Javascript do we have to adjust?

Hi there, good news! After chatting with our developer on this, we found a way to get the images larger for you. I’m working on, and testing that now. I’ll be back in a little with some CSS you can try.

Ok, add this to your child theme CSS and see what you think.

@media screen and (min-width: 1344px) {
	#page {
		width: 100%;
		margin-left: 40px;
		margin-right: 40px;
	}
	body:not(.single-jetpack-portfolio):not(.search) .jetpack-portfolio.hentry {
		max-width: 22%;
		width: 100%;
	}
}
@media screen and (min-width: 1020px) {
	#page {
		width: 100%;
		margin-left: 40px;
		margin-right: 40px;
	}
	body:not(.single-jetpack-portfolio):not(.search) .jetpack-portfolio.hentry {
		max-width: 30%;
		width: 100%;
	}
}
@media screen and (min-width: 896px) {
	#page {
		width: 100%;
		margin-left: 40px;
		margin-right: 40px;
	}
	body:not(.single-jetpack-portfolio):not(.search) .jetpack-portfolio.hentry {
		max-width: 30%;
		width: 100%
	}
}
@media screen and (min-width: 600px) {
	.site-menu {
  margin-right: 100px;
	}
}

• This reply was modified 7 years ago by sacredpath.

The result is the same, all images overlap.

I’m still interested in a solution because on most screens it looks just as we want. But on some notebooks we get to much white space left and right. So I tried adding an extra media query, (min-width: 1200px), with a .jetpack-portfolio.hentry width of 24%. I do get 4 columns, as I want but with the wrong height.

Hi, I’ve checked your site, and I’m not seeing any issues at around 1200px +/-. I do see that it goes from 4 columns to 3 at 1340px and down to around 890px.

When you add the CSS I gave above to your custom CSS, the Preview in the Customizer may not show things accurately. I would suggest saving the CSS and then visit your site. If you are narrowing and widening your browser window, things can get messed up, but if you wait for a few moments, it will recalculate and things will go back to how they should be.

I’ve noticed when my browser is set very wide, (around 1600px and wider) there ae some differences in the width of the images with some being narrower than others, but this is due to the fact that the narrower images are not wide enough to be full width of the available space at those window widths, and the software will not display the images more than 100% wide and/or tall as that would reduce the quality of the images since we would be relying on the browser to do that, and they aren’t good at that.

With the code above, checking in Chrome, Safari and Firefox, I cannot reproduce the behavior you are reporting.

If we set things for 4 columns, your images would be smaller, and I was thinking you wanted them larger.

Hi, you were right, the code didn’t work in FF Developer Edition, but it does work when I enter it in the style-sheet and upload it.
And on 1200px it works fine too.
Thanks again!

• This reply was modified 7 years ago by tastymouse.