Simple Image


get Simple Image 1.0

for Typesetter CMS ver. 5 and newer

Unpack the ZIP into your /addons directory and install it via
Admin Toolbox → Plugins → Manage → Available → Install

Simple Image is a quite basic content type (section) meant for use cases where neither the built-in Image section type nor Responsive Image aren’t ideal: Its main purpose is to provide an easy user interface dedicated to situations, where images need distinct, replicable properties–much like the Simple Button plugin does with buttons. There is barely anything you couldn’t also achieve using inline images in CK Editor. It’s just more convenient in some situations, e.g. when you use responsive grid layouts with uniform elements or need vertical alignment.


Version 1.0 – finally. It will be available on short-term
Version 1.0b1 – now also correctly remembers the state 'scale to fit'


The Editor UI

At first glance, the editor component looks pretty much like the one from Responsive Image, but it has no fancy focuspoint feature and there is no caption. In fact the image preview area has (at least up to now) no functionality–I might add a non-destructive cropping feature in a future version. 

Select Image

The [Select Image] button will bring up Typesetter’s file manager (AKA Finder) where you can, guess what… :o)

Alternative Text

The second element is the Alternative Text (the image’s alt attribute). When empty, it’s value will be auto-generated from the image’s file name by replacing undersores with blanks and stripping the file extension. Clicking the [A] button will perform the same action, replacing any already set value.


The field below is for linking. Type or paste an URL here. An autocomplete dropdown will suggest internal page URLs. The button with the file icon will pop up Finder to select a file to be linked.


The dropdown select for sizing has 4 options:

  • original width — this will keep the image’s natural pixel dimensions, which may make the image protrude it’s section width. Barely needed but added for completeness.
  • shrink to fit — this resembles what Bootstrap’s img-responsive class does: It limits the image’s maximum width to the section’s with, preventing the image to protrude the section.
  • scale to fit — this will not only shrink the image but also scale small images up to fill the section’s width. Also a rather rare use case, since upscaled images don’t look too pretty. You decide.
  • custom width — this will force the image to a defined width (of course keeping it’s proportions). The input areas below will let you set this width in px, em or % units. Good e.g. for fine-tuning sponsor logos in a row. (I actually initially made the plugin for this particular use case).


Alignment will–for obvious reasons–only apply in cases where the image’s size is smaller than the section size. This is always the case when …

  • The image’s original pixel size is smaller than the section and sizing is set to original width or shrink to fit
  • Using custom width to scale a (larger) image down to a particular size

Vertical alignment will only apply (or, to be precise, be visible) when the section has a defined height. A defined section height may derive from a height or min-height style attribute set in Section Attributes (via the Options icon in Section Management) or CSS classes + rules defined in your theme stylesheet or in Layout Editor. (Hint: display:table + display:table-cell or display:flex may be your friend in cases when equal column heights with vertically centerd images are needed).

Open Link in Colorbox

This will load the link target into Colorbox. Internal pages will only load the page content (without nav, sidebars, footer, etc.) but this will only work when you’re logged off for technical reasons. You might already know this option from the Responsive Image plugin .

Show Full-Screen Button

Also already known from Responsive Image: Uses the browser’s fullscreen mode.