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.
Comment | File | Size | Author |
---|---|---|---|
#24 | edit-article.jpg | 236.55 KB | ireneb |
#22 | manage-fields-article.jpg | 150.87 KB | ireneb |
#22 | manage-fields-basic-page.jpg | 144.83 KB | ireneb |
#17 | i1487634.png | 48.33 KB | attiks |
#15 | ckeditor.jpg | 142.86 KB | ireneb |
Comments
Comment #1
attiks CreditAttribution: attiks commenteddo you have a test URL so i can have a look at the code?
Comment #2
ckrinaI 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="">
Comment #3
Jelle_SThis should be fixed in the latest dev version. But there is a certain workflow you need to follow:
Comment #4
ckrinaThanks 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:
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.
Comment #5
attiks CreditAttribution: attiks commentedFix is on the way, will be in 7.x-1.2
Comment #6
Jelle_SMea culpa! Fixed in 7.x-1.2
Comment #7
ckrinaOk, 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.
Comment #8
attiks CreditAttribution: attiks commentedComment #9
Jelle_SIf 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.
Comment #10
ckrinaWorks perfect now in latest dev.
Really great module. Thank you so much.
Comment #11
ireneb CreditAttribution: ireneb commentedI'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?
Comment #12
attiks CreditAttribution: attiks commenteddefault 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.
Comment #13
ireneb CreditAttribution: ireneb commentedI 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?
Comment #14
attiks CreditAttribution: attiks commentedCan 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?
Comment #15
ireneb CreditAttribution: ireneb commentedYou 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?
Comment #16
ireneb CreditAttribution: ireneb commentedI 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="">
Comment #17
attiks CreditAttribution: attiks commentedLooking at your second html it appears to be working, you have to select thumbnail_mobile in the settings in your suffix.jpg screen.
Comment #18
ireneb CreditAttribution: ireneb commentedok 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
Comment #19
attiks CreditAttribution: attiks commentedYou did these steps as well:
Comment #20
ireneb CreditAttribution: ireneb commentedyes - 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
Comment #21
attiks CreditAttribution: attiks commentedCan you post a screenshot of your field settings (content type, manage fields)?
Comment #22
ireneb CreditAttribution: ireneb commentedyep - here you go
Comment #23
attiks CreditAttribution: attiks commentedSorry, I wasn't clear: a screenshot of the field edit page, the one with the checkbox 'Apply responsive images and styles to this field'
Comment #24
ireneb CreditAttribution: ireneb commentedthis one?
Comment #25
attiks CreditAttribution: attiks commented#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?
Comment #26
ireneb CreditAttribution: ireneb commentedOk 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?
Comment #27
ireneb CreditAttribution: ireneb commentedWhen 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.
Comment #28
attiks CreditAttribution: attiks commentedThe sizes define the borders between the different suffixes, in your case it means:
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.
Comment #29
attiks CreditAttribution: attiks commented#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.
Comment #30
ireneb CreditAttribution: ireneb commentedOMG - the only thing I missed where pushing f5 - I'm sorry for all the trouble - it's working perfectly :o))) cool module
Comment #31
attiks CreditAttribution: attiks commentedno problem, I need to work on the documentation.