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">