Search code examples
typo3colorboxtypo3-6.1.x

My manually built TYPO3 lightbox isn't working properly


In a COA, I have this TypoScript to add an image linked to a larger copy of itself. But the Javascript plugin I'm using (Colorbox) isn't able to resize the image properly.

  20 = CONTENT
  20 {
    wrap = <div class="lightbox clearfix">|</div>
    required = 1

    table = tt_content
    select.languageField = sys_language_uid
    select.where = colPos = 2
    select.selectFields = bodytext,image,header
    renderObj=COA
    renderObj{   

      10 = FILES
      10 {
          required = 1
          references {
            table = tt_content
            fieldName = image
          }
          renderObj = IMAGE
          renderObj {
            file.import.data = file:current:originalUid // file:current:uid
            file.width=300c
            file.height=300c
            imageLinkWrap = 1
            imageLinkWrap {
                enable = 1
                width = 1600m
                height = 1600m
                JSwindow = 0
                linkParams.ATagParams { 
                 // title.data = 
                  dataWrap = class = "lightbox-group" title="{file:current:description}"
                }
            }
          }
      }
    }
  }

What's up?


Solution

  • Here's the correct TypoScript. I'm sharing it because it is a legacy weirdness others might stumble upon too.

    You have to set imageLinkWrap.directImageLink = 1, else imageLinkWrap won't deliver the image itself, but a HTML page containing that image!

    20 = CONTENT  
    20 {
            wrap = <div class="lightbox clearfix">|</div>
            required = 1
    
            table = tt_content
            select.languageField = sys_language_uid
            select.where = colPos = 2
            select.selectFields = bodytext,image,header
            renderObj=COA
            renderObj{
    
    
              10 = FILES
              10 {
                  required = 1
                  references {
                    table = tt_content
                    fieldName = image
                  }
                  renderObj = IMAGE
                  renderObj {
                    file.import.data = file:current:originalUid // file:current:uid
                    file.width=300c
                    file.height=300c
                    imageLinkWrap = 1
                    imageLinkWrap {
                        enable = 1
                        width = 1600m
                        height = 1600m
                        directImageLink = 1
                        JSwindow = 0
                        linkParams.ATagParams { 
                         // title.data = 
                          dataWrap = class = "lightbox-group" title="{file:current:description}"
                        }
                    }
                  }
              }
            }
          }