tt_news category image url - typo3

I need the url of the image from tt_news category to fill conf.tt_news.10.stdWrap.ifEmpty. Does anyone have an idea. My approach
lib.catimage = TEXT
lib.catimage {
table = tt_news_cat
select {
pidInList = 2
andWhere {
data = GPVar:tx_ttnews|cat
....????
page.headerData {
15 = RECORDS
15 {
source.data = GPvar:tx_ttnews|tt_news
tables = tt_news
conf.tt_news = COA
conf.tt_news.10 = IMG_RESOURCE
conf.tt_news.10.file {
width = 403
import = uploads/pics/
import.field = image
import.listNum = 0
}
conf.tt_news.10.stdWrap.ifEmpty < lib.catimage
wrap = <link rel="image_src" href="{$BaseUrl}|" />
}
}
I have a new approach, but do not see the error. If I take out the commented brace the path is correct but the syntax of the script is incorrect. The first part also does not work anymore. Here the modified version.
page.headerData {
15 = RECORDS
15 {
source.data = GPvar:tx_ttnews|tt_news
tables = tt_news
conf.tt_news = COA
conf.tt_news.10 = IMG_RESOURCE
conf.tt_news.10.file {
width = 403
import = uploads/pics/
import.field = image
import.listNum = 0
}
conf.tt_news.10.stdWrap.ifEmpty.cObject = CONTENT
conf.tt_news.10.stdWrap.ifEmpty.cObject {
table = tt_news_cat
select {
selectFields = image
pidInList = 2
languageField = sys_language_uid
where = deleted=0 AND hidden=0
andWhere {
data = GPvar:tx_ttnews|category
wrap = uid=|
intval = 1
}
}
#}
renderObj = TEXT
renderObj.field = image
}
wrap = <link rel="image_src" href="{$BaseUrl}|" />
}
}

Related

How to get first image in tt_content for meta og:image

I'm trying to fetch the first existing image in tt_content to be used in Open Graph (og:image) if any images in tt_content.
page.headerData {
1 = COA
1 {
10 = FILES
10 {
references {
table = tt_content
uid.field = uid
fieldName = image
}
renderObj = TEXT
renderObj {
typolink {
parameter.data = file:current:publicUrl
forceAbsoluteUrl = 1
returnLast = url
}
wrap = |,
}
stdWrap {
listNum = 0
# Use logo image if none is available
ifEmpty.cObject = TEXT
ifEmpty.cObject.typolink {
parameter = typo3conf/ext/my_ext/Resources/Public/Images/logo.png
forceAbsoluteUrl = 1
returnLast = url
}
wrap = <meta property="og:image" content="|">
}
}
}
}
The code above only returns the fallback (logo). Great for pages and tt_content without images, but I would expect different from pages with image(s) in tt_content.
I report here the nice snippet found on https://docs.typo3.org/m/typo3/docs-snippets/master/en-us/2014/Index.html#add-facebook-open-graph-og-image-metatags-for-content-elements-with-typo3-6-0-and-fal
I simplified it a bit; hope it is not too much simplified but it should work:
page.headerData.200 = CONTENT
page.headerData.200 {
table = tt_content
select {
where = {#colPos}=0
selectFields = uid
}
renderObj = FILES
renderObj {
references {
table = tt_content
uid.field = uid
fieldName = image
}
maxItems = 1
renderObj = TEXT
renderObj {
data = file:current:publicUrl
stdWrap {
wrap = <meta name="og:image" content="|" >
}
}
}
}
Here is #riccardo-de-contardi's snippet with a fallback
page.headerData.1569221029 = CONTENT
page.headerData.1569221029 {
table = tt_content
select {
where = {#colPos}=0
selectFields = uid
}
renderObj = FILES
renderObj {
references {
table = tt_content
uid.field = uid
fieldName = image
}
maxItems = 1
renderObj = TEXT
renderObj {
data = file:current:publicUrl
stdWrap {
wrap = |,
}
}
}
stdWrap {
listNum = 0
# Use logo image if none is available
ifEmpty.cObject = TEXT
ifEmpty.cObject.typolink {
parameter = typo3conf/ext/my_ext/Resources/Public/Images/logo.png
forceAbsoluteUrl = 1
returnLast = url
}
wrap = <meta property="og:image" content="|">
}
}

I want to override in typoscript CONTENT or renderObj with noting

I have a little problem, the following code works, but to not show what I do not want to display, I'm forced to put style =" display: none " with invalid HTML code, because I'm in <ul> <li> ... </ ul>. How could I not display anything at all?
40 = CONTENT
40 {
table = tt_content
select {
orderBy = sorting
pidInList.field = uid
where = {#colPos}=99 and deleted = 0 and hidden = 0
}
renderObj = COA
renderObj {
20 = TEXT
20.stdWrap.field = header
20.stdWrap.wrap = <b>|</b>
# OVERRIDE for <ul><li> ...
20.stdWrap.wrap.override = <span style="display:none">|</span>
20.stdWrap.wrap.override.if.value = 1
20.stdWrap.wrap.override.if.equals.dataWrap = {register:typeOfMenu}
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <i>|</i>
# OVERRIDE for <ul><li> ...
30.stdWrap.wrap.override = <span style="display:none">|</span>
30.stdWrap.wrap.override.if.value = 1
30.stdWrap.wrap.override.if.equals.dataWrap = {register:typeOfMenu}
40 = FILES
40 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
begin = 0
maxItems = 1
renderObj = IMAGE
renderObj {
file {
import.data = file:current:originalUid // file:current:uid
#width = 232c
#height = 145c
}
required = 1
wrap = <div class="img-wrap">|</div>
}
}
# OVERRIDE for <ul><li> ...
40.stdWrap.wrap.override = <span style="display:none">|</span>
40.stdWrap.wrap.override.if.value = 1
40.stdWrap.wrap.override.if.equals.dataWrap = {register:typeOfMenu}
}//COA
}//CONTENT
In fact, I tried a lot of stuff before resigning myself to <span style =" display: none "> | </ span>, do you have a better solution?
Best regards
Did you try these propositions?
40.renderObj.40.if {
value = 1
equals.dataWrap = {register:typeOfMenu}
}
or
40.renderObj.40.stdWrap.if {
value = 1
equals.dataWrap = {register:typeOfMenu}
}
if that's not working you've to check if the register is filled with any data, you can check that just by rendering it too in 40.renderObj.50:
40.renderObj.50 = TEXT
40.renderObj.50.data = {register:typeOfMenu}
As it seems that {register:typeOfMenu} is defined outside that CONTENT and you want to render the whole block only if {register:typeOfMenu}=1 you could also note it like this:
40 = CONTENT
40 {
table = tt_content
select {
orderBy = sorting
pidInList.field = uid
where = {#colPos}=99 and deleted = 0 and hidden = 0
}
renderObj = COA
renderObj {
20 = TEXT
20.stdWrap.field = header
20.stdWrap.wrap = <b>|</b>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <i>|</i>
40 = FILES
40 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
begin = 0
maxItems = 1
renderObj = IMAGE
renderObj {
file {
import.data = file:current:originalUid // file:current:uid
#width = 232c
#height = 145c
}
required = 1
wrap = <div class="img-wrap">|</div>
}
}
}//COA
stdWrap.if {
value = 1
equals.dataWrap = {register:typeOfMenu}
}
}//CONTENT
Sorry, but I did not put all the code, there was before a COA. Now, thanks to your advice I have solved the problem. Here is the complete code:
NO {
doNotLinkIt = 1
stdWrap.cObject = COA
stdWrap.cObject {
10 = TEXT
10.wrap = <h1>|</h1>
10.field = nav_title // title
10.typolink.parameter.field = uid
# OVERRIDE for <ul><li> ...
10.wrap.override = <li class="laclasse">|
10.wrap.override.if.value = 1
10.wrap.override.if.equals.dataWrap = {register:typeOfMenu}
40 = CONTENT
40 {
table = tt_content
select {
orderBy = sorting
pidInList.field = uid
where = {#colPos}=99 and deleted = 0 and hidden = 0
}
renderObj = COA
renderObj {
20 = TEXT
20.stdWrap.field = header
20.stdWrap.wrap = <b>|</b>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <i>|</i>
40 = FILES
40 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
begin = 0
maxItems = 1
renderObj = IMAGE
renderObj {
file {
import.data = file:current:originalUid // file:current:uid
#width = 232c
#height = 145c
}
required = 1
#wrap = <div class="img-wrap">|</div>
titleText.data = page:subtitle
altText.data = page:subtitle
stdWrap.typolink.parameter.data = leveluid:0
}
}
}//COA
}//CONTENT
}//COA
# OVERRIDE for <ul><li> ...
stdWrap.cObject.40.if {
value = 1
equals.dataWrap = {register:typeOfMenu}
negate = 1
}
Thanking you,
Best regards

Typo3: How to setup image properties like width, height and alt?

I have a snippet of the following typoscript code, that shows image with defined class name. What is lacking is the image's width, height, align etc properties; which have been set in the backend editor.
30 = FILES
30 {
references {
table = tt_content
fieldName = image
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:publicUrl
params = class="img-responsive img-centered"
}
}
...
...
}
The rendered html is something like: <img class="img-responsive img-centered" width="600" height="880" border="0" alt="" src="preview.png">
How do I also show custom width/height/align properties set from backend?
== Added more details ==
Here is my entire block of this segment of code:
temp.portfolio = CONTENT
temp.portfolio {
table = tt_content
select {
begin = 1
orderBy = sorting
where = (colPos = 2)
}
renderObj = COA
renderObj {
10 = TEXT
10 {
required = 1
wrap = <a class="portfolio-link" data-toggle="modal" href="#portfolioModal"><div class="portfolio-hover"><div class="portfolio-hover-content"><i class=" | "></i></div></div>
stdWrap.field = custom_icon
}
15 = FILES
15 {
references {
table = tt_content
fieldName = image
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:publicUrl
params = class="img-responsive"
}
}
20 = TEXT
20 {
required = 1
wrap = </a><div class="portfolio-caption"><h4> | </h4>
stdWrap.field = header
#parseFunc =< lib.parseFunc_RTE
}
30 = TEXT
30 {
required = 1
wrap = <p class="text-muted"> | </p>
stdWrap.field = subheader
#parseFunc =< lib.parseFunc_RTE
}
40 = TEXT
40 {
wrap = </div>
}
50 = CONTENT
50 {
table = tt_content
select {
uidInList {
field = header_link
stdWrap.replacement.10 {
search = /^.+#/
replace =
useRegExp = 1
}
}
max = 1
where = (pid = 11)
pidInList {
field = header_link
stdWrap.replacement.10 {
search = /#.+$/
replace =
useRegExp = 1
}
}
}
renderObj = COA
renderObj {
10 = TEXT
10.value {
required = 1
wrap = <h2> | </h2>
field = header
}
20 = TEXT
20.value {
required = 1
wrap = <p class="item-intro text-muted"> | </p>
field = subheader
}
30 = FILES
30 {
references {
table = tt_content
fieldName = image
}
renderObj = IMAGE
renderObj {
file {
import.data = file:current:publicUrl
width.field = imagewidth
height.field = imageheight
}
params = class="img-responsive img-centered"
altText.data = file:current:alternative
}
}
40 = TEXT
40.value {
required = 1
wrap = |
field = bodytext
parseFunc =< lib.parseFunc_RTE
}
stdWrap.wrap = <span class="float-window" style="display:none"> | </span>
}
}
stdWrap.wrap = <div class="col-md-4 col-sm-6 portfolio-item"> | </div>
}
}
You can access the width and height (tt_content fields imagewidth & imageheight) with the .field = method and the properties of the image with the .data = file:current:propertyName method. I have created a snippet for you below.
lib.myContent < styles.content.get
lib.myContent.renderObj = COA
lib.myContent.renderObj {
10 = FILES
10 {
references {
table = tt_content
uid.field = uid
fieldName = image
}
renderObj = IMAGE
renderObj {
file {
import.data = file:current:publicUrl
width.field = imagewidth
height.field = imageheight
}
altText.data = file:current:alternative
params.cObject = COA
params.cObject {
10 = TEXT
10.value = class="img-responsive img-centered"
20 = CASE
20 {
key.field = imageorient
default = TEXT
default.value = center
2 < .default
2.value = left
10 < .2
18 < .2
26 < .2
1 < .default
1.value = right
9 < .1
17 < .1
25 < .1
}
20.stdWrap.noTrimWrap = | align="|"|
}
}
}
}
Above code snippet takes all content elements from current page colPos = 0 and render only the images disregarding content type.
This will output.
<img src="/fileadmin/_processed_/csm_file_a51148bd89.jpg" class="img-responsive img-centered" align="center" alt="Your alt text" height="41" width="200">

Fallback image in typoscript

I have the following menu-type, which works correctly for the main-part.
However, i want to add a fallback image, if no image is found.
tt_content.menu {
20 {
108 = HMENU
108 {
special = directory
special.value.field = pages
1 = TMENU
1.wrap = <div class="special_menu">|</div>
1.NO {
doNotLinkIt = 1
stdWrap.cObject = COA
stdWrap.cObject {
10 = FILES
10 {
references {
table = pages
fieldName = media
}
renderObj = IMAGE
renderObj {
file {
width = 263c
height = 155c
maxW = 263c
maxH = 155c
import.data = file:current:publicUrl
# if file:current:publicUrl is empty, use default image
if.isFalse = fileadmin/my/path/to/image.jpg
}
altText.field = title
imageLinkWrap = 1
imageLinkWrap {
enable = 1
typolink.parameter.field = uid
}
}
stdWrap.wrap = <div class="menu10_bild">|</div>
}
20 = TEXT
20.field = title
20.typolink.parameter.field = uid
20.wrap = <div class="menu10_text">|
30 = TEXT
30.field = abstract
30.wrap = <p>|</p></div><div class="w-clearfix"> </div>
}
}
}
}
}
for some reason, it just ignores the line. Can someone help me with that?
You should check the TypoScript Reference stdWrap.ifEmpty.
In your case the code should look like this
tt_content.menu {
20 {
108 {
1.NO {
stdWrap.cObject {
10 = FILES
10 {
# ....
stdWrap.ifEmpty.cObject = IMAGE
stdWrap.ifEmpty.cObject{
file = fileadmin/.../my_image.png
}
# ....
}
}
}
}
}
}
You can use every cObject you want.
Check out Content Objects (cObject)
Try this:
tt_content.menu {
20 {
108 = HMENU
108 {
special = directory
special.value.field = pages
1 = TMENU
1.wrap = <div class="special_menu">|</div>
1.NO {
doNotLinkIt = 1
stdWrap.cObject = COA
stdWrap.cObject {
# default image
value = fileadmin/my/path/to/image.jpg
10 = FILES
10 {
references {
table = pages
fieldName = media
}
renderObj = IMAGE
renderObj {
file {
width = 263c
height = 155c
maxW = 263c
maxH = 155c
import.data = file:current:publicUrl
}
altText.field = title
imageLinkWrap = 1
imageLinkWrap {
enable = 1
typolink.parameter.field = uid
}
}
stdWrap.wrap = <div class="menu10_bild">|</div>
}
20 = TEXT
20.field = title
20.typolink.parameter.field = uid
20.wrap = <div class="menu10_text">|
30 = TEXT
30.field = abstract
30.wrap = <p>|</p></div><div class="w-clearfix"> </div>
}
}
}
}
}

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?
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}"
}
}
}
}
}
}