Textimage size

Author: Alessandro Tuveri,  at(at)specialistaweb.it 

What is this? 

Textimage_size is a little plugin to allow you select a different layout size for the content type: text/image, text/pic, text/media. The main purpose is to "break" the bootstrap package limitation, that offerts only the 50% space to text and the 50% space to host one or more images.

Requirements

This plugin depends on bootstrap_package > 9.5 to 12.0.x and requires TYPO3 v.9.5-  v. 11.5x

Download

Download it from T3 repository

Howto update

  • since v. 2.0.x there is a bug (TYPO3?!?) so that the library appears listed twice: old name and new name that are identical)
  • please goto  Web > Templates > edit whole template and add the library from "includes"
  • add the proper library (see below)

Howto install

  • Download it from T3 repository (via extension manager) then run the installation process
  • goto Web > Templates > edit whole template and add the library from "includes":

Since version 2.1.0 you will see three different libraries (older version use only the first listed here) - please select the appropriate library:

Text/Image size - this is the same of the following (Bootstrap4), due to backward compatibility

Text/Image size Bootstrap4 (SCSS) - this library do not  add any SCSS, it use the SCSS of Bootstrap Package

Text/Image size Bootstrap5 (SCSS)  - this library add some  SCSS and use the SCSS of Bootstrap Package

 

Howto use

  • Edit the preferred content, i.e. text with media
  • Under tab Appearance, section Layout select the preferred  size for the image column (options: image/media size from 8% to 91%)
  • the text  column size will be automatically calculated
  • select from tab Image or Media (depends on the content type in use) the layout preferred (image to the right, left, ecc.) from Gallery settings
  • since version 1.0.0 above and below image/media centered are supported

Demos

Demo 1

textpic (text/images) this image column  is resized to 25%. Then the text occupies the remaining space (75%)

Demo 2

content type text/media. the movie is resized to 33%. 

Demo 3

textpic (text/images) - the space hosting the images is resized to 66%. The remaining space is assigned automatically to the text.

Demo 4

This content is textmedia with imagebelow centered and resized to 50%. To do this select from Appereance tab, Layout > image/media size 50% and from Media tab below center

Demo 5

textpict content (text with images) - image colum is resized to 75% and put above, columns: 4

Dermo 6

On some cases you want to obtain the following output, where you put the image to the left (resized to 25%) without any text to the right. In this way you can get a single image aligned (right/left side) with the preferred witdh:

Demo 7

Following the previous example, here the image container is set to 66% of the column space available (100%). As you can see here, the output was set to 4 images (1 row), with the option "Beside text left";  if you select "Beside text, right" you obtain a different output with the images aligned to the right side.