Start Online Training

Get access to all our video classes and support. That's 1818 training sessions in Joomla, Drupal, WordPress, Coding and SEO.
Prices start only at only 25 USD per month

Testimonials

Testimonials OSTrainingYou are the nicest most accommodating group of people that I have ever come across. That is why I love OSTraining."

~ Corinne

 

Start a FREE 7 day trial! Get training videos and books, plus expert support:  

TOPIC: Responsive images

Responsive images 1 year 5 months ago #59825

  • Juc1
  • Juc1's Avatar
  • OFFLINE
  • Posts: 143
  • Thank you received: 1
Hi all,

I have seen this video but haven't quite got this module yet...

drupal.org/project/resp_img says
Install a responsive theme like omega and create the following image styles at /admin/config/media/image-styles

thumbnail__mobile: width 100px;
thumbnail__narrow: width 150px;
thumbnail__normal: width 220px;
thumbnail__wide: width 300px;

goto admin/config/media/resp_img and add the following (responsive styles)

add a suffix: __narrow - 500
add a suffix: __normal - 720
add a suffix: __wide - 900

goto admin/config/media/resp_img/settings and enter __mobile for the default suffix


So I am wondering do the three responsive styles mentioned here work for the different image styles eg thumbnail, medium and large (which I think are default image styles that come with the Drupal core module 'Image') or only for the thumbnail image style?

Also does this module work for an image uploaded via a wysiwyg such as tinymce etc or only for images uploaded via a dedicated image field?

Thanks
Last Edit: 1 year 4 months ago by Juc1.
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 5 months ago #59904

  • tessa
  • tessa's Avatar
  • OFFLINE
  • Posts: 4073
  • Thank you received: 144
Juc1 wrote:
Hi all,

I have seen this video but haven't quite this module yet...

drupal.org/project/resp_img says
Install a responsive theme like omega and create the following image styles at /admin/config/media/image-styles

thumbnail__mobile: width 100px;
thumbnail__narrow: width 150px;
thumbnail__normal: width 220px;
thumbnail__wide: width 300px;

goto admin/config/media/resp_img and add the following (responsive styles)

add a suffix: __narrow - 500
add a suffix: __normal - 720
add a suffix: __wide - 900

goto admin/config/media/resp_img/settings and enter __mobile for the default suffix


So I am wondering do the three responsive styles mentioned here work for the different image styles eg thumbnail, medium and large (which I think are default image styles that come with the Drupal core module 'Image') or only for the thumbnail image style?

Also does this module work for an image uploaded via a wysiwyg such as tinymce etc or only for images uploaded via a dedicated image field?

Thanks


Hi Juc1,

Have you taken a look at this video yet? modulesunraveled.com/responsive-images?u...=atix&utm_source=ZkM

Does it help at all?
Warm Regards,

Tessa Mero



Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 5 months ago #59907

  • Juc1
  • Juc1's Avatar
  • OFFLINE
  • Posts: 143
  • Thank you received: 1
tessa wrote:
Juc1 wrote:
Hi all,

I have seen this video but haven't quite this module yet...

drupal.org/project/resp_img says
Install a responsive theme like omega and create the following image styles at /admin/config/media/image-styles

thumbnail__mobile: width 100px;
thumbnail__narrow: width 150px;
thumbnail__normal: width 220px;
thumbnail__wide: width 300px;

goto admin/config/media/resp_img and add the following (responsive styles)

add a suffix: __narrow - 500
add a suffix: __normal - 720
add a suffix: __wide - 900

goto admin/config/media/resp_img/settings and enter __mobile for the default suffix


So I am wondering do the three responsive styles mentioned here work for the different image styles eg thumbnail, medium and large (which I think are default image styles that come with the Drupal core module 'Image') or only for the thumbnail image style?

Also does this module work for an image uploaded via a wysiwyg such as tinymce etc or only for images uploaded via a dedicated image field?

Thanks


Hi Juc1,

Have you taken a look at this video yet? modulesunraveled.com/responsive-images?u...=atix&utm_source=ZkM

Does it help at all?

Hi Tessa,

Thanks but that is the same video I mentioned above except at a different URL...
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 5 months ago #59920

  • steve
  • steve's Avatar
  • OFFLINE
  • Posts: 5866
  • Thank you received: 262
Hi Juc1

I believe that that using the thumbnail CSS will only target the default image style because it's name actually is "thumbnail". The same goes for "medium" and "large".

You can apply your custom CSS directly to each style by using its name.
Ask. We'll help. It's as simple as that.

Follow us on Twitter - twitter.com/ostraining
Like us on Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60062

  • Juc1
  • Juc1's Avatar
  • OFFLINE
  • Posts: 143
  • Thank you received: 1
steve wrote:
Hi Juc1

I believe that that using the thumbnail CSS will only target the default image style because it's name actually is "thumbnail". The same goes for "medium" and "large".

You can apply your custom CSS directly to each style by using its name.

Hi Steve,

Have you used the resp_img module successfully? I am just wondering whether to stick with this or try something else such as drupal.org/project/cs_adaptive_image

Thanks
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60141

  • steve
  • steve's Avatar
  • OFFLINE
  • Posts: 5866
  • Thank you received: 262
Hi Juc1

I've not personally on a live site although I'm happy to test it for you.

It may well be worth testing that other module. It looks like one is used on 1105 sites and the other on 1152 sites, so neither is in heavy use, so there's possible bugs with both.
Ask. We'll help. It's as simple as that.

Follow us on Twitter - twitter.com/ostraining
Like us on Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60207

  • Juc1
  • Juc1's Avatar
  • OFFLINE
  • Posts: 143
  • Thank you received: 1
steve wrote:
Hi Juc1

I've not personally on a live site although I'm happy to test it for you.

It may well be worth testing that other module. It looks like one is used on 1105 sites and the other on 1152 sites, so neither is in heavy use, so there's possible bugs with both.

Hi Steve,

I am trying drupal.org/project/cs_adaptive_image and so far it seems much more user friendly than resp_img. But it relies on the browser having javascript enabled - so who might that exclude - ist it just people using really old browsers?

Also I think both of these modules only work for a field image ie not for wysiwyg images - so is there an alternative method to make wysiwyg images responsive? I am guessing it might be applying media queries to the image class in the css file = something like 'if the screen width is 960px or more display the image at 100%, if the screen image is 740px or more display the image at 75% etc'

This works ok...
 
@media (min-width: 700px) {
img.jutest {
border:4px solid pink;
}
} 
 
@media (min-width: 1000px) {
img.jutest {
border:4px solid white;
}
}

...but I am not sure yet whether to apply image sizes in terms of % or max pixels eg {max-width: 320px;}

Thanks
Last Edit: 1 year 4 months ago by Juc1.
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60238

  • steve
  • steve's Avatar
  • OFFLINE
  • Posts: 5866
  • Thank you received: 262
only work for a field image ie not for wysiwyg images

Correct. It's harder to apply styles to an image inside a WYSIWYG area but your solution is a good one.

If at all possible, I'd go with the %. That will allow more flexibility than px.
Ask. We'll help. It's as simple as that.

Follow us on Twitter - twitter.com/ostraining
Like us on Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60267

  • Juc1
  • Juc1's Avatar
  • OFFLINE
  • Posts: 143
  • Thank you received: 1
steve wrote:

If at all possible, I'd go with the %. That will allow more flexibility than px.

test here

original image width = 900px
the pink image should display at max width 70 % x 900px = 630 px

but the pink image seems to display at width 670 px (ie more than 630px)
Last Edit: 1 year 4 months ago by Juc1.
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60282

  • rod.m
  • rod.m's Avatar
  • OFFLINE
  • Posts: 492
  • Thank you received: 32
its actually a little more interesting...

at 700px, the image is 476px wide
at 980px, the image is 660px wide
at 1000px, the image is 900px wide

take a look at line25.com/tutorials/create-a-responsive...n-with-media-queries - there's an image 1/4 way down that highlights the variety of widths for devices. It's a pretty good article on responsive design in general.
follow us on Twitter twitter.com/ostraining
Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60310

  • Juc1
  • Juc1's Avatar
  • OFFLINE
  • Posts: 143
  • Thank you received: 1
rod.m wrote:
its actually a little more interesting...

at 700px, the image is 476px wide
at 980px, the image is 660px wide
at 1000px, the image is 900px wide

Hi Rod,

Yes at 1000px and above the image displays as I would expect ie max 100% of 900 px = max 900px.

But another css rule is meant to be - between widths of 700px and 1000px display the image at maximum of 70% of original image. 70% x 900px = 630 px, so I thought that between 700px and 1000px the image would display at maximum of 630 px - but as you say above it displays at 660px ie more than the allowed 630 px.

Another css rule is meant to be - between widths of 350px and 700px display the image at maximum of 35% of original image. 35% x 900px = 315px, but at width 690 px (ie just before jump to next rule), the image displays at only width 240px ie less than the allowed 315px...
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60813

  • Nick
  • Nick's Avatar
  • OFFLINE
  • Posts: 19328
  • Thank you received: 528
Hi Juc1,

Can we get an update on how things are going? From your last reply I'm not certain if you were able to get things resolved or still need some guidance.

Thanks,
Nick
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60847

  • Juc1
  • Juc1's Avatar
  • OFFLINE
  • Posts: 143
  • Thank you received: 1
Nick wrote:
Hi Juc1,

Can we get an update on how things are going? From your last reply I'm not certain if you were able to get things resolved or still need some guidance.

Thanks,
Nick
Hi Nick,

Well I am still puzzled by the image sizing as mentioned in my post #60310 above so any ideas are welcome but actually it is not anything critical so maybe I will experiment with some more images and then come back to update this thread.

Thanks
Please become a member of OSTraining to reply to this post.

resp_img module 1 year 4 months ago #60919

  • steve
  • steve's Avatar
  • OFFLINE
  • Posts: 5866
  • Thank you received: 262
Thanks Juc1

For what it's worth, we starting to create a responsive design class this week, although it's not for Drupal specifically.
Ask. We'll help. It's as simple as that.

Follow us on Twitter - twitter.com/ostraining
Like us on Facebook - facebook.com/ostraining
Last Edit: 1 year 4 months ago by steve.
Please become a member of OSTraining to reply to this post.

 

Start a FREE 7 day trial! Get training videos and books, plus expert support: