How to Add Images to Text in Layers Widgets

How To  Tutorials  Last Updated: Time to Read: 4 minutes

This tutorial offers some insight into how to build content with the Layers Content Widget and achieve layouts that mix images and text.

We are often asked why the textarea editor toolbars don’t have an image option. This editor toolbar is not the same as your WordPress editor – it cannot handle complex operations like connecting to your WordPress media library by default. Instead, your widget column has a Featured Media button in the options toolbar to add an image to the column. This ensures the content is well balanced, has appropriate spacing, and is responsive for mobile devices. Rather than pasting in one giant wall of text into a single column, this widget allows you to style each section of the content separately, down to single paragraphs if you like.

But what if you want to add images inside the textarea?

The only reason this should ever be necessary is if your widget does not have an options toolbar with a featured media button. Below we will explore both options – building your content with the Content widget, and workarounds for widgets without Featured Media options.

The Content Widget is designed to support balanced layouts for text and images, which can be configured in hundreds of ways using a combination of columns, column widths image and text alignment, and is your most powerful building tool.

The following example demonstrates how a Content Widget is setup using a Masonry layout, with varying Image Layouts in the columns:

content-layout-magazine

Any image can also be a video,  Soundcloud player, tweet or any oEmbed content by using the Video URL (oEmbed) field in the Featured Media drop-down. Learn more about the Content Widget, or browse our Tutorials for layout tips and customizations.

Not all widgets have a Featured Media button on the excerpts (they should!) , so as a workaround you can insert most basic HTML into the widget’s text or excerpt areas by using the Code view button on the editor toolbar, including image tags. The following will walk you through adding an image tag to your widget’s text area that aligns the image left and allows the text to wrap around it automatically.

  1. Every Layers widget should have a Background option on the right-hand design bar where you can click to select an image. This opens the WordPress media library where you can upload or browse for an existing image. After selecting the image thumbnail, copy the  URL from the right side, then click the X at top-right to close the media library
    • image-file-url
  2. Add your text to your text area and format it as desired.
  3. Click the </> button on the text area’s editor toolbar where you want to insert the image to switch to code view. This works just like the Text tab of the WordPress post editor.
  4. Place your cursor at the start of the text, outside of the <p>  tag
  5. Enter a basic img tag, which looks like this: <img class="" src=""/>  Simple right?
  6. You need to set two main things in this tag, the class  and the src .  Place your cursor inside the quotes after the src  attribute and paste your image URL
    • img-tag-content
  7. Next, place your cursor inside the quotes after the class attribute and enter any one of the following class names, which are provided by WordPress:
    • alignleft
    • alignright
    • aligncenter
    • alignnone
    • img-tag-align
  8. Cick the code button </> again to switch back to visual editing.
  9. Your image will now appear inline with the content:

content-imgalign

There are many drawbacks to doing it this way, including a lack of padding on the image and little control over scaling or ensuring the image is responsive on mobiles. To get around this, you can setup the content in a draft post in WordPress first. This allows you to size the image and add padding if needed. To avoid having to reformat the text after it is pasted, be sure to highlight separate paragraphs and select the paragraph style in the editor. Click the Text view to copy and paste the content into your widget’s Code view.

If your widget has a Featured Media option, just about any combination of text and image can be archived using the widget’s controls vs adding the image directly to the editor.

Using the above example with the left-aligned cat and our text, here is how it looks using a Content widget instead:

content-image-layout

As you can see, you can still “wrap” text around images or place them virtually anywhere in the text by dividing them up into columns to gain better control over placement. To achieve this, we have four columns:

  1. The first column is set to 12 of 12 to be full width and uses a featured image of the cat, left aligned with justified text. By default, the Image Left or Image Right layouts will balance your image and text equally, the same as having two 6 of 12 columns side by side.
  2. The second column has only text and is also set to 12 of 12 with justified text.
  3. The third is just justified text, set to 8 of 12.
  4. The fourth is a 4 of 12 width with only a Featured Image, set to Image Bottom.

content-layout-columns