tt_news: Modify image src - typo3

Question

In order to be able to use lazy loading, I need to modify the src attribute of tt_news' image output like so:
<img src="/foo/bar/baz.png" … /> // <-- before
<img data-original="/foo/bar/baz.png" … /> // <-- after, no src!
I have tried:
plugin.tt_news.displayList.content_stdWrap {
parseFunc < lib.parseFunc_RTE
HTMLparser = 1
HTMLparser.keepNonMatchedTags = 1
HTMLparser.tags.img.fixAttrib.src.unset = 1
}
but to no avail, since
The image in question is not being inserted via RTE, but the "normal" media integration.
That wouldn't copy the src attribute over to data-original before unsetting.
So, what should I do aside from pulling my hair out?

Answer 1

This cannot be solved via typoscript, because the src attribute is hard coded in the cImage function:
$theValue = '<img src="' . htmlspecialchars($GLOBALS['TSFE']->absRefPrefix .
t3lib_div::rawUrlEncodeFP($info[3])) . '" width="' . $info[0] . '" height="' . $info[1] . '"' .
$this->getBorderAttr(' border="' . intval($conf['border']) . '"') .
$params .
($altParam) . ' />';
The only way I see to modify the src attribute is through a user function. tt_news provides a hook for a user function that allows the custom processing of images (see line 2150 of class.tx_ttnews.php).
Example:
Insert the following typoscript:
includeLibs.user_ttnewsImageMarkerFunc = fileadmin/templates/php/user_ttnewsImageMarkerFunc.php
plugin.tt_news.imageMarkerFunc = user_ttnewsImageMarkerFunc->ttnewsImageMarkerFunc
Whereas the file user_ttnewsImageMarkerFunc.php contains:
<?php
class user_ttnewsImageMarkerFunc {
/**
* Fills the image markers with data.
*
* #param array $paramArray: $markerArray and $config of the current news item in an array
* #param [type] $conf: ...
* #return array the processed markerArray
*/
function ttnewsImageMarkerFunc($paramArray, $conf) {
$markerArray = $paramArray[0];
$lConf = $paramArray[1];
$pObj = &$conf['parentObj'];
$row = $pObj->local_cObj->data;
$imageNum = isset($lConf['imageCount']) ? $lConf['imageCount'] : 1;
$imageNum = t3lib_div::intInRange($imageNum, 0, 100);
$theImgCode = '';
$imgs = t3lib_div::trimExplode(',', $row['image'], 1);
$imgsCaptions = explode(chr(10), $row['imagecaption']);
$imgsAltTexts = explode(chr(10), $row['imagealttext']);
$imgsTitleTexts = explode(chr(10), $row['imagetitletext']);
reset($imgs);
if ($pObj->config['code'] == 'SINGLE') {
$markerArray = $this->getSingleViewImages($lConf, $imgs, $imgsCaptions, $imgsAltTexts, $imgsTitleTexts, $imageNum, $markerArray, $pObj);
} else {
$imageMode = (strpos($textRenderObj, 'LATEST') ? $lConf['latestImageMode'] : $lConf['listImageMode']);
$suf = '';
if (is_numeric(substr($lConf['image.']['file.']['maxW'], - 1))) { // 'm' or 'c' not set by TS
if ($imageMode) {
switch ($imageMode) {
case 'resize2max' :
$suf = 'm';
break;
case 'crop' :
$suf = 'c';
break;
case 'resize' :
$suf = '';
break;
}
}
}
// only insert width/height if it is not given by TS and width/height is empty
if ($lConf['image.']['file.']['maxW'] && ! $lConf['image.']['file.']['width']) {
$lConf['image.']['file.']['width'] = $lConf['image.']['file.']['maxW'] . $suf;
unset($lConf['image.']['file.']['maxW']);
}
if ($lConf['image.']['file.']['maxH'] && ! $lConf['image.']['file.']['height']) {
$lConf['image.']['file.']['height'] = $lConf['image.']['file.']['maxH'] . $suf;
unset($lConf['image.']['file.']['maxH']);
}
$cc = 0;
foreach ($imgs as $val) {
if ($cc == $imageNum)
break;
if ($val) {
$lConf['image.']['altText'] = $imgsAltTexts[$cc];
$lConf['image.']['titleText'] = $imgsTitleTexts[$cc];
$lConf['image.']['file'] = 'uploads/pics/' . $val;
$theImgCode .= str_replace('src="', 'class="lazy" data-original="', $pObj->local_cObj->IMAGE($lConf['image.'])) . $pObj->local_cObj->stdWrap($imgsCaptions[$cc], $lConf['caption_stdWrap.']);
}
$cc++;
}
if ($cc) {
$markerArray['###NEWS_IMAGE###'] = $pObj->local_cObj->wrap($theImgCode, $lConf['imageWrapIfAny']);
} else {
$markerArray['###NEWS_IMAGE###'] = $pObj->local_cObj->stdWrap($markerArray['###NEWS_IMAGE###'], $lConf['image.']['noImage_stdWrap.']);
}
}
if ($pObj->debugTimes) {
$pObj->hObj->getParsetime(__METHOD__);
}
// debug($markerArray, '$$markerArray ('.__CLASS__.'::'.__FUNCTION__.')', __LINE__, __FILE__, 2);
return $markerArray;
}
/**
* Fills the image markers for the SINGLE view with data. Supports Optionssplit for some parameters
*
* #param [type] $lConf: ...
* #param [type] $imgs: ...
* #param [type] $imgsCaptions: ...
* #param [type] $imgsAltTexts: ...
* #param [type] $imgsTitleTexts: ...
* #param [type] $imageNum: ...
* #return array $markerArray: filled markerarray
*/
function getSingleViewImages($lConf, $imgs, $imgsCaptions, $imgsAltTexts, $imgsTitleTexts, $imageNum, $markerArray, $pObj) {
$marker = 'NEWS_IMAGE';
$sViewSplitLConf = array();
$tmpMarkers = array();
$iC = count($imgs);
// remove first img from image array in single view if the TSvar firstImageIsPreview is set
if (($iC > 1 && $pObj->config['firstImageIsPreview']) || ($iC >= 1 && $pObj->config['forceFirstImageIsPreview'])) {
array_shift($imgs);
array_shift($imgsCaptions);
array_shift($imgsAltTexts);
array_shift($imgsTitleTexts);
$iC--;
}
if ($iC > $imageNum) {
$iC = $imageNum;
}
// get img array parts for single view pages
if ($pObj->piVars[$pObj->config['singleViewPointerName']]) {
/**
* TODO
* does this work with optionsplit ?
*/
$spage = $pObj->piVars[$pObj->config['singleViewPointerName']];
$astart = $imageNum * $spage;
$imgs = array_slice($imgs, $astart, $imageNum);
$imgsCaptions = array_slice($imgsCaptions, $astart, $imageNum);
$imgsAltTexts = array_slice($imgsAltTexts, $astart, $imageNum);
$imgsTitleTexts = array_slice($imgsTitleTexts, $astart, $imageNum);
}
if ($pObj->conf['enableOptionSplit']) {
if ($lConf['imageMarkerOptionSplit']) {
$ostmp = explode('|*|', $lConf['imageMarkerOptionSplit']);
$osCount = count($ostmp);
}
$sViewSplitLConf = $pObj->processOptionSplit($lConf, $iC);
}
// reset markers for optionSplitted images
for ($m = 1; $m <= $imageNum; $m++) {
$markerArray['###' . $marker . '_' . $m . '###'] = '';
}
$cc = 0;
foreach ($imgs as $val) {
if ($cc == $imageNum)
break;
if ($val) {
if (! empty($sViewSplitLConf[$cc])) {
$lConf = $sViewSplitLConf[$cc];
}
// if (1) {
// $lConf['image.']['imgList.'] = '';
// $lConf['image.']['imgList'] = $val;
// $lConf['image.']['imgPath'] = 'uploads/pics/';
// debug($lConf['image.'], ' ('.__CLASS__.'::'.__FUNCTION__.')', __LINE__, __FILE__, 3);
//
// $imgHtml = $pObj->local_cObj->IMGTEXT($lConf['image.']);
//
// } else {
$lConf['image.']['altText'] = $imgsAltTexts[$cc];
$lConf['image.']['titleText'] = $imgsTitleTexts[$cc];
$lConf['image.']['file'] = 'uploads/pics/' . $val;
$imgHtml = str_replace('src="', 'class="lazy" data-original="', $pObj->local_cObj->IMAGE($lConf['image.'])) . $pObj->local_cObj->stdWrap($imgsCaptions[$cc], $lConf['caption_stdWrap.']);
// }
//debug($imgHtml, '$imgHtml ('.__CLASS__.'::'.__FUNCTION__.')', __LINE__, __FILE__, 3);
if ($osCount) {
if ($iC > 1) {
$mName = '###' . $marker . '_' . $lConf['imageMarkerOptionSplit'] . '###';
} else { // fall back to the first image marker if only one image has been found
$mName = '###' . $marker . '_1###';
}
$tmpMarkers[$mName]['html'] .= $imgHtml;
$tmpMarkers[$mName]['wrap'] = $lConf['imageWrapIfAny'];
} else {
$theImgCode .= $imgHtml;
}
}
$cc++;
}
if ($cc) {
if ($osCount) {
foreach ($tmpMarkers as $mName => $res) {
$markerArray[$mName] = $pObj->local_cObj->wrap($res['html'], $res['wrap']);
}
} else {
$markerArray['###' . $marker . '###'] = $pObj->local_cObj->wrap($theImgCode, $lConf['imageWrapIfAny']);
}
} else {
if ($lConf['imageMarkerOptionSplit']) {
$m = '_1';
}
$markerArray['###' . $marker . $m . '###'] = $pObj->local_cObj->stdWrap($markerArray['###' . $marker . $m . '###'], $lConf['image.']['noImage_stdWrap.']);
}
// debug($sViewSplitLConf, '$sViewSplitLConf ('.__CLASS__.'::'.__FUNCTION__.')', __LINE__, __FILE__, 2);
return $markerArray;
}
}
?>
Most of this code is copied from class.tx_ttnews.php. The important line is the following (in each of the two functions):
str_replace('src="', 'class="lazy" data-original="', $pObj->local_cObj->IMAGE($lConf['image.']))
Then you'll get the following image tags:
<img class="lazy" data-original="uploads/pics/myimage.jpg" width="110" height="70" border="0" alt="" />

Answer 2

In 2019 tt_news is still around. I use it with TYPO3 8 LTS, the version from github as its not anymore in the official extension repository. (For new Projects use "news")
So I think, because tt_news has to be updated in TYPO3 9, its legit to just hack the code directly, by changing tt_news/Classes/Plugin/TtNews.php like this:
--- a/Classes/Plugin/TtNews.php
+++ b/Classes/Plugin/TtNews.php
## -2621,6 +2621,7 ## class TtNews extends AbstractPlugin
$markerArray['###NEWS_IMAGE###'] = $this->local_cObj->stdWrap($markerArray['###NEWS_IMAGE###'],
$lConf['image.']['noImage_stdWrap.']);
}
+ $markerArray['###NEWS_IMAGE###'] = $this->LazyLoading($markerArray['###NEWS_IMAGE###']);
}
}
## -2632,6 +2633,13 ## class TtNews extends AbstractPlugin
}
+ function LazyLoading($html){
+ $html = str_replace('src="', 'class="lazy" data-original="', $html);
+ return $html;
+ }
+
+
/**
* Fills the image markers for the SINGLE view with data. Supports Optionssplit for some parameters
*