TYPO3 - get thumbnail for menue from CONTENT of subpage

Question

I need a typoscript for adding a thumbnail for each menu entry by getting a pic NOT from page properties, but from first content element of a specified column.

Current typoscript for the menu is that; it basically generates a list of subpages which a named as "news".

temp.newsPage = COA
temp.newsPage.40 = HMENU
temp.newsPage.40 {
  special = directory
  special.value = {$plugin.tx_rstwstdtpl.settings.menuNewsPagesStart}
  includeNotInMenu = 1 
  wrap = <div class="news-latest-container">|</div>
  1 = TMENU
  ### sortieren nach DATUM ###
  1.alternativeSortingField = lastUpdated  DESC
  ### sortierung ende ###
  1.NO.allWrap.insertData = 1
  1.NO.allWrap = <div class="news-latest-item">|</div>
  1.NO.doNotLinkIt = 1
  1.NO.doNotShowLink = 1
  1.NO.before.cObject = COA
  1.NO.before.cObject {
    5 = COA
    5.10 = TEXT
    5.10.value = <div class="selector date
    # DATUM
    5.30 = TEXT
    5.30.field = lastUpdated
    5.30.strftime=%Y
    5.90 = TEXT
    5.90.value = ">
# letzte Aenderung
    10 = TEXT
    # anzeige NewsDATUM = metadaten - lastupdated
    10.field = lastUpdated
    # 10.strftime=%d.%m.%Y %H:%M
    10.strftime=%d.%m.%Y
    10.wrap = <span class="news-latest-date">|</span><br />
# title
    20 = TEXT
    20.field = title
    20.wrap = <h2><span class="news-latest-header">|</span></h2>
    20.typolink.parameter.field = uid
# text
    30 = TEXT
    30.field = abstract
    30.crop = {$plugin.tx_rstwstdtpl.settings.teaserTextLength}|&nbsp;...|1
    30.wrap = <p>|</p>
    30.required = 1

    40 = TEXT
    40.value = </div>
  }
}

It's easy to generate a thumbnail from page properties / media of the subpages. But have no idea how a typoscript-query will work for content of subpages.

Thank you very much, Thomas

Answer 1

Here's another snippet with a similar approach you can use as resource. This is originally a list of subpages with teasers, but it can easily be a regular menu.

I use fluidtemplates in the renderObj, but you could also work with plain TypoScript.

# TEASER NAV
#####################################################################

lib.subpages_teaser = HMENU
lib.subpages_teaser {
  // I use a directory menu here
  special = directory
  // but this could also be a normal menu without "special" property
  // directory menu entrypoint
  special.value = 123
  // alternatively: entrypoint for use as teasers of subpages
  // special.value.data = leveluid:-1

  // exclude shortcut
  excludeDoktypes = 4
  // but show "not in menu" pages (if needed)
  //includeNotInMenu = 1
  1 = TMENU
  1 {
    NO {
      // * If you want to link only certain parts of the following COA:
      // doNotLinkIt = 1
      allWrap = <section>|</section>
      stdWrap.cObject = COA
      stdWrap.cObject {
        10 = COA
        10 {
          // * If doNotLinkIt is enabled, link this part
          // stdWrap.typolink.parameter.data = field:uid
          // get data from Content Element
          10 < styles.content.get
          10 {
            select {
              // https://forum.typo3.org/index.php/t/192687/content-in-tmenu
              selectFields = image
              pidInList.data = field:uid
              where = colPos=13
            }
            // and process it via a fluidtemplate
            renderObj = FLUIDTEMPLATE
            renderObj {
              // https://stackoverflow.com/questions/36072136/pass-content-from-typoscript-to-fluid-template-in-typo3-7-6
              file = path/to/my/partials/TeaserImage.html
              dataProcessing {
                10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                10.references.fieldName = image
              }
            }
          }
          20 = TEXT
          20 {
            field = nav_title // title
            wrap = <h2>|</h2>
          }
          // LEAD
          30 < styles.content.get
          30 {
            select {
              selectFields = header
              pidInList.data = field:uid
              where = colPos=2
            }
            renderObj = FLUIDTEMPLATE
            renderObj {
              file = path/to/my/partials/TeaserLead.html
            }
          }
        }
      }
    }
  }
}

Here's an example for one of the fluid templates for the renderObj:

<figure>
  <f:if condition="{files.0}">
    <f:then>
    <img src="<f:uri.image image="{files.0}" width="419" height="279c"/>"
      alt="{files.0.alternative}"
      />
    </f:then>
    <f:else>
      <f:image src="/fileadmin/my/images/grey.png" width="600" height="750c"/>
    </f:else>
  </f:if>
</figure>

Related Links:

Ages-old http://www.typo3wizard.com/de/artikel/das-content-objekt.html has helped me understanding the CONTENT object.

https://forum.typo3.org/index.php/t/192687/content-in-tmenu is basically your question, resulting in select.pidInList.data = field:uid

Pass content from TypoScript to fluid template in TYPO3 7.6 is about how to get images into the Fluidtemplate.

Answer 2

What you need is a a select to gather the uids of the tt_content records which belong to the special column in the page you currently generate the teaser for.
That can be done in typoscript with the object RECORDS or CONTENT.

for example use your before.cObject at 35 like this:

35 = CONTENT
35 {
  table = tt_content
  select {
    // we are in context of that page, so data is the pages record
    pidInList.field = uid
    // the special column:
    where = colPos = 123
    // select only content with images (something like:)
    andWhere = media > 0
    // one image is enough
    max = 1
  }
  // now we have to do it a little more complicated as images are 
  // handled with FAL records
  renderObj = FILES
  renderObj  { 
    references { 
      table = tt_content
      // we are now in context tt_content 
      uid.data = current:originalUid // current:uid
      // depending whether you use CSC or FSC:
      fieldName = media
    } 
    renderObj = IMAGE 
    renderObj {
      file { 
        import.data = file:current:uid 
        treatIdAsReference = 1 
        width = 150c 
        height = 150c 
      } 
      altText.data = file:current:alternative
      titleText.data = file:current:title
      params = class="menu-img" 
      stdWrap.typolink.parameter.field = pid
    } 
    maxItems = 1 
  }

I hope this is correct as I gather it without verification.

and BTW: make use of wraps (e.g. with dataWrap you can even insert data) instead of very big COAs, so you can be sure of matching opening and closing tags.