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.

Note: less support / bootstrap 4  dropped - only bootstrap5

Requirements

This plugin depends on bootstrap_package  v. 12.0.X - 14.x. wiith TYPO3 11/12.
For older versions search the repository.
 

Download

Download it from T3 repository


Howto install

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

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.
Columns: 2

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.