CODEWITHSUNDEEP
typo3typoscripttypo3-7.6.x
user500665
user500665

Reputation: 1364

Typoscript menu image size

In my menu I am using a script to retrieve the image loaded in the page's resources.

Now I need to make it so the image is resized/cropped to exactly the right size. Where can I add the width and height to make it work?

NO {
  wrapItemAndSub = <li>|</li>
  stdWrap.cObject = COA
  stdWrap.cObject {
    10 = TEXT
    10.field = title
    10.wrap = <span>|</span>
    20 = FILES
    20 {
      # Get the images related to the current page
      references {
      table = pages
      fieldName = media
      }
      # Render each image and wrap it as appropriate
      renderObj = TEXT
      renderObj {
      typolink {
        parameter.data = file:current:publicUrl
        forceAbsoluteUrl = 1
        returnLast = url
      }
      wrap = |,
    }
    stdWrap {
      # Take only the first image if several are defined
      listNum = 0
      # Use default image if none is available
      ifEmpty.cObject = TEXT
      ifEmpty.cObject.typolink {
        parameter = fileadmin/templates/example/images/placeholder.png
        forceAbsoluteUrl = 1
        returnLast = url
      }
      wrap = <div><img src="|"  /></div>
      }
    }
  }
}

Upvotes: 1

Views: 549

Answers (2)

Ren&#233; Pflamm
Ren&#233; Pflamm

Reputation: 3354

If you want to resize the image replace the renderObj = TEXT through renderObj = IMG_RESOURCE

Example:

NO {
  wrapItemAndSub = <li>|</li>
  stdWrap.cObject = COA
  stdWrap.cObject {
    10 = TEXT
    10.field = title
    10.wrap = <span>|</span>
    20 = FILES
    20 {
      # Get the images related to the current page
      references {
        table = pages
        fieldName = media
      }
      # Render each image and wrap it as appropriate
      renderObj = IMG_RESOURCE
      renderObj {
        file.import.data = file:current:uid
        file.treatIdAsReference = 1
        file.width = 250c
        file.height = 250c
        wrap = |,
      }
      stdWrap {
        # Take only the first image if several are defined
        listNum = 0
        # Use default image if none is available
        ifEmpty.cObject = TEXT
        ifEmpty.cObject.typolink {
          parameter = fileadmin/templates/example/images/placeholder.png
          forceAbsoluteUrl = 1
          returnLast = url
        }
        wrap = <div><img src="|"  /></div>
      }
    }
  }

To render only one image, you shouldn't make first an list of all images. Use the maxItems setting of FILES and remove the listNum from stdWrap.

20 = FILES
20 {
  ...
  maxItems = 1
  ...
}

Upvotes: 2

randomresult
randomresult

Reputation: 601

I think you need to use GIFBUILDER. The GIFBUILDER will pass the Image to for example ImageMagick and will help you to cut/scrop/scale the image to your needs.

Something like

lib.image = IMAGE
lib.image {
  file = GIFBUILDER
  file {
    #use the c in XY to crop
    XY = 1024c,768c
    format = jpg
    10 = IMAGE
    10.file = fileadmin/image.jpg

  }
}

You can read more about Gifbuilder here:

https://docs.typo3.org/typo3cms/TyposcriptReference/Gifbuilder/Index.html

Upvotes: 0

Related Questions