Welcome, Guest
Username: Password: Remember me

TOPIC: Auto height/width and responsive template

Auto height/width and responsive template 17 Apr 2012 17:39 #2394

  • dustin5
  • dustin5's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 24
  • Thank you received: 3
I'm having great difficulty making the slideshow size scale down in my responsive template.

If I enter "auto" in the width/height parameters in the module, only the center of the image is displayed (auto-auto.jpg).


If I enter the height/width in px (972 wide x 250 tall) then the slideshow looks correct on standard width desktop browser view (fixed-size.jpg),


BUT if I scale down the window size, the height of the slideshow remains at 250px (fixed-size-small-window.jpg).


What am I doing wrong?

Kind Regards,
Dusty
Attachments:

Please Log in or Create an account to join the conversation.

Last Edit: by ced1870.

Re: Auto height/width and responsive template 17 Apr 2012 17:42 #2395

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 21335
  • Karma: 427
  • Thank you received: 2697
hi
have you tried to give a height and let the width on auto ?
Ced

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Re: Auto height/width and responsive template 17 Apr 2012 18:15 #2396

  • dustin5
  • dustin5's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 24
  • Thank you received: 3
Yes. The result is just like "fixed-size-small-window.jpg" attached above.
I've also tried the opposite (auto height and fixed width) with comical results. :silly:


Dusty
Attachments:

Please Log in or Create an account to join the conversation.

Last Edit: by ced1870.

Re: Auto height/width and responsive template 17 Apr 2012 18:17 #2397

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 21335
  • Karma: 427
  • Thank you received: 2697
then try to change the option "Adjust the images" to see

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Re: Auto height/width and responsive template 17 Apr 2012 21:27 #2399

  • dustin5
  • dustin5's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 24
  • Thank you received: 3
Tried that too.

Auto height, fixed width, adjust=yes looks just like auto-auto.jpg above.

Dusty

Please Log in or Create an account to join the conversation.

Re: Auto height/width and responsive template 18 Apr 2012 18:55 #2416

  • dustin5
  • dustin5's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 24
  • Thank you received: 3
Figured it out with some help from the documentation on the Pixedelic site:

Height: here you can type pixels (for instance '300px'), a percentage (relative to the width of the slideshow, for instance '50%') or auto


Set the width as "auto".
Set the height as a percentage. The percentage in my case was calculated by dividing the height of the images by the width 250÷972=0.2572 (25.72%).

But that's not all. In the camera.js and camera.min.js, there was a min-height:200px. I removed that, and it works great.

Now, is there any magic you can perform in the module to prevent us from having to do that math?
And while you're in there, how about clearing those min-heights from the js files so I won't have to do it on 180 sites when the module gets updated? :S

D
The following user(s) said Thank You: oorzaak

Please Log in or Create an account to join the conversation.

Re: Auto height/width and responsive template 19 Apr 2012 04:32 #2418

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 21335
  • Karma: 427
  • Thank you received: 2697
Thank you for feedback !
For the min-height it is encoded directly in the JS and I would like not to hack it to avoir future issues.
Anyway I can't reproduce your initial issue, if I could I would work on a better way to avoid such problem.
look at my website, if you look at my website:
www.joomlack.fr/extensions-joomla/slideshow-ck
resizing the window and the slideshow always keep the same height and the image displays well
Ced

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Re: Auto height/width and responsive template 19 Apr 2012 12:14 #2429

  • dustin5
  • dustin5's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 24
  • Thank you received: 3
The example on your site does work pretty well, but it also crops the image at iPhone resolution. This is unacceptable for my purpose as the content being displayed is basically a banner ad with type that cannot be cropped. Cropping is very minimal on the original version at Pixedelic, even at iPhone resolution.

As you say, your example does keep the same height, but I need it to change.

I can reproduce the issue on your site with the third slide (the bunny video):
Narrow the window to ~500px and when the third slide loads, it crops first, then while the video loads from Vimeo, it exhibits the same "letterbox" effect that mine was doing. This is a result of the min-height in the js.

Our dev server is behind a firewall or I'd let you see it directly.

D

Please Log in or Create an account to join the conversation.

Re: Auto height/width and responsive template 12 Jun 2012 13:22 #3685

@Dustin5: thanks a lot for figuring this out, saved me a lot of time.

Yet I have one problem still: the width of our mobile display is 300 px (based on the Skeleton responsive template) and it seems that my images are not resized to fit this width. It seems that they are resized to the second-smallest width.

Do you have any suggestions for this issue?

And regarding this one:

ced1870 wrote: For the min-height it is encoded directly in the JS and I would like not to hack it to avoir future issues.


Maybe there's some way to overrule this setting from an external file?

Kind regards, Frits

Please Log in or Create an account to join the conversation.

Re: Auto height/width and responsive template 12 Jun 2012 13:33 #3686

  • dustin5
  • dustin5's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 24
  • Thank you received: 3
Frits,

So you tried setting the min-height in camera.js and camera.min.js to 0?
Can you provide a url so I can see what's happening?

Dusty

Please Log in or Create an account to join the conversation.

Time to create page: 0.225 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 436 guests and no members online