I did a well working Imageslider from the page ressources. Now I'm trying to hyperlink those Images with a Link also provided in the ressource. This is what I have so far:
TS:
lib.headerimage = COA_INT
lib.headerimage {
1 = COA
1 {
stdWrap.required = 1
stdWrap.outerWrap.cObject = TEXT
stdWrap.outerWrap.cObject.value = <li><img src=" | " /></li>
2 = IMG_RESOURCE
2 {
file {
import.data = levelmedia:-1, slide
import.listNum = 0
treatIdAsReference = 1
}
}
}
2 < .1
2.2.file.import.listNum = 1
3 < .1
3.2.file.import.listNum = 2
}
Layout:
<div class="headerimage">
<ul>
<f:render section="headerimage" />
</ul>
</div>
This Results in the expected HTML Output
<ul>
<li>
<img />
</li>
</ul>
But I want the following Output
<ul>
<li>
<a href="link_from_page_ressource">
<img />
</a>
</li>
</ul>
How do I get those Links around my Images?
Thanks in advance
UPDATE
Solution:
lib.headerimage = COA
lib.headerimage {
1 = FILES
1 {
references {
data = levelmedia:-1, slide
}
renderObj = COA
renderObj {
wrap = <li>|</li>
1 = IMAGE
1 {
file.import.data = file:current:publicUrl
altText.data = file:current:title
stdWrap.typolink.parameter.data = file:current:link
}
}
}
}
You shoul use FILES to handle this. Use something like (not tested!)
lib.headerimage = COA
lib.headerimage {
wrap = <ul>|</ul>
10 = FILES
10 {
references {
data = levelmedia:-1, slide
}
renderObj = COA
renderObj {
10 = IMAGE
10 {
file.import.data = file:current:publicUrl
altText.data = file:current:title
stdWrap.typolink.parameter.data = file:current:link
wrap = <li>|</li>
}
}
}
}
Can you try this?
lib.headerimage = COA
lib.headerimage {
wrap = <ul>|</ul>
1 = IMAGE
1 {
file {
import.data = levelmedia:-1, slide
import.listNum = 0
treatIdAsReference = 1
}
stdWrap.typolink.parameter.data = file:current:link
stdWrap.outerWrap = <ul>|</ul>
}
2 < .1
2.file.import.listNum = 1
3 < .1
3.file.import.listNum = 2
}
lib.randomImage = COA_INT
lib.randomImage.10 = FILES
lib.randomImage.10.sorting = rand()
lib.randomImage.10 {
references {
table = pages
data = levelmedia:-1, slide
treatIdAsReference = 1
}
maxItems= 1
renderObj = COA
renderObj {
10 = IMAGE
10 {
file {
import {
data = file:current:publicUrl
}
}
}
}
stdWrap {
wrap = |
}
}
Reference link: http://www.t3hut.com/blog/post/news/detail/News/random-image-from-page-resources-files-in-typo3-62.html
This ts works for me !
Related
I have 3 pics that are assigned to my page and I am trying to put them into a variable in typoscript.
Here is my code:
temp.pics = FILES
temp.pics {
references {
table = pages
uid.data = page:uid
fieldName = media
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:originalUid
altText.data = file:current:title
wrap = <li>|</li>
}
stdWrap.wrap = <ul id="Gallery" class="gallery">|</ul>
}
page.10 {
variables {
pics < temp.pics
}
}
And in my HTML layout I only get:
<ul id="Gallery" class="gallery"></ul>
Does anybody have an idea why it is empty?
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">
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>
}
}
}
}
}
i have an TMENU, in that Menu I would have the Content from the Subpages in the Menu. On every Page is an Col (colpos=0) with Content. Is it possible to get the Content from there to the Menu?
lib.mainmenu = HMENU
lib.mainmenu {
1 = TMENU
1 {
wrap = <ul id="mainmenu">|</ul>
expAll = 1
NO {
wrapItemAndSub = <li>|</li>
ATagParams = class="drop"
}
}
2 = TMENU
2 {
wrap = <div class="dropdown_produkte"><div class="nav-tabs"><ul>|</ul></div></div>
NO {
wrapItemAndSub = <li>|</li>
}
2.40 = CONTENT
2.40 {
table = tt_content
select.pidInList.field = pid
select.where = colPos=0
select.languageField=sys_language_uid
wrap = <div class="teaser">|</div>
}
}
}
There is already such a menu defined in css_styled_content
typo3/sysext/css_styled_content/static/setup.txt
# "Menu of subpages to these pages + sections - liststyle"
7 < .1
7 {
stdWrap {
outerWrap = <ul class="csc-menu csc-menu-7">|</ul>
}
1.expAll = 1
2 < .1
2 {
sectionIndex = 1
sectionIndex.type = header
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li class="csc-section">|</li>
}
}
If you are going to use typoscript in your project (wich you hardly need anymore when you develope with fluid + vhs) than css_styled_content is always a good reference point
Here is my Solution
lib.mainmenu = HMENU
lib.mainmenu {
1 = TMENU
1 {
wrap = <ul id="mainmenu">|</ul>
expAll = 1
NO {
wrapItemAndSub = <li>|</div></li>
ATagParams = class="drop"
}
submenuObjSuffixes = a || b || c || d || e
}
2a < .1
2a {
wrap = <div class="dropdown_produkte">|</div>
stdWrap.cObject = COA
stdWrap.cObject {
20 = HMENU
20 {
special = directory
special.value.data = field:pid
1 = TMENU
1 {
expAll = 1
wrap = <div class="nav-tabs"><ul>|</ul>
NO {
wrapItemAndSub = <li>|</li>
#stdWrap.dataWrap = <h2>|</h2>
#linkWrap = | |*| /
ATagParams = class=submenu
}
ACT < .NO
ACT = 1
ACT {
ATagParams = class=submenuActive
}
RO < .ACT
}
}
40 = CONTENT
40 {
table = pages
select {
pidInList.field = pid
orderBy = sorting
}
renderObj = COA_INT
renderObj {
10 = TEXT
#10.field = title
10.wrap = |
20 = LOAD_REGISTER
20 {
meinRegister.cObject = TEXT
meinRegister.cObject.field = uid
}
50 = COA
50 {
###########
20 = CONTENT
20 {
table = tt_content
select {
pidInList.data = register:meinRegister
where = colPos=0
}
}
###########
}
}
}
}
}
}
As I faced a similar issue today, I wanted this question to be up to date. (Using TYPO3 8.7.4 with fluid_styled_content.)
lib.mainmenu = HMENU
lib.mainmenu {
1 = TMENU
1 {
wrap = <ul id="mainmenu" class="level1">|</ul>
expAll = 1
NO {
wrapItemAndSub = <li>|</li>
ATagParams = class="drop"
}
}
2 < .1
2 {
wrap = <div class="wrapper">|</div>
stdWrap.innerWrap = <ul class="level2">|</ul>
stdWrap.append = CONTENT
stdWrap.append {
table = tt_content
select {
pidInList.field = pid
where = colPos = 5 and deleted = 0 and hidden = 0
}
stdWrap.wrap = <div class="content">|</div>
}
}
3 < .2
3 {
NO.wrapItemAndSub = <li>|</li>
wrap = <ul class="level3">|</ul>
stdWrap.append >
}
}
That way (of course I simplified it here) I was able to add custom populated content from a specific column (defined in a backend_layout) to be rendered inside a navigation panel.
I use the following Typoscript to get a menu of pages with images from respective page resource.
How can i get the page-title (or page-description etc.) to the images alt and/or title-tags?
tt_content.menu.20.4 >
tt_content.menu.20.4 = COA
tt_content.menu.20.4 {
wrap = <div>|</div>
10 = HMENU
10 {
special = directory
special.value.field = pages
1 = TMENU
1 {
noBlur = 1
NO = 1
NO {
stdWrap >
stdWrap {
cObject = COA
cObject {
10 = FILES
10 {
references {
table = pages
uid.data = field = uid
fieldName = media
data = levelmedia:-1, slide
treatIdAsReference = 1
listNum = 0
}
renderObj = IMG_RESOURCE
renderObj {
file.import.data = file:current:publicUrl
file.maxW = 100
file.maxH = 60
required = 1
}
stdWrap.wrap = <img src="|" title="???pagetitle???" alt="???pagetitle???">
}
}
}
wrapItemAndSub = <div>|</div>
}
}
}
}
Have you tried it with dataWrap?
i think it could be something like this
stdWrap.dataWrap = <img src="|" title="{field:title}" alt="{field:title}">
or maybe...
stdWrap.dataWrap = <img src="|" title="{page:title}" alt="{page:title}">
this works for me now
cObject = COA
cObject {
10 = FILES
10 {
references {
table = pages
uid.data = field = uid
fieldName = media
data = levelmedia:-1, slide
treatIdAsReference = 1
listNum = 0
}
renderObj = COA
renderObj {
10 = IMG_RESOURCE
10.stdWrap.wrap = <img src="|
10.file.import.data = file:current:publicUrl
20 = TEXT
20.stdWrap.wrap = " title="|
20.data = file:current:title
30 = TEXT
30.stdWrap.wrap = " alt="|" />
30.data = file:current:title
}
stdWrap.wrap = |
stdWrap.required = 1
}
}