CODEWITHSUNDEEP
typo3typoscript
Euli
Euli

Reputation: 1143

Absolute path with IMG_RESOURCE

I'm looking for a way to get an absolute path for an IMG_RESOURCE object in TypoScript. Since baseUrl is no real solution to me, simply add config.baseUrl = example.com isn't the thing I am accepting.

So, how could I solve something like this:

ogimage = FILES
ogimage{
    references {
        table = pages
        uid.data = page:uid
        fieldName = tx_csseo_og_image
    }
    renderObj = IMG_RESOURCE
    renderObj {
        file.import.data = file:current:publicUrl
        file.height < plugin.tx_csseo.social.openGraph.image.height
        file.width < plugin.tx_csseo.social.openGraph.image.width
        # this needs to be generated with an absolute URL
        stdWrap.dataWrap = <meta property="og:image" content="|" />
    }
}

Upvotes: 1

Views: 5523

Answers (6)

Megafry
Megafry

Reputation: 84

Solution with levelmedia:-1, slide for TYPO3 9.5 or newer.

Doc TYPO3 SEO Core extension

page.meta {  
        og:image.stdWrap.cObject = TEXT
        og:image.stdWrap.cObject {
            if.isFalse.field = og_image
            stdWrap.typolink {
                parameter.stdWrap.cObject = FILES
                parameter.stdWrap.cObject {
                    references {
                        data = levelmedia:-1, slide
                    }
                    renderObj = IMG_RESOURCE
                    renderObj {
                        file {
                            import.data = file:current:publicUrl
                            crop.data = file:current:crop
                            width = 1200c
                            height = 630c
                        }
                    }
                }
                returnLast = url
                forceAbsoluteUrl = 1
            }
        }
    }

Upvotes: 0

Andreas K.
Andreas K.

Reputation: 71

For me, a solution for og:image with inheritance was important. "tx_myext_ogimage" is a field in table pages.

10 = IMG_RESOURCE
10 {
    stdWrap.wrap = <meta property="og:image" content="{getIndpEnv:TYPO3_SITE_URL}|" />
    stdWrap.insertData = 1
    stdWrap.required = 1
    file {
        import.data = levelfield:-1, tx_myext_ogimage, slide
        treatIdAsReference = 1
        import.listNum = 0
    }
}

Upvotes: 0

Josef Glatz
Josef Glatz

Reputation: 565

A more complete TypoScript-Only example could be my following example snippet

It renders following meta tags right within page.meta without the need to use page.headerData.:

  • og:image
  • og:image:width
  • og:image:height
  • og:image:type

TypoScript Setup:

page {
    meta {
        og:image {
            attribute = property
            stdWrap.cObject = FILES
            stdWrap.cObject {
                references {
                    table = pages
                    uid.data = uid
                    fieldName = tx_theme_facebook_image
                }
                begin = 0
                maxItems = 1
                renderObj = TEXT
                renderObj {
                    stdWrap.typolink {
                        parameter.stdWrap {
                            cObject = IMG_RESOURCE
                            cObject {
                                file {
                                    crop.data = file:current:crop
                                    cropVariant = facebook_variant1
                                    import.data = file:current:uid
                                    treatIdAsReference = 1
                                }
                            }
                        }
                        returnLast = url
                        forceAbsoluteUrl = 1
                    }
                    required = 1
                }
            }
        }
        og:image:width {
            attribute = property
            stdWrap.cObject = TEXT
            stdWrap.cObject {
                data = TSFE:lastImgResourceInfo|0
            }
            stdWrap.if.isTrue.field = tx_theme_facebook_image
        }
        og:image:height {
            attribute = property
            stdWrap.cObject = TEXT
            stdWrap.cObject {
                data = TSFE:lastImgResourceInfo|1
            }
            stdWrap.if.isTrue.field = tx_theme_facebook_image
        }
        og:image:type {
            attribute = property
            stdWrap.cObject = TEXT
            stdWrap.cObject {
                data = TSFE:lastImgResourceInfo|2
                stdWrap.wrap = image/|
                required = 1
            }
            stdWrap.if.isTrue.field = tx_theme_facebook_image
        }
    }
}

Some side note

This snippet is limited to image FAL relations (IRRE). File extension limitation must be configured right within your TCA configuration for your field/column (in this example pages.tx_theme_facebook_image). Even the amount of max items must be limited within TCA configuration.

Multiple og:/twitter:image tags

And maybe it's a better idea to not use such a TypoScript-Only-Solution if you want to allow multiple og:image tags. The reason is that og:image:width/og:image:height meta tag must follow the og:image meta tag. If you still want to accomplish multiple og:image tags it would be a better idea to use page.headerData in conjunction with FLUIDTEMPLATE (as long as you want to use TypoScript).

PS: I heard about plans to implement basic SEO fields in TYPO3 CMS v9 LTS

Upvotes: 1

Bernd Wilke πφ
Bernd Wilke πφ

Reputation: 10800

I don't get your problem. what do you want to achieve?

do you look for something like config.absRefPrefix?

anyway you don't should use

file.import.data = file:current:publicUrl

try to use

    file {
        import.data = file:current:uid
        treatIdAsReference = 1
        :

Upvotes: 0

Tobias N.
Tobias N.

Reputation: 138

You might need something like this:

ogimage = FILES
ogimage {
   //get the image url from the seo field
  references {
     table = pages
     uid.data = page:uid
     fieldName = tx_csseo_og_image
  }
  renderObj = COA
  renderObj {
    10 = TEXT
    10.data = DB:sys_domain:1:domainName
    10.wrap = |
    20 = TEXT
    20.data = file:current:publicUrl
    20.wrap = /|
  }
}

Upvotes: 2

Euli
Euli

Reputation: 1143

I got a solution by myself. The point of the question was to not set the domain at any point at all. And have an absolute URL rendered from the FILES and IMG_RESOURCE objects, to be able to resize the image.

ogimage = FILES
ogimage{
    references {
        table = pages
        uid.data = page:uid
        fieldName = tx_csseo_og_image
    }
    renderObj = TEXT
    renderObj {
        typolink{
            parameter.stdWrap{
                cObject = IMG_RESOURCE
                cObject{
                    file.import.data = file:current:uid
                    file.treatIdAsReference = 1
                    file.height < plugin.tx_csseo.social.openGraph.image.height
                    file.width < plugin.tx_csseo.social.openGraph.image.width
                }
            }
            returnLast = url
            forceAbsoluteUrl = 1
        }
        wrap = <meta property="og:image" content="|" />
    }
}

This will generate a resized image via IMG_RESOURCE and then generate an absolute url to this generated image via typolink, that will be then wrapped inside a meta-tag.

Upvotes: 7

Related Questions