I've tried to use it with WYSIWYG+CKEditor with the media plugin to insert images in a text area but I get _wide version in all devices.

What I've done:
1- I created the new Image Style ("partner") to use with its 4 variants
2- Then crated a custom Field view mode ("logo") (Configuration>Media>File types>Image>Manage file display) and selected the custom Image Style ("partner").
3- Then, I create a new block and insert an image in the text area with the Media plugin for WYSIWYG, selecting the "logo" field mode for the image.

When I get the code for the page the image I see in all devices is the "_wide" one. Anyway, the rest of the images work as expected (view-slideshow) ang I get the _mobile version in the mobile device.

Maybe I'm doing something wrong?

Thank you for the module.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

attiks’s picture

do you have a test URL so i can have a look at the code?

ckrina’s picture

I deleted that version and created various modules (each one shows in a different width) because I didn't succeed.
I'm sorry.
All I can give you is a piece of code that I copied when I was trying to get it (I changed "partner" to "patros" in this version). It was the same in an iPhone and in a big display.
<img class="media-image" width="110" height="74" src=".../sites/default/files/styles/patros_wide/public/adidas_logo_1.png" typeof="foaf:Image" alt="">

Jelle_S’s picture

Status: Active » Fixed

This should be fixed in the latest dev version. But there is a certain workflow you need to follow:

  • Enable Responsive images and styles and the Media module
  • Add some suffixes for responsive images
  • Create image styles according to these suffixes
  • Go to /admin/config/media/file-types/manage/image/file-display/media_responsive
  • Check the checkbox next to 'Image'
  • Select the image style with the default suffix as image style
  • Save the settings
  • Go to where you can manage the fields of your entity type (for node -> Basic Page that would be admin/structure/types/manage/page/fields)
  • Click 'edit' next to the field where you want to insert responsive images (e.g. 'Body')
  • At the bottom, check the checkbox 'Apply responsive images and styles to this field'
  • Now, when you add a file to a field with the Media plugin for WYSIWYG, choose 'Responsive' as your format.
  • Your images should resize as expected now.
ckrina’s picture

Thanks for such a well explained information, but I'm getting an error with the last dev 7.x-1.x-dev and with the 7.x-1.1:

Fatal error: Call to undefined function context_get_plugin() in /homepages/1/d397109111/htdocs/demoweb2012/sites/all/modules/resp_img/resp_img.module on line 24

I've restored the 7.x-1.0+3-dev previous version.

In addition to this, when I try to acces the route /admin/config/media/file-types/manage/image/file-display/media_responsive, i get an Access denied message. Worst of all is that the first time I tried to access I had no problems, but I made no changes. And now, I was trying to follow your instructions but I can't because I have no access.

I hope this information will be useful.

attiks’s picture

Status: Fixed » Needs work

Fix is on the way, will be in 7.x-1.2

Jelle_S’s picture

Status: Needs work » Fixed

Mea culpa! Fixed in 7.x-1.2

ckrina’s picture

Ok, thanks: all you said is working now!

The problem is that I'm getting the images into a block, not in a node, so I can't check the responsive image checkbox. Maybe should I move it to a new issue?

Moreover, the problem I see is that all the images you add to a WYSIWYG box will be the same size if you always have to choose the "responsive" mode, and may sometimes need other sizes.

Anyway, I think it's a great module and you are doing a great job, so thanks for everything.

attiks’s picture

Assigned: Unassigned » Jelle_S
Status: Fixed » Needs work
Jelle_S’s picture

Status: Needs work » Fixed

If you want more advanced control over the images sizes in blocks or entity text fields you can go to admin/config/media/file-types/manage/image/file-display
Here you can select different image styles for each media format (Default, Link, Preview, Small, Large, Original, Responsive).
If you select one of the styles you created with a default suffix you can have more sizes
e.g. for the "Small" mode you select small_mobile, for the "Large" mode you select large_mobile, ...

In the latest dev version the images in blocks will now be replaced as well. You can still disable this functionality on the settings page of this module.

ckrina’s picture

Status: Fixed » Closed (fixed)

Works perfect now in latest dev.

Really great module. Thank you so much.

ireneb’s picture

Status: Active » Closed (fixed)

I'm new to Drupal and I have some troubles figuring out what I'm doing wrong with my responsive images. I'm using 7.x-1.2, but when uploading responsive through the CKEditor it's choosing thumbnail_wide by default. Furthermore it only creates two sizes of images: thumbnail_wide and thumbnail_normal - I thought it was supposted to create all sizes?

I had one thing in the installation process I didn't understand. It says
Go to /admin/config/media/file-types/manage/image/file-display/media_responsive

But I can only find /admin/structure/file-types/manage/image/file-display/media_responsive
I guessed it was simply a wrong url posted?

I checked the checkbox next to image at my own url, but I couldnt figure out what this ment: Select the image style with the default suffix as image style. I cant find the default suffix?
Maybe that's where my problem is?

attiks’s picture

Version: 7.x-1.x-dev » 7.x-1.2
Status: Closed (fixed) » Active

default suffix can be set at admin/config/media/resp_img/settings, if your theme is responsive you have to set it to _mobile and make sure you select the mobile image style while inserting an image using CKEditor.

ireneb’s picture

I have already set the default suffix to _mobile as the instruction told me to. But when inserting an image with CKEditor shouldn't I choose responsive ? I don't see anywhere I can choose _mobile?

attiks’s picture

Status: Closed (fixed) » Active

Can you post a screenshot of the CKEditor or list all available options? Is CKEditor using the styles of media or the plain image styles? What output do you get inside the HTML?

ireneb’s picture

FileSize
135.33 KB
47.53 KB
142.86 KB

You can get 3 screenshots. 1 of the editor, 1 of the options when choosing image and 1 of the file display where I'm told to Select the image style with the default suffix as image style. I'm in doubt what to choose here. I thougt it would be the default suffix _mobile, but I think I might be misunderstanding something? _mobile isn't an option.

If I change the image style at /admin/structure/file-types/manage/image/file-display it also changes the size in the ckeditor now - but I can only choose from the thumbnails I created and not narrow, normal or wide? And it only creates to sizes of images: thumbnail_normal and the chosen image style.

I think I might be missing something essential here?

ireneb’s picture

I forgot the html. If I choose large as image style this is the output:
<img class="media-image" src="http://localhost/mysite/sites/default/files/styles/large/public/110327-mors-ten.jpg" typeof="foaf:Image" alt="">

When choosing thumbnail_mobile the output is:
<img class="media-image" src="http://localhost/mysite/sites/default/files/styles/thumbnail_wide/public/111229-aesker_0.jpg" typeof="foaf:Image" alt="">

attiks’s picture

FileSize
48.33 KB

Looking at your second html it appears to be working, you have to select thumbnail_mobile in the settings in your suffix.jpg screen.

i1487634.png

ireneb’s picture

ok maybe I don't understand what the module does then? If I set it to thumbnail_mobile all the pictures I put up on the site gets the width 100px; I thought the module should give the possibility of small pictures on small screens and large pictures on large screens? If I choose large as the image style on /admin/structure/file-types/manage/image/file-display the picture gets large - but it does not resize when resizing my window? And the sizes (500, 720 and 900) made for the module isn't in use anywhere?
add a suffix: _narrow - 500
add a suffix: _normal - 720
add a suffix: _wide - 900

attiks’s picture

You did these steps as well:

  • Go to where you can manage the fields of your entity type (for node -> Basic Page that would be admin/structure/types/manage/page/fields)
  • Click 'edit' next to the field where you want to insert responsive images (e.g. 'Body')
  • At the bottom, check the checkbox 'Apply responsive images and styles to this field'
ireneb’s picture

yes - I followed the instruction here http://drupal.org/project/resp_img - the only thing I was in doubt about was the url
/admin/config/media/file-types/manage/image/file-display/media_responsive

which I can only match with this:
/admin/structure/file-types/manage/image/file-display/media_responsive

I guessed it was simply a wrong url posted?

And then I didn't understand this sentence Select the image style with the default suffix as image style

attiks’s picture

Version: 7.x-1.2 » 7.x-1.x-dev

Can you post a screenshot of your field settings (content type, manage fields)?

ireneb’s picture

yep - here you go

attiks’s picture

Sorry, I wasn't clear: a screenshot of the field edit page, the one with the checkbox 'Apply responsive images and styles to this field'

ireneb’s picture

FileSize
236.55 KB

this one?

attiks’s picture

#24 is indeed the checkbox you, see your auestion of #20: And then I didn't understand this sentence Select the image style with the default suffix as image style

According to #16: When choosing thumbnail_mobile the output is:
<img class="media-image" src="http://localhost/mysite/sites/default/files/styles/thumbnail_wide/public/111229-aesker_0.jpg" typeof="foaf:Image" alt="">, this is what the module is supposed to do, replace the src of your images.

So is it working now?

ireneb’s picture

Ok maybe I get some of it now - I thougth it was the sizes (500, 720 and 900) that was to be shown in the three different layouts, but it's only the thumbnails? Is that understod correct?

So in the wide layout the pictures should be shown as 300 pixels wide? That's exactly what happens on my site. But on my site - nothing is changing when I resize the window size to the smaller layouts - so in normal, narrow and mobile it's also shown as 300 pixels (thumbnail_wide) - isn't it supposed to resize here?

ireneb’s picture

When checking my folders
C:\wamp\www\mysite\sites\default\files\styles\thumbnail_wide\public
C:\wamp\www\mysite\sites\default\files\styles\thumbnail_normal\public
C:\wamp\www\mysite\sites\default\files\styles\thumbnail_narrow\public
C:\wamp\www\mysite\sites\default\files\styles\thumbnail_mobile\public

The first two has a version of the uploaded picture, the latter two has none.

attiks’s picture

The sizes define the borders between the different suffixes, in your case it means:

  • windows size < 500px ==> _mobile
  • windows size between 500px and 720px ==> _narrow
  • windows size between 720px and 900px ==> _normal
  • windows size > 900px ==> _wide

As a content editor you always have to use the _mobile variant, never use any of the other suffixes directly. The module always start from _mobile and replaces it whenever necessary (depending on the sizes above).

By default the module doesn't resize when you resize your browser, try reloading the page after resizing the browser, or change the option.

To answer your question: "So in the wide layout the pictures should be shown as 300 pixels wide?" Yes if you defined the _wide image style as having a width of 300px, but the easiest way to check is to look at the image src attribute.

attiks’s picture

#27 that's normal, they are only generated when needed. Try changing your browser width to 800px and reload/refresh the page. Check the img src attribute to double check.

ireneb’s picture

OMG - the only thing I missed where pushing f5 - I'm sorry for all the trouble - it's working perfectly :o))) cool module

attiks’s picture

Assigned: Jelle_S » Unassigned
Status: Active » Fixed

no problem, I need to work on the documentation.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.