Inline images that can be enlarged

Question

I'm re-implementing an old Drupal 4 site with Drupal 8 and I'm stuck with what I thought was a simple task.

I want to insert some images into an article inline and be able to click on them to see a larger version. Preferably the image is shown in some kind of popover/overlay like Lightbox but even loading a new page or just the image in its original size would be OK.

With Drupal 4, I had Gallery 2 integration and this was piece of cake: just enter a placeholder like [G2:1963] in the body text (with 1963 being a Gallery 2 image identifier) and that's it: the image is now shown as thumbnail and when I click on it, the corresponding Gallery 2 page is opened.

I don't need Gallery 2/3 integration (and AFAIK there is none for Drupal anyway as Gallery is going the way of the Dodo). Drupal 8 has support for adding images to an article. But there doesn't seem to be a simple way of adding them inline.

In the CKEditor, I can add an image inline. But there's no way have it shown as a thumbnail and get the large version when clicking on it.

Then there's the image field: it allows me to add images, but they are all shown in some kind of gallery and the end (or wherever you place the field). Not what I want.

The workaround I've come up with is to hide the image field and then add the necessary HTML myself, like:

<a href="/path/to/image">
    <img src="/path/to/image" width="200" height="200">
</a>

But this is very cumbersome and feels so very wrong. So, how can I solve this in Drupal 8?

Answer 1

So @NoSssweat's suggestion of using Paragraphs seems to be the best solution to me right now. There seems to be few documentation about this, unfortunately. It took me several hours to figure everything out, that's why I wrote this looong step-by-step guide:

• Download and install the Colorbox plugin.
• Download and install the Entity Reference Revisions plugin. This is a requirement for Paragraphs.
• Download and install the Paragraphs plugin.
• Go to Management > Structure > Paragraphs types
  • First, we need to add a paragraph type. Click the "Add a Paragraphs type" button.
  • Give it a name and press "Save". I named mine "Text with image (left)".
  • You're back at the "Paragraphs types" node. You can now see your new paragraph in the table. There's a column "MACHINE NAME", this is going to be important later on when we're theming the paragraph!
  • We now need to configure the paragraph, so click the "Edit" button next to your new entry.
  • Click on "Manage fields".
  • We're going to add two fields. These are the values that you set for your paragraph when you're adding it your content later on. Press "Add field".
    • In the "Add a new field" drop-down box, select "Image" (in the "Reference" group) and give it a name (for example… "Image"). Press Save and continue.
    • Now the editor for the "Image" field is shown, with the "Field settings" tab being selected. The default values were fine for me, especially the "Allowed number of values" being 1. So I pressed "Save field settings".
    • You should still be in the editor for the "Image" field, but now the "Edit" tab is selected. Here you can configure a few things about the image itself, like it's minimum and maximum sizes, which file types to allow and so on. The "Required field" checkbox is notable, it tells whether you must set an image when you're using the paragraph. I'd say yes, so enable this checkbox. Press "Save settings" one you're done.
  • You're back in the "Manage fields" node. Press "Add field" again.
    • Now select a text field type, like "Text (formatted, long)" and give it a name (for example, "Body"). Press "Save and continue".
    • In the "Field settings" tab, there's not much to do. We only want "Allowed number of values" to be 1. Press "Save field settings".
    • In the "Edit" tab, also enable the "Required field" checkbox. Press "Save settings".
  • We're back on the "Manage fields" page of the paragraph. In the "Manage form display" tab you can configure how the UI to add content to your paragraph will look like. I just changed the size of thumbnail here, the rest was OK for me.
  • Go to the "Manage display" tab.
    • I set the labels for both fields to "-Hidden-" as I don't want them to be shown when the paragraph is rendered.
    • For the "Image" field, set the format to "Colorbox" and press the gear symbol on the right to configure how the image is going to be rendered. Specifically, set the "Content image style" to a suitable thumbnail size, for example "Medium (220x220)". I don't know yet where you define your own, but the Medium selection suited my need anyway. Press the "Update" button when you're done.
• We're now done with the paragraph. Next, we need to add a suitable content type or modify an existing one. Let's set up a new one:
  • Go to "Manage" > "Structure" > "Content types".
  • Press "Add content type".
    • We need to give it a name, for example "Paragraphs page". All the other values were fine for me, so I just pressed "Save and manage fields".
    • You're now on the "Manage fields" tab. By default, there's one entry in the table named "Body" of type "Text (formatted, long, with summary)". We don't want it, so click on the down facing triangle next to "Edit" and select "Delete". You're asked whether you want to do so, confirm by pressing "Delete".
    • Back on the "Manage fields" tab, press "Add field".
    • In the "Add a new field" drop-down box, select "Paragraph" (in the "Reference revisions" group) and give it a name (I named it "Paragraph"…).
    • Press "Save and continue".
    • You should now be on the "Field settings" tab of your paragraph field. For "Type of item to reference", make sure "Paragraph" is selected and you probably want the "Allowed number of values" to be unlimited. Press "Save field settings".
    • You're now on the "Edit" tab of your paragraph field. Do not enable the "Required field" checkbox here as this triggers a bug that prevents you from saving when you add new content (you can't save and get the message "This value should not be null." due to this bug). Just press "Save settings".
    • In the "Manage form display" tab you can again refine how the UI for adding content will look like. The defaults are fine.
    • Go to the "Manage display" tab, it allows you to tweak how the content is rendered. I don't want labels so I set the label for the paragraph field to "-Hidden-". Press "Save".
• Now we're able to actually create content, although it won't look the way we want it yet. Let's try it anyway:
  • Go to "Manage" > "Content" and press "Add content".
  • Select your new content type, in my example it was "Paragraphs page".
  • Enter a title.
  • You'll see a message "No Paragraphs have been added yet. Select a Paragraph type and press the button below to add one." Below that message is a button that starts with "Add" followed by a paragraph name. In my example, it's named "Add Text with image (left)". Press it.
  • You can now select an image (you may need to set the "Alt" field as well) and enter some text for the body. Do so and press "Save and publish".
    • You can add multiple paragraph per page. Just press the "Add …" button above the "Save and publish" button to add another paragraph.
  • If everything is alright, you will now see your image and your text. Depending on how you arranged the fields in the "Manage display" tab of your paragraph type, either the image or the text is on top. But we wanted the image to be next to the text. To do that, we need to theme the paragraph.

• So the final step is to theme the paragraph. This is under-documented part, IMHO. Here's how to do it:

  • This needs to be done on the server's filesystem, either by shell or some file transfer software. It depends on your setup.
  • I'll call the top-level Drupal directory DRUPAL_ROOT. That's the directory with core, modules, sites, … subdirectories.
  • The Paragraphs module comes with basic template for theming. It's located at DRUPAL_ROOT/modules/paragraphs/templates/paragraph.html.twig.
  • You'll need to copy that file to the current theme's directory with a special filename.
    • There might be a better way to do this, please let me know if there is. It feels hack-ish…
    • Find the theme's template directory: there's some directory that contains *.html.twig files. You need to locate that. I was using the Bootstrap theme, the correct directory for that theme is DRUPAL_ROOT/themes/bootstrap/templates/bootstrap/. For Bartik, it's DRUPAL_ROOT/core/themes/bartik/templates/.
  • You also need the machine name of your paragraph. I mentioned it above, you can find it by going to "Manage" > "Structure" > "Paragraphs type". Look at the "MACHINE NAME" column.
    • For my paragraph, that name is text_with_image_left_.
  • Now, copy the paragraph.html.twig file into your theme's template directory and rename it to paragraph--<machine_name>.html.twig.
    • My file thus is named paragraph--text_with_image_left_.html.twig. Since I was using the Bootstrap theme, the path thus was DRUPAL_ROOT/themes/bootstrap/templates/bootstrap/paragraph--text_with_image_left_.html.twig.

  • Edit the file. I don't know what the stuff between {% and %} is for, I didn't need to tweak it. Just edit the HTML to look like this:

    <div{{ attributes.addClass(classes) }}>
        <div style="float: left; margin-right: 1em;">{{ content.field_image }}</div>
        {{ content.field_body }}
    </div>
    

    • The content.field_image and content.field_body correspond to your paragraph's field names. You can see those in the "MACHINE NAME" column of your paragraph's field list ("Manage" > "Structure" > "Paragraphs type", press the arrow next to the "Edit" button and select "Manage fields").

  • Save. Now you need to clear Drupal's cache: "Manage" > "Configuration" > "Performance" > "Clear all caches".

  • We're done! Reload the test page you've created before and the text should now flow around the image. Clicking the image should open the large version.

Answer 2

Yes, I want to display images inline. Like, there's a paragraph and next to it is an image.

Then I recommend you use:

Paragraphs

Instead of putting all their content in one WYSIWYG body field including images and videos, end-users can now choose on-the-fly between pre-defined Paragraph Types independent from one another. Paragraph Types can be anything you want from a simple text block or image to a complex and configurable slideshow.

Check out this video demo

---

For enlarging images you could use:

Colorbox

is a light-weight customizable lightbox plugin for jQuery. This module allows for integration of Colorbox into Drupal.

OR

Use something like Lightbox2 with Image URL Formatter which will require you to do some custom work with the paragraphs template file to get the lightbox to work.