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

您可以使用.field =方法访问宽度和高度（tt_content字段imagewidth＆amp; imageheight），并使用.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">

Typo3：如何设置宽度，高度和高度等图像属性？

1 个答案: