Insert Image (Editor Tool)
Insert, position, and define images with a few clicks
One of the new features in Innovation+Science 2 theme is Insert Image option – a new solution for inserting and positioning images in the content. It is placed right next to Lightbulb icon – above the WordPress editor that is used for editing pages or posts. With this feature you can not only insert an image into content, but also decide about its position, description, margins, size, timthumb thumbnail action, link, or loading style.
The big advantage of this feature is that it works for both editors – HTML and Visual editor. It also allows you to insert image code as a complete HTML code or as a shortcode (you can decide about this with one click in Insert Image options panel) – this might be important especially if you would like to later edit this code manually. Before you click on this option you must have a copy of image URL path that was earlier uploaded in Media Library. Then click on Insert Image icon and you will see an option panel for inserting image into content.
Insert Image options panel is a tool similar to Lightbulb shortcodes options. Here you can define all parameters without searching in the documentation or remembering the code. If you want an image placed on the right and surrounded by text, you can switch one option and it is set.
With these options you can create many setup combinations for images, you can decide for example: if it should have an description, how description text should be aligned, if image should link to lightbox and show a larger size version, or maybe the image should link to some destination. You can even add a text link at the end of the description, so it will link to defined destination.
A simple example how to use Insert Image
These two images were inserted into content using Insert Image options. All you need to select the right place in editor – for this example it is right above this text paragraph. Upload image, copy URL path, click on Insert Image option and define all parameters. For image on the left Image Position: Left was selected, for image on the right Image Position: Right was selected. For floating images you can also write a margin value – for example: images floating to the left usually should have a small right margin like 10 pixels. And that’s it.
There are plenty of possibilities for images and all are easy to setup with Insert Image feature. It is a faster way to insert images into the right position and useful also for editors without any special html/css knowledge.