How to Add Images to Layers Widget Excerpts or Widget Content

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

Each Layers widget traditionally has a main Widget Description area with a Rich Text Editor or “RTE” toolbar that allows basic styling of your content such as bolding, lists, italics etc.

This editor is not the same as the WordPress post editor and has limitations based on what is possible in the Customizer and what is safe to allow in this kind of content zone. For this reason you won’t find some functionality like image or file uploading, or the ability to insert scripts.

In most cases, you can use a combination of columns and column sizing with Masonry to get images and text to sit in the layout you need, so inserting images into the RTE fields is not necessary. For example in the content widget, add the image to one column using the Featured Media button, and the text to the other, then manipulate the position that way.

In widgets where only a Widget description is available, or where there is no content options bar with a Featured Media option, you can use the RTE field’s Code View to insert an img  tag anywhere in your content. This works best with widgets that have large format content areas such as the Content Widget, Tabs Widget, Accordions or Story Widget – use caution when adding code to Slider Widgets as they have limited space,

  1. Enter the text and format it as you wish
  2. Click the code view button on the RTE toolbar </>
    • rte
  3. Place your cursor where you want to insert the image
  4. Copy and paste the following. This is a basic HTML image tag you can learn more about on W3Schools.
    • <img src="file-url" alt="Title"/>
  5. Click the Background option on the design bar and click Choose Image to access your Media Library. You can also do this in a new tab directly from the WordPress admin under Media
  6. Upload your image or browse the library and select it. On the right side you can see the File URL. Click into the field and highlight the whole thing (or hit Ctrl/Cmd+A)
  7. X out of the Media Library and replace file-url in the sample code with your copied URL (highlight and hit Ctrl/Cmd+V)
    • Example: <img src="http://www.mysite.com/wp-content/uploads/2016/myimage.jpg" alt="Title"/>
  8. That’s it! You can add width and height parameters or a custom class if you wish (see the reference link above)
  9. Click the Code View button again to return to the formatted view.

Copying From Posts

You can draft complex layouts in the Post editor, then click the Text tab to copy the content and paste it into the code view of the widget RTE field. This works best in accordions, tabs and other widgets with large format content areas.

An easier way to add images or galleries to widget content areas is with a shortcode. See How to Add Galleries to Layers Content Widget Columns for the basic gallery shortcode, or checkout the image shortcode options available in popular plugins such as Layers Bootstrap Shortcodes or ShortCodes Ultimate.