WYSIWYG

The Picture module allows you to use picture groups created with inline image inserted in body field with WYSIWYG or CKEditor modules.

Configuration

Picture settings

Navigate to Picture settings (admin/config/media/picture/ckeditor) and enable the picture groups wich will be available in the ckeditor (the library) image dialog box.

You can set for each group his weight (in the select list) and the fallback image style

Filter Text format

Navigate to the text format (admin/config/content/formats/full_html for the Full HTML Format) on wich you want use picture module and enable the filter Make images responsive with the picture module.

You have to move Make images responsive with the picture module below Convert line breaks into HTML (i.e. <br> and <p>) if it is enabled, otherwise you'll get empty lines above the picture.

Plugin WYSIWYG

Navigate to the WYSIWYG profiles (admin/config/content/wysiwyg/profile/full_html/edit) and enable the plugin Responsive images with the picture module.

So here we go. We are new to Drupal and we want to build our first very simple website. In this tutorial, we assume that you already have Drupal core installed and a basic installation running. You know how to install new modules. We also won't look at how one can theme his website.

Admin menu

First of all, for gain of time during all the project, install the admin menu module. Disable the core Toolbar module. You have now a new drop-down administration menu at the top of your site.
Note that this step is not strictly necessary but just make things easier. Most of the people use this admin menu instead of the normal one.

WYSIWYG

You still are able to override Asset display settings after embedding Asset into CKEditor.
All optional fields from the Asset entity type and Display settings can be modified without any impact on the original Asset.

Just call the context menu Override Asset by doing right mouse click on the embedded asset zone and do the modifications.

If user, who embeds Asset has a permission to modify original Asset, he will see "Edit Asset" button, which will open Edit Asset interface. Note that modification of required field in the original Asset will cause an update of display of this Asset everywhere, where this Asset is embedded.

Also "Cut Asset" and "Remove Asset" buttons are available in the context menu.

By default set of Asset plugin buttons in CKEditor includes Find and Insert Asset button.

Button "Find and insert" opens native CKEditor dialog window with embedded View, which displays Assets listing with opportunity to apply configurable filters.

"Preview" button is available for each item in the list. Preview is displayed in Tooltip View mode, which is also configurable.
"Add to editor" button should be clicked to input selected Asset into the Wysiwyg with selected settings.

By default set of Asset plugin buttons in CKEditor includes one button per activated Media Asset type.

After clicking on any of Asset buttons for the activated Assets, native CKEditor dialog is opened and you see the default Asset creation form.

Appart from the Asset related fields (configured for each Media Asset via default Entity configuration interface), you can adjust embedded Asset display with the next settings:

• Display mode - Asset's View mode, which will be used to display embedded asset. You can limit available Views modes in the Asset display settings page.
• Alignment - Asset embedded block alignment in the text.

Contributor guide is separated on several pages.

If you want to see how those interfaces work - try out our demonstration site.