Maximize Image Dimensions

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: image dimensions, image size

Author

Posts
August 22, 2014 at 4:26 pm #12905

identity
Lifetime Member

Post count: 445

I want to allow listing images to be “full-sized” to fit the display box on the detail page.

Is there a max-size for that, or is it theme/layout dependent?

If not, what is the max-size?

And what controls that from the WP Admin…is it the regular WP Media Settings, and which size (i.e., medium or large) is used? Or is this set elsewhere?

Cheers,
Brian

August 22, 2014 at 6:04 pm #12912

Paolo
Site Admin

Post count: 31211

Hi Brian,

that is probably one of the most complicated things to customize.

Because it resizes all images to fit in the box height, no matter if they are portrait or landscape images.

Than there is the responsive part.

In addition the box resizes according to the theme content size.

Too many variables to look at to make it right.

I’ve tried doing it and I wasn’t able to.

It would be very difficult there finding a standard that would fit for all themes.

August 22, 2014 at 6:36 pm #12914

identity
Lifetime Member

Post count: 445

Okay, understand. Let me ask this though.

I’m seeing my images being scaled down to 800×600, even though what was uploaded was quite a bit larger.

Is there a specific setting in WP/GD that is dictating that? I get that it might be varied, but just wondering if there is a setting somewhere that would help me maximize the opportunity for images to fill the space, even though ultimately it will still be dependent on the actual images uploaded.

cheers

August 22, 2014 at 7:21 pm #12918

Paolo
Site Admin

Post count: 31211

Not a setting, it’s code controlled.

Thx

August 23, 2014 at 2:22 am #12937
purpleedge
Expired Member

Post count: 539
Any problem doing something like this?
```
/* slider images --------------------------------------------------------------*/

#geodir_slider {
    box-shadow: none;
}

.geodir-viewport {
    padding-bottom: 10px;
}

.geodir_flexslider .geodir-slides img[itemprop="image"] {
    border: 1px solid #5E5E5E;
    border-radius: 5px;
    max-width: 100%;
    max-height: 480px !important;
}

#geodir_carousel {
    box-shadow: none;
    padding: 5px;
}
```
The max-height is what makes the images bigger.
August 23, 2014 at 4:28 pm #12957

Paolo
Site Admin

Post count: 31211

Yes, that could be a solution…

Thanks Purpleedge!

August 23, 2014 at 5:53 pm #12961

identity
Lifetime Member

Post count: 445

Thanks, I’ll have to take a look at that.

cheers

August 23, 2014 at 6:04 pm #12962

sfamilia
Buyer

Post count: 82

Brian, if you wouldn’t mind could you share any results get working with purpleedges’s code, this same issue has been toasting my brain…

August 24, 2014 at 2:13 am #12965

purpleedge
Expired Member

Post count: 539

Before and after images attached. Seems to resize OK in FF mobile view, haven’t tested on a real mobile yet.

August 24, 2014 at 3:50 pm #12984

identity
Lifetime Member

Post count: 445

@purpleedge, thanks, pretty slick; only minor testing on my part as well.

@sfamilia, easy enough to test out since it is all CSS based. I recommend trying to code, commenting out different parts to get a feel for how it changes the look. You can experiment with the “max-height” as well to your taste.

Definitely test as a “user”…in other words, try make sure you have some test listings that have both landscape and portrait images, as well as loaded up with both larger initial resolutions and smaller ones to get a feel for how everything displays.

Being CSS, it’s all presentation so there’s no harm, no foul, and can always be tweaked or undone later if you see something you don’t like.

cheers
Author

Posts