Typo3：如何設置像寬度，高度和ALT等圖像屬性？

Question

我有以下typoscript代碼的片段，它顯示具有定義類名稱的圖像。缺乏的是圖像的寬度，高度，對齊等屬性;它們已經在後端編輯器中設置了。

30 = FILES 
    30 { 
     references { 
      table = tt_content 
      fieldName = image 
     } 
     renderObj = IMAGE 
     renderObj { 
      file.import.data = file:current:publicUrl 
      params = class="img-responsive img-centered" 
     } 
    } 
... 
... 
} 

呈現的HTML是一樣的東西：<img class="img-responsive img-centered" width="600" height="880" border="0" alt="" src="preview.png"> 我怎麼也顯示自定義的寬/高/對齊從後端設置屬性？

==增加了更多的細節==

這是我這部分的代碼的整個區塊：

temp.portfolio = CONTENT 
temp.portfolio { 
    table = tt_content 
    select { 
    begin = 1 
    orderBy = sorting 
    where = (colPos = 2) 
    } 
    renderObj = COA 
    renderObj { 

10 = TEXT 
10 { 
    required = 1 
    wrap = <a class="portfolio-link" data-toggle="modal" href="#portfolioModal"><div class="portfolio-hover"><div class="portfolio-hover-content"><i class=" | "></i></div></div> 
    stdWrap.field = custom_icon 
} 

15 = FILES 
15 { 
    references { 
     table = tt_content 
     fieldName = image 
    } 
    renderObj = IMAGE 

    renderObj { 
     file.import.data = file:current:publicUrl 
     params = class="img-responsive" 
    } 
} 

20 = TEXT 
20 { 
    required = 1 
    wrap = </a><div class="portfolio-caption"><h4> | </h4> 
    stdWrap.field = header 
    #parseFunc =< lib.parseFunc_RTE 
} 
30 = TEXT 
30 { 
    required = 1 
    wrap = <p class="text-muted"> | </p> 
    stdWrap.field = subheader 
    #parseFunc =< lib.parseFunc_RTE 
} 
40 = TEXT 
40 { 
    wrap = </div> 
} 

50 = CONTENT 
50 { 
    table = tt_content 
    select { 
    uidInList { 
     field = header_link 
     stdWrap.replacement.10 { 
     search = /^.+#/ 
     replace = 
     useRegExp = 1 
     } 
    } 
    max = 1 
    where = (pid = 11) 
    pidInList { 
     field = header_link 
     stdWrap.replacement.10 { 
     search = /#.+$/ 
     replace = 
     useRegExp = 1 
     } 
    } 
    } 
    renderObj = COA 
    renderObj { 
    10 = TEXT 
    10.value { 
     required = 1 
     wrap = <h2> | </h2> 
     field = header 
    } 
    20 = TEXT 
    20.value { 
     required = 1 
     wrap = <p class="item-intro text-muted"> | </p> 
     field = subheader 
    } 
    30 = FILES 
    30 { 
     references { 
      table = tt_content 
      fieldName = image 
     } 
     renderObj = IMAGE 

     renderObj { 
      file { 
       import.data = file:current:publicUrl 
       width.field = imagewidth 
       height.field = imageheight 
      } 

      params = class="img-responsive img-centered" 
      altText.data = file:current:alternative 

     } 
    } 
    40 = TEXT 
    40.value { 
     required = 1 
     wrap = | 
     field = bodytext 
     parseFunc =< lib.parseFunc_RTE 
    } 
    stdWrap.wrap = <span class="float-window" style="display:none"> | </span> 
    } 
} 
stdWrap.wrap = <div class="col-md-4 col-sm-6 portfolio-item"> | </div> 
} 
} 

Answer 1

您可以訪問的寬度和高度（tt_content領域圖像寬度& imageheight）與.field =方法以及使用.data = file:current:propertyName方法的圖像屬性。我在下面爲您創建了一個片段。

lib.myContent < styles.content.get 
lib.myContent.renderObj = COA 
lib.myContent.renderObj { 
    10 = FILES 
    10 { 
    references { 
     table = tt_content 
     uid.field = uid 
     fieldName = image 
    } 
    renderObj = IMAGE 
    renderObj { 
     file { 
     import.data = file:current:publicUrl 
     width.field = imagewidth 
     height.field = imageheight 
     } 
     altText.data = file:current:alternative 
     params.cObject = COA 
     params.cObject { 
     10 = TEXT 
     10.value = class="img-responsive img-centered" 

     20 = CASE 
     20 { 
      key.field = imageorient 
      default = TEXT 
      default.value = center 

      2 < .default 
      2.value = left 
      10 < .2 
      18 < .2 
      26 < .2 

      1 < .default 
      1.value = right 
      9 < .1 
      17 < .1 
      25 < .1 
     } 
     20.stdWrap.noTrimWrap = | align="|"| 
     } 
    } 
    } 
} 

上面的代碼片斷需要從colPos = 0當前頁面所有內容元素和僅渲染不顧內容類型的圖像。

這將輸出。

<img src="/fileadmin/_processed_/csm_file_a51148bd89.jpg" class="img-responsive img-centered" align="center" alt="Your alt text" height="41" width="200">