I'm using the basic CKeditor file widget to insert animage. I have configured my responsive image breakpoint group to be used for responsive images. The data-responsive-image-style class is added, with my breakpoint group properly identified, but the available breakpoint sources are not generated, and the image in the node display seems to be the original.
Generate breakpoint group with image styles for responsive images. CKEditor Full HTML ensure the image widget is in the toolbar (NOT the one which says "use IMCE file manager") and responsive images filter is enabled. Identify the breakpoint group in the responsive image settings. Save. Add an image to a text/body field.
Inspecting the HTML shows this:
<img alt="myalttext" data-entity-type="" data-entity-uuid="" data-responsive-image-style="joepictmap" src="https://mysite/sites/default/files/pictures/L1005247.jpg">
Notice that the HTML does not use the PICTURE element (is it supposed to?) as it did in D7 and as it "still" does for a basic D8 image field. The responsive images style group is properly shown. However, none of the responsive image sources appear for the various breakpoints.
I would expect the HTML to show the srcset. Note this example from an equivalent D7 body field:
<picture data-picture-mapping="joepictmap" height="1563" width="3000" class="img-responsive">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="mysite/sites/default/files/pictures/styles/joeresp_breakpoints_theme_joesbstheme_exsharp_1x/public/L1005247.jpg?itok=O2DUPv6i 1x" media="(min-width:2000px)">
<source srcset="mysite/sites/default/files/pictures/styles/joeresp_breakpoints_theme_joesbstheme_sharp_1x/public/L1005247.jpg?itok=itMKPfxK 1x" media="(min-width:1200px)">
<source srcset="mysite/sites/default/files/pictures/styles/joeresp_breakpoints_theme_joesbstheme_normalplus_1x/public/L1005247.jpg?itok=AaR0ToBT 1x" media="(min-width: 960px)">
<source srcset="mysite/sites/default/files/pictures/styles/joeresp_breakpoints_theme_joesbstheme_normal_1x/public/L1005247.jpg?itok=7BzawsRO 1x" media="(min-width: 760px)">
<source srcset="mysite/sites/default/files/pictures/styles/joeresp_breakpoints_theme_joesbstheme_narrow_1x/public/L1005247.jpg?itok=6VRm5Lah 1x" media="(min-width: 415px)">
<source srcset="mysite/sites/default/files/pictures/styles/joeresp_breakpoints_theme_joesbstheme_mobile_1_5x/public/L1005247.jpg?itok=iMTpNBVt 1.5x, https://www.sidewaysmoon.com/?q=mysite/sites/default/files/pictures/styles/joeresp_breakpoints_theme_joesbstheme_mobile_1x/public/L1005247.jpg&itok=cGtgcpAm 1x" media="(min-width: 0px)">
</picture>And note this example from a simple image field (d8 example), again, with the HTML generating the various breakpoint image style sources:
<picture>
<source srcset="/mysite.com/sites/default/files/styles/bs_big_monitor_1x/public/pictures/L1005317-Pano-2.jpg?itok=AMxv4ou3 1x, /mysite.com/sites/default/files/styles/bs_big_monitor_2x/public/pictures/L1005317-Pano-2.jpg?itok=Z6HrQiHb 2x" media="(min-width: 1801px)" type="image/jpeg">
<source srcset="/mysite/sites/default/files/styles/bs_desktop_1x/public/pictures/L1005317-Pano-2.jpg?itok=AjZXfqHz 1x, /sidewaysmoond8.com/sites/default/files/styles/bs_desktop_2x/public/pictures/L1005317-Pano-2.jpg?itok=yOxEDB3P 2x" media="(min-width: 1201px)" type="image/jpeg">
<source srcset="/mysite/sites/default/files/styles/bs_tablet_l_1x/public/pictures/L1005317-Pano-2.jpg?itok=T5UbWhmw 1x, /sidewaysmoond8.com/sites/default/files/styles/bs_tablet_l_2x/public/pictures/L1005317-Pano-2.jpg?itok=Yc1oVh2M 2x" media="(min-width: 901px)" type="image/jpeg">
<source srcset="/mysite/sites/default/files/styles/bs_tablet_p_1x/public/pictures/L1005317-Pano-2.jpg?itok=g8Xr73wx 1x, /sidewaysmoond8.com/sites/default/files/styles/bs_tablet_p_2x/public/pictures/L1005317-Pano-2.jpg?itok=jJ9i8u1t 2x" media="(min-width: 601px)" type="image/jpeg">
<source srcset="/smysite/sites/default/files/styles/bs_phone_1x/public/pictures/L1005317-Pano-2.jpg?itok=ap4o3rFz 1x, /sidewaysmoond8.com/sites/default/files/styles/bs_phone_2x/public/pictures/L1005317-Pano-2.jpg?itok=YQxRJ-LD 2x" media="(max-width: 600px)" type="image/jpeg">
<img src="/mysite/sites/default/files/pictures/L1005317-Pano-2.jpg" alt="" typeof="foaf:Image">
</picture>So, to summarize, inline images, while they are picking up the responsive breakpoint group name, are not generating the breakpoint image style sources, and therefore the node display is using the original image, defeating the whole purpose for using responsive images.
Ensure full support for image breakpoint groups so that adding an inline responsive image generates and then sources the individual images styles for each of the breakpoints.
Needs work
2.1
Code
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
I was finding the same behavior, despite "Enable image uploads" being checked. Regular/non-responsive Image Styles render correctly. I tried rerolling your patch @bgronek to not reference the module's install path (see attached), after which the patch successfully applied, but rendering still wasn't resolved (there could be other variables affecting my lack of dice).