5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

Hi all, I see loads of people now using responsive web design. I really have a serious question, but I am baffled as to how to fix the issue.

Ok I must have images 680px x 400px on our site for the responsive gallery to work, ie. scaling works perfectly down to ios sizes etc. This size is derived from scaling divs etc so lets just gloss over that for now. But needless to say the image must be this exact dimension.

Please note: we do not declare image width or height anywhere

By this I mean all scaling within css is handled by a combination of auto and 100% rules.

Main issue with responsive design, is the lack of “responsive’ability” like what i did there ? lol

In essence, you must set a fixed max size of image ( not declared ) for largest resolution, and leave scaling to the media queries within css. I guess theres a whole heap of jquery fixes, but I am after a more robust solution.

So here is my dilemma, we allow users to upload images as part of a post they create. Of course, we cant guarantee what size image they will upload, but we can restrict max file sizes etc.

I was looking at GD and IM to handle resizing of images, and kind of got perplexed.

So here is my issue.

User uploads an image lets say 300px x 150px and another user uploads a pic 800px x 600px

Becuase of our design, we need the images to be ( if too big scaled and cropped on the fly ) to exact dimensions 680px x 400px or if the image is smaller than either of those two dimensions, to overlay the image onto a new image bg of size 680px x 400px

I guess you can see where I am going with this, we need images to be fixed size 680px x 400px so here is my question.

How the fark do you cope with images in responsive designs that are dynamic, and form part of a clean grid style. I cannot for the life of me figure out how to accomplish this.

But I kind of had an idea.

lets say the image has class “img-responsive”

it would seem best to set a media query within css to resize that image based on the resolution of the device. But again this is where I get really stuck with wrapping my head around it all.

All I want to do, is get every image at a fixed size of 680px x 400px and my entire css handles everything else. Just cant bloody figure out a method for resizing all images to that scope. Without them going all skew wiff !

The only way forward must be using IM and the GD library to resize the images after upload, but with a clear set of rules, so as not to make everything go pear shaped Any suggestions guys…

186 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 100+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+4 more
Artillegence says

Hi Steve, A question when an image size is 300px around and if you upscale it using resizing wouldn’t it blur it. I think for smaller images you can center them in the container and for bigger images you can use proportional image resizing. You can wrap it around a div with height 400px or depending on the device and add overflow hidden so extra extra portion of image is clipped off.

148 posts
  • Has been part of the Envato Community for over 1 year
loveetc says

Where’s the problem? Whatever image size you have, for the responsive layout specify the maximum width you want for the image, and set the height auto.

Also, if a user uploads smaller image than the required, do not increase its size as it will make it very bad. Only crop the the image if it is larger than required size.

705 posts
  • Sells items exclusively on Envato Market
  • Has sold $5,000+ on Envato Market
  • Has been part of the Envato Community for over 2 years
  • Won a Most Wanted contest
+4 more
abstract-labs says

If I understand well you should have something like this in your style sheet:

.img-responsive { max-width:680px; height:auto; }

but you still need the user to upload an image with the right ratio width/height, otherwise you should not only resize the images with GD but you also need to crop them.

But why do you need media queries? The image will have a max width of 680px and will be automatically scaled down to match the size of the container div or column…

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

To lovetec. Max image size cannot be specified ( in px ) in this instance.

We are using this theme as you can see from this example, every single image is the same size. We picked actual image size of 680px x 400px ( not declared ) because in our usage it scales brilliantly.

You also cannot rely on width:auto and width:100% max-width blah because the images could all be various sizes, thus if you do not specify a image width and height they will be all over the place, define a size and then they dont scale.

To Artillegence Thats the 6 million dollar question. Hence I would need to figure out some sort of way of overlaying it onto a predefined image.

Like: ( really crude method explanation )

If width < 680px and height <400px attach to bg.png ( defined size 680px x 400px ) and save.

@abstractlabs that works great if the aspect ratios are all the same, but obviously they wont be lol. Hence the dilemma

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

Am thinking the only other method would be shifting the emphasis off image size, and add a container around the image

186 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 100+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+4 more
Artillegence says

you can use a pattern similar to empty photoshop layer, that could work well.

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

Yep, thats a way. I guess the only other method would be redoing our image uploader, and getting user to scale, resize , crop image and save at specific size that way we kind of get them to do the work.

Just gonna explore this

214 posts
  • Made it to the Authors' Hall of Fame
  • Member of the Envato Team
  • Had an item featured on Envato Market
  • Contributed a free file of the month
+13 more
Crusader12 Envato team says

Sounds like a good scenario for JavaScript. You could scale your image perfectly depending upon certain conditions and maintain their image’s ratio rather easily. Is there any reason why you’re not using JS for this?

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

Sounds like a good scenario for JavaScript. You could scale your image perfectly depending upon certain conditions and maintain their image’s ratio rather easily. Is there any reason why you’re not using JS for this?

Well, I would rather handle the image on the way back not when it has returned. In other words, at the server to the client, rather than with the client.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by