Image widgets

A nice and contemporary design of a webs page is nearly impossible to imagine without images: slideshow, gallery, big images, etc. When you enrich your page with visuals, your content only gets better of that. N1ED offers several ways to insert images using widgets. Let's take a look at them one by one.

Image iconImage

The Image widget allows inserting a picture to the content and then editing it. To insert an image, click the Image button Image button on the toolbar.

The Image widget closely integrates with file uploading tools. So, when you click the widget button you will instantly see the uploading dialog where you can select a way to upload an image:

  • Browse — choose a file from your server
  • Upload — select a file from your computer
  • Relocate — move file to your server by URL
  • Embed — embed an image without uploading it to the server using Base64 URI Scheme. Recommended for small images like icons.
  • Link — use an external URL
File uploader dialog screenshot
Choose how to upload image

After you insert the image, you can see its settings and tools to edit it on the sidebar.

Edit image dialog screenshot
Edit image in dialog mode

Image widget has the following capabilities:

  • You can replace an image via Browse and Upload option
  • The inserted image can be edited (crop, resize, filter, and etc.) using the built-in Image Editor Edit image icon.
  • Make image responsive with multiple sizes generation

    Flmngr file manager will automatically create optimized previews for all image widgets you have inside TinyMCE or CKEditor. You can insert the Preview widget (a-la LightBox interactive image preview) or use the responsive Image widget transparently.

  • Alternative text for the image
  • Fit a container. Some images can be too large to display them on the screen without scaling them down. To make the image fit the required area, use this option.
  • Configure image dimensions with Width and Height parameters
  • Image alignment (Left / Center / Right)
  • Tag options are also available to fine-tune styles and classes in the <img> tag.
  • Convert image to Image Preview

Image Preview iconImage Preview

The Image Preview widget is basically an Image widget wrapped to a link that points to the full-size image. A user sees a thumbnail, clicks it and sees the image fullscreen.

By default, opening images on the page is managed by the standard script like LightBox, but you can work with your own script as well.

At any time you can return to the initial state of the image with the option "Convert to original size image" on the Actions panel.

Edit image preview screenshot
Image Preview widget

Image Gallery allows you to select images and place them on the page as a group of smaller thumbnails. Clicking a thumbnail open the original image fullscreen. Select a way to add pictures to the gallery, and add images to insert. The image adding dialog allows you to upload multiple images.

You can customize the template of both the gallery and its nested widgets similar to Image Preview. Click the Image Gallery tab on breadcrumbs to switch to editing of the gallery appearance. Here you can set the Background of the gallery, height and width of thumbnails.

Edit image gallery screenshot
Edit Image Gallery

A gallery can be changed: modify the order of images, add new images, delete them. Use the Manage gallery button on the sidebar to bring up the editing dialog. After each change, images are automatically resized to match the specified preview parameters.

Resizing images screenshot
Resizing images

You can do the same for an individual thumbnail. To do this, select a picture and click the corresponding settings in the Actions section.

To make images in the gallery look nice, make sure they all have the same size. You may need additional tools for that, such as resize/crop. You can bring up Image Editor when you select the image, directly from Flmngr file manager, or after you insert the image using the Edit image icon Edit button on the sidebar.