Hey,

So I have the filter in CKeditor appearing, so when I select an image in my body section within my content, I can add the Picture style I want, which then injects the tag property in my img tag within the HTML. However, there are no adaptive images being placed in the page.

Am I missing something here? With the tag in the img declaration, the Picture module should pick this up and inject the adaptive images accordingly, correct?

Help welcomed!

And thanks for a great module :)

Craig

CommentFileSizeAuthor
#5 picture-picture_img_uri_private_files-2024369-5.patch1.81 KBR2-D8

Comments

barber75’s picture

barber75 commented

hey guys,

Just wandered if anyone knows of why this is happening or is this happening to anyone else?

Thanks,

Craig

barber75’s picture

barber75 commented

Hi everyone,

Still no one has any information...I'm really stumped as to why the picture module isn't injecting my images.

When in WYSIWYG, i choose my photo, select my picture image format, which is all set up with breakpoints, image styles. But, when I view the HTML, the data-picture tag is being applied, but with no images being being replaced. Could I be missing something here?

Thanks,
Craig

attiks’s picture

attiks commented

Can you check the text format settings, there's an option to enable inline pictures.

R2-D8’s picture

R2-D8 commented

Same problem here: Everything's ok, but inline images don't get further than the data-picture-group tag being added.

Im my case drupal's private file system seems to cause the trouble.
With public files ('sites/default/files/...') everything's working,
but private file paths ('system/files/...') are breaking the function 'picture_image_uri($src)' in 'picture.module'.

At the moment I'm unclear about possible approaches. We all know the ongoing problems about drupal's private file system. Maybe I'm just switching back to public file system, protecting files manually with htaccess-directives.

R2-D8’s picture

R2-D8 commented
StatusFileSize
new picture-picture_img_uri_private_files-2024369-5.patch1.81 KB

I took a deeper look and created a first patch for this.

Just a little extension to the function 'picture_image_uri($src)' in 'picture.module'.
Indeed it's just focused on managed/private images; i expect there is potential to merge this with the exisiting parts for public images.

Any ideas are welcome.

Cas’s picture

Cas commented

This patch, works well for me. Wysiwyg + CKeditor inline images fetched from the server folder with IMCE now (finally) produces an Picture module generated adaptive image element!
Many thanks indeed, Cas

jenscbc’s picture

jenscbc commented

EDIT: I finally got responsive images to work in Omega 3 by manually applying the patch #5 to Picture 7.x-1.2+6-dev and use Media 7.x-2.0-alpha3+36-dev + Breakpoints 7.x-1.1

Is there a reason why patch #5 is not committed to the dev so others could get it working? Would be great to see it working out of the box.

Thanks for a great module and fine patch!

-------------------------------------------------------------------------------
I'm not able to apply this patch on Picture 7.x-1.2+6-dev. I get error "fatal: Not a valid object name 3d8a2c7".
Sorry I'm not strong in Git. Is this error because I try to patch the wrong version of the dev? Is there a way around this, so I can test the #5 patch?

I use Wysiwyg + CKEditor (3.6.x)+ Media (2) + private files.
I have made a content type where I can test both inline and a picture field. The same picture displayed as a field is responsive but the inline not.

I'm really stuck. Any help is much appreciated!
/Jens

The source code of the inline image only has a image tag with correct image path and correct data-picture-group

where the source code of the image as field has the full code with
span data-picture=""
+ span list of all image styles
+ noscript
+img tag pointing to the image styles

hefox’s picture

hefox commented
Issue summary: View changes
Status: Active » Needs review

Remember to put an issue as needs review when there's a patch :)

Joram’s picture

Joram commented

I'm having similar problem with CKeditor & IMCE. I can upload the image and assign the picture group. The image is rendered on my desktop browser and resizing the window on my desktop will switch to the correct breakpoint sizes and the correct image.

However, when viewing the page on my android Samsung Galaxy Ace or Samsung Tablet, the image is not rendered, instead i see one of those 'missing images' icons.

The problem only occurs when using inline images. Using content type field 'image' with picture format applied works perfectly. Here's the HTML difference between both:

HTML from using CKeditor with IMCE and Picture

<p>Before the image <span data-picture-group="responsive_full_width" data-picture="">
<span data-height="300" data-width="300" data-src="http://www.mysite.com/sites/default/files/styles/responsive_full_width/public/news/drupal-logo.jpg?itok=lYvw2OQ9"></span>
<span data-height="300" data-width="300" data-src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_mobile_1x/public/news/drupal-logo.jpg?itok=lNvSJMdh" data-media="(min-width: 0px)"></span>
<span data-height="748" data-width="748" data-src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_tablet_1x/public/news/drupal-logo.jpg?itok=Qz2UFng3" data-media="(min-width: 768px)"></span>
<span data-height="1180" data-width="1180" data-src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_desktop_1x/public/news/drupal-logo.jpg?itok=JCeYB-0a" data-media="(min-width: 1200px)"></span>
<noscript>&lt;img typeof="foaf:Image" src="http://www.mysite.com/sites/default/files/styles/responsive_full_width/public/news/drupal-logo.jpg?itok=lYvw2OQ9" width="300" height="300" alt="" /&gt;</noscript>
<img width="1180" height="1180" alt="" title="" src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_desktop_1x/public/news/drupal-logo.jpg?itok=JCeYB-0a"></span>, after the image</p>

HTML from content type field 'image' with picture format applied

<span data-title="A title" data-alt="Some alternative text" data-picture="">
<span data-height="300" data-width="300" data-src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_mobile_1x/public/news/drupal-logo_1.jpg?itok=dafJpL1X"></span>
<span data-height="300" data-width="300" data-src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_mobile_1x/public/news/drupal-logo_1.jpg?itok=dafJpL1X" data-media="(min-width: 0px)"></span>
<span data-height="748" data-width="748" data-src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_tablet_1x/public/news/drupal-logo_1.jpg?itok=AnwYqQFe" data-media="(min-width: 768px)"></span>
<span data-height="1180" data-width="1180" data-src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_desktop_1x/public/news/drupal-logo_1.jpg?itok=RCqrtLi2" data-media="(min-width: 1200px)"></span>
<noscript>&lt;img typeof="foaf:Image" src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_mobile_1x/public/news/drupal-logo_1.jpg?itok=dafJpL1X" width="300" height="300" alt="Some alternative text" title="A title" /&gt;</noscript>
<img width="1180" height="1180" alt="Some alternative text" title="A title" src="http://www.mysite.com/sites/default/files/styles/responsive-full-widthbreakpoints_theme_mythemename_desktop_1x/public/news/drupal-logo_1.jpg?itok=RCqrtLi2"></span>
jelle_s’s picture

jelle_s
Primary language Dutch
Location Antwerp, Belgium
commented

Patch committed to the latest dev.

@Joram: Please try version 2 of the picture module. If the same problem persists, please create a new issue as I'm not convinced it's part of the same problem.

jelle_s’s picture

jelle_s
Primary language Dutch
Location Antwerp, Belgium
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

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