Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
  • #8796


    When using the portfolio my images in portrait mode strech to fill the whole width of the page, stretching the photo and making it look all grainy and terrible. Is there a way to have the photo on the page at it’s normal resolution and not huge? All landscape photos are fine.



    this is basically the same topic as this one (Purchase code hidden if logged out) -item

    Unfortunately the single portfolio page is not styled at all. That it seems to be quite easily possible to get this page styled shows the Angular-Theme, that was also created by Kriesi and is using the same framework.

    Hopping for some support as this is a request by quite a few mebers in this forum.



    I’m also looking for a solution for this.

    Thanks for support


    Hi All,

    Unfortunately there isn’t an easy solution for this. The portfolio item image is set to support up to a 930×930 square image. To support less would start to alter the layout and the portfolio (which you could do if you wanted to change the size for all of them in functions.php).

    As Noah pointed out, other themes do have different layouts for their portfolio pages but that is because each theme is its own unique design which supports the consistency of the entire site created .


    Hi Devin,

    Thanks for reply, I’ve tried to change the size of all portfolio items through the functions.php, as also suggested in a previous post (, but it doesn’t seems to work (even with a thumbnails regenerating).

    Is there any other way to achieve this ? Which files should I need to edit (except function.php)?

    Thank you.


    Hey! Would you mind posting a link to your site so I can take a look at it. It probably happens because images are set to 100% width via CSS in slideshows. Maybe it just helps if we change this rule in css/slideshow.css

    #top .slideshow li img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    background: black;

    modifiying the width to width:auto; could do the trick



    Thanks for reply.

    I’ve tried to add the CSS above but I’ve got only a correct size for the image but not for the “container”, see this link :

    I also have troubles with thumbnails in the portfolio gallery, I can’t find how to crop or resize thumbs to obtain the same size for all :

    some are cropped, others are resized and I can not adjust height… (I’ve tried to change the function.php file without success)

    Thanks for helping.



    Please drop Kriesi’s CSS on custom.css. I checked your site and the style for the image width is set to auto.

    Try this.

    #top .slideshow li img {
    width: 100%;
    height: auto;

    It will fix that for sure. Please remove cache on your browser to see the effect. :)




    Thanks Ismael,

    Unfortunately, it doesn’t seems to work :(

    I’ve try to add this CSS on custom.css but got no result, I’ve got only a “half solution” if I use the Quick CSS field (in Propulsion Styling) like mentioned above and yes, width is auto as suggested by Kriesi (see reply above) because I do not want fullwidth image.

    I’ve also have problems with cropping/resizing thumbnails…

    Thanks for reply.


    Hi spiritol,

    What issues are you having with the thumbnails? Make sure to regenerate the thumbnails with after making changes to the functions.php sizes or the changes will only show up on newly uploaded photos.

    As for the original issue, I’m not sure how to adjust the container to fit the small width images. I’ll ask Kriesi and the other support crew to take a look to see if they have a possible solution.




    Hi! I think I might be having the same problem here? If I keep the dimensions of my portfolio item image 580×475 the image stays crisp. But when I make the height dimension any longer–portrait style, the resolution is fuzzy (see example below). I’ve made the width of my image exactly 580px so I don’t know why any stretching would occur to deteriorate the resolution so much. I’ve tried the suggestions above–including code in the custom.css and regenerating thumbnails–with no resolve. Any help would be much appreciated! Thank you!

    My example:

    please click on the first item “Men’s Online Exclusive Sale” to see what I’m referencing.


    Hi katesi4,

    The image that is getting used is 464×930 –×930.jpg

    Check your functions.php to see if you have any of the image sizes with the 464 width.




    Thanks for your reply Devin! There are a couple areas in the functions.php that have a 465 width and I assume the JS that picks this particular image in the portfolio has the comment: //images for portfolio entries (2,3,4 column).

    I tried resizing the width of my image to exactly 465px to see if that made any difference, but the image is the exact same bad resolution than when the width was wider, like say 802px. Like I said before though, when I cut the *height* of the image, the photo gets crisp. Does the Angular Theme perhaps just not support portrait style images?

    PS: I noticed that I put my question under Propulsion Theme, so please let me know if you need me to start this thread in Angular.

    Thanks again for your help!


    I think the issue is the height of the image is too big so it has to scale down to the 960 max that is defined in the functions.php.

    My apologies, I should have noticed the source image was 1080px tall. As long as you either change the height in your functions.php or use a max height of 960, the image shouldn’t get blurry from re-saving.

    If you do change the height in functions.php, regenerate your thumbnails with:


    That worked perfectly!! Such a simple solution (per usual haha!) Thanks again…I really appreciate the help!!


    Glad that worked for you :)

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Portfolio Seperate Image Size – Portrait Images’ is closed to new replies.