How to set class to image of tt_content element in typo3


Many time we need to add class to image of tt_content element.

Following script will help you for add class to image element or you can set your own style to image.

tt_content.image.20.1.params.cObject = CASE
tt_content.image.20.1.params.cObject {
  key.field = layout
  default = TEXT
  default.value = class="YOUR-CLASS-NAME"
}

OR 

tt_content.image.20.1.params.cObject = CASE
tt_content.image.20.1.params.cObject {
  key.field = layout
  default = TEXT
  default.value = style="display:block;"
}

Above script will help for set default class to image.

If we want to set some style to second image and third image then following script will help you more.

tt_content.image.20.1.params.cObject = CASE
tt_content.image.20.1.params.cObject {
  key.field = layout
  default = TEXT
  default.value = class="class1"
  1 = TEXT
  1.value = class="class2"
  2 = TEXT
  2.value = class="img-responsive"
}

It will also help you when we want to add class related with responsive layout.

I hope it will work for you and make your day 😉

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to change default max image width in typo3


Default image width limit to 600 px in Typo3.

We can easily change this setting using TypoScript.

These TypoScript can be usually located on the root Template record.

If not you can try using the object browser to find the exact location.

Following typoscript should do the trick:

In CONSTANTS:

styles.content.imgtext.maxW = 800



In SETUP:

tt_content.image.20.maxW = 1080

We can also set height of image.

Like : tt_content.image.20.maxH = 500

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to create thumb image in typo3 extension developement


For create you thumb image :
First you have to create Instance

$this->cObject	= t3lib_div::makeInstance('tslib_cObj');
$img = array();
$img['image.']['file.']['height']  = 330;
$img['image.']['file.']['width']   = 940;
#$img['image.']['file.']['maxH']   = 330;
#$img['image.']['file.']['maxW']   = 940;
$img['image.']['file.']['params']  ='-quality 100';
$img['image.']['titleText']        = "Title Text";
$img['image.']['altText']          = "Alter Text";
$img['image.']['file']             = "uploads/tx_jscontentslider/jainish.png";  // Your image path

Below code is render direcly image HTML code

echo $this->cObject->IMAGE($img['image.']);

Output :

<img width="940" height="330" title="Title Text" alt="Alter Text" src="typo3temp/pics/jainish_01_9a7a54d707.jpg" />

If you want only image src then you have to use below code

echo $this->cObject->IMG_RESOURCE($img['image.']);

Output :

typo3temp/pics/jainish_01_9a7a54d707.jpg

If you want to resize the image size depend on height and width then you have to use below code

$img['image.']['file.']['maxH']	= 330;
$img['image.']['file.']['maxW']	= 940;

Instead of

$img['image.']['file.']['height']	= 330;
$img['image.']['file.']['width']	= 940;

Below code is use for create thumb with best quality

$img['image.']['file.']['params']   ='-quality 100';

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya