TYPO3 Read content from subpages

Question

I have a TYPO3 page with the following page structure:

-top level
     -sub level 1
     -sub level ...
     -sub level n

On top level I would have a preview of sublevel 1 to sublevel n inlcuding a link.

I want to grap tage page title of each subpage, and from the first content element which is regular text/image the first image.

So each time the top level page is loaded the data should be fetched and render dynamically the content of top level page.

Is that possible?

Update:

So I need to make an extension template for the page of which I want to display the suppages as teaser?

temp.unterseiten = CONTENT
temp.unterseiten {
    table = pages
    select {
        pidInList.field = uid
        orderBy = sorting
    }
    renderObj = COA
    renderObj {
        10 = TEXT
        10.field = title
        10.wrap = <h2>|</h2>
        20 = CONTENT
        20 {
            table = tt_content
            select {
                pidInList.field = uid
                orderBy = sorting
            }
        }
    }
}

temp.kumulierterInhalt = COA
temp.kumulierterInhalt {
    10 = TEXT
    10.field = title
    10.wrap = <h1>|</h1>
    20 = CONTENT
    20 {
        table = tt_content
        select {
            orderBy = sorting
        }
    }
    30 < temp.unterseiten
    30.renderObj {
        30 < temp.unterseiten
        30.renderObj {
            10.wrap = <h3>|<h3>
            30 < temp.unterseiten
            30.renderObj {
                10.wrap = <h4>|<h4>
            }
        }
    }
}

and there I can add in the setup this code? and how do I select the column I want to post the content into?

I tried it like this:

nothing was displayed

Setup from main page

page = PAGE
page {
 config.simulateStaticDocuments = 0
 config.baseURL = http://
 config.tx_realurl_enable = 1 
  config.linkVars = L(0-1)

 config.doctype = html5
 meta.revisit-after = 7 days
 meta.robots = all
 meta.rating = general
 meta.viewport = width=device-width, initial-scale=1, maximum-scale=1
 meta.PAGE-TOPIC = Information
 meta.PAGE-TYPE  = Information

 shortcutIcon = fileadmin/design/images/favicon.ico

 includeCSS {
   screen1 = fileadmin/design/css/bootstrap.css
   screen1.title = display
   screen1.media = screen 

   screen2 = fileadmin/design/css/style.css
   screen2.title = display
   screen2.media = screen 

   screen3 = fileadmin/design/css/font-awesome.min.css
   screen3.title = display
   screen3.media = screen 

   screen4 = fileadmin/design/css/lightbox.min.css
   screen4.title = display
   screen4.media = screen       
  }

  includeJS {
    file1 = fileadmin/design/js/jquery-2.2.0.min.js
    file2 = fileadmin/design/js/bootstrap.min.js
    file4 = fileadmin/design/js/lightbox.min.js
    file5 = fileadmin/design/js/lightbox.js
    }

}

page.10.renderObj {

 # Text is used for the text content element.
  text = COA
  text {

    10 = TEXT
    # The field tt_content.header normally holds the headline.
    10.stdWrap.field = header
    10.stdWrap.wrap = <h1>|</h1>

    10 = TEXT
    # The field tt_content.bodytext holds the content text.
    10.stdWrap.field = bodytext
    10.stdWrap.wrap = <p>|</p>

  }
}

page.20 = TEMPLATE
page.20.template = FILE
page.20.template.file = fileadmin/design/index.html

page.headerData.20 = TEXT
page.headerData.20.value (


)


lib.navbar = COA
lib.navbar {
    wrap = <nav class="navbar navbar-default"> <div class="container-fluid"> | </div> </nav>

    10 = COA
    10 {
        wrap = <div class="navbar-header"> | </div>
        10 = COA
        10 {
            // hamburger icon:
            wrap = <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</button>
            10 = TEXT
            10.value = <span class="button-label">Menu</span><div class="button-bars"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div>
            20 = TEXT 
            21 < .20
            22 < .20
        }
    }

    20 = HMENU
    20 {
        wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div>

        1 = TMENU
        1 {
            expAll = 1

            NO = 1
            NO {
                ATagTitle.field = title
                wrapItemAndSub = <li>|</li>
            }

            CUR < .NO
            CUR {
                wrapItemAndSub = <li class="active">|</li>
            }

            ACT < .CUR

            IFSUB = 1
            IFSUB {
                ATagTitle.field = title
                ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
                linkWrap = |<b class="caret"></b>
                ATagBeforeWrap = 1
                wrapItemAndSub = <li class="dropdown">|</li>
            }

            ACTIFSUB < .IFSUB
            ACTIFSUB {
                wrapItemAndSub = <li class="dropdown active">|</li>
            }

            CURIFSUB < .ACTIFSUB
        }

        2 < .1
        2 {
            // Adjust several classes for sublevels
            wrap = <ul class="dropdown-menu  multi-level">|</ul>
            IFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li>
            ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu active">|</li>
            // Remove caret element (correct arrow is set with ::after pseudo element)
            IFSUB.linkWrap >
            ACTIFSUB.linkWrap >

            CURIFSUB < .ACTIFSUB

            SPC = 1
            SPC {
                wrapItemAndSub.cObject = COA
                wrapItemAndSub.cObject {
                    // no divider, if first menu item on this level:
                    10 = TEXT
                    10.value = <li class="dropdown-header">|</li>
                    10.if.value.data = register:count_MENUOBJ
                    10.if.equals = 1

                    // otherwise:
                    20 = TEXT
                    20.value = <li class="divider"></li><li class="dropdown-header">|</li>
                    20.if.value.data = register:count_MENUOBJ
                    20.if.equals = 1
                    20.if.negate = 1
                }
            }
        }

        3 < .2
        4 < .3
    }
}

page.20.marks{
    CONTENT < styles.content.get
    CONTENT.renderObj.stdWrap.dataWrap=<div class="col-md-12">|</div>

     TOPIMAGE < styles.content.get
     TOPIMAGE.select.where = colPos=1

     contentright < styles.content.getRight
     contentright.select.where = colPos=2

     #contenborder < styles.content.get
     #contentorder.select.where = colPos=3

     #TOPIMAGE < styles.content.getBorder
     #TOPIMAGE.select.where = colPos=4


    MENU = HMENU
    MENU.entryLevel = 0
    #NAVIMAIN.excludeUidList = 

    MENU < lib.navbar
}

Answer 1

I recommend having a look at TYPO3 built in data processors instead. They are provided by the core (of course you can use custom ones as well). That way you can easily query records and pass them to a fluid template where you can process data and output it as HTML. There is a menu data processor as well. You can nest data processors so you will get current level and sub level pages for example.

It is way more flexible than the pure TS way and for everyone not too familiar with TS it will simplify things a lot.

https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html

Answer 2

Working Solution for me is:

lib.unterseiten = CONTENT
lib.unterseiten {
  table = pages
  select {
    pidInList.field = 10
    orderBy = sorting
  }
  renderObj = COA
  renderObj.wrap = <div class='col-md-3'>|</div>
  renderObj {
    10 = TEXT
    10.field = title
    10.wrap = <h2>|</h2>
    20 = CONTENT
    20 {
      table = tt_content
      select {
        pidInList.field = uid
        orderBy = sorting
      }
      renderObj = COA
      renderObj {

        #Bild auslesen
        30 = FILES
        30 {
          maxItems = 1
          references {
            table = tt_content
            uid.data = field:uid
            fieldName = image
         }

         renderObj = IMAGE
         renderObj.file.import.data = file:current:uid
         renderObj.file.treatIdAsReference = 1
         renderObj.wrap = <div class="thumbnail">|</div>
         renderObj.stdWrap.maxItems = 1
      }

        40 = TEXT
        40.field = uid
        40.wrap = <a href="index.php?id=|">Mehr infos</a>
      }
    }

  }
}

page.20.marks.kumulierterInhalt  < lib.unterseiten