Responsive images

Bootstrap 4 in Tiki 19

Tiki 19 transitions from Bootstrap 3 to Bootstrap 4. Of course responsive images (that automatically resize to fit the display area) work as before but as of this Bootstrap and Tiki version, the relevant CSS class is "img-fluid". This update is already made in the code for Tiki 19, such as in Plugin Img, where image responsiveness is a default property, but for any instances of HTML/CSS code that are input manually by site admins or editors, the new CSS class should be used.

Bootstrap 3 in Tiki 13 - 18

As described at http://getbootstrap.com/css/#images, "Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element."

As of Tiki 14, images in wiki text (wiki pages, blog and forum posts, etc.) are responsive. To turn this characteristic off, use a ''responsive="n" parameter in the IMG plugin.

There have been reports of images that formerly were centered in the page are no longer centered after an upgrade to Tiki 14.

• This is due to images having the responsive class by default.
  • To center the image again, give it the class "center-block".

<div class="center-block">{img ...}</div>

To center image in ARTICLES add "imalign=center" instead.

{img imalign=center ...}

(This image is for demonstration purposes only; please disregard its content.)

{img class="img-responsive" link="#"  title="example image" alt="example image" fileId="428"}

produces: