2011-11-20 318 views
1

为了能够使用lazy loading,我需要修改tt_news'图像输出的src属性,像这样:tt_news:修改图片src

<img src="/foo/bar/baz.png" … /> // <-- before 
<img data-original="/foo/bar/baz.png" … /> // <-- after, no src! 

我曾尝试:

plugin.tt_news.displayList.content_stdWrap { 
    parseFunc < lib.parseFunc_RTE 
    HTMLparser = 1 
    HTMLparser.keepNonMatchedTags = 1 
    HTMLparser.tags.img.fixAttrib.src.unset = 1 
} 

但无济于事,因为

  • 有问题的图像没有通过RTE插入,但“正常”媒体integrati上。
  • 在未设置之前,不会将src属性复制到data-original

那么,除了拉我的头发外,我该怎么办?

回答

2

这无法通过Typo脚本来解决,因为src属性在功能的CImage硬编码:

$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) . ' />'; 

我看到修改的src属性是通过用户功能的唯一途径。 tt_news为用户功能提供了一个钩子,允许自定义处理图像(请参阅class.tx_ttnews.php的第2150行)。

实施例:

插入以下的TypoScript:

includeLibs.user_ttnewsImageMarkerFunc = fileadmin/templates/php/user_ttnewsImageMarkerFunc.php 
plugin.tt_news.imageMarkerFunc = user_ttnewsImageMarkerFunc->ttnewsImageMarkerFunc 

鉴于文件user_ttnewsImageMarkerFunc.php包含:

<?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; 
     } 



    } 

?> 

大部分代码是从class.tx_ttnews复制。 PHP。最重要的行如下(每两个函数):

str_replace('src="', 'class="lazy" data-original="', $pObj->local_cObj->IMAGE($lConf['image.'])) 

然后你会获得下面的图片标签:

<img class="lazy" data-original="uploads/pics/myimage.jpg" width="110" height="70" border="0" alt="" />