Is there any way to prevent typo3/typoscript IMAGE object from adding the dimension attributes (height and width) to the generated image tag?
UPDATE (Thanks to cascaval)!
The solution is to use IMG_RESOURCE instead of IMAGE. It apparently has less bells an whistles but gives you complete control of the the generated image tag.
10 = IMG_RESOURCE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.stdWrap.required = 1
10.stdWrap.wrap (
<img src="|" />
)
Note: This is for use with Templavoila.
No but you can use IMG_RESOURCE object instead and wrap the resulting image path so that you get a HTML tag you want. Example:
temp.image_test = IMG_RESOURCE
temp.image_test {
stdWrap.wrap = <img src="|" />
file = GIFBUILDER
file {
format = jpg
quality = 90
maxWidth = 9999
maxHeight = 9999
XY = [10.w],[10.h]
10 = IMAGE
10.file {
import = uploads/pics/
import.field = image
import.listNum = 0
}
20 = SCALE
20 {
width = 200
}
}
}
Wrong! It also works with IMAGE:
10 = IMAGE
10 {
file = path/to/image.file
stdWrap.replacement {
10 {
search = # width="[0-9]*?"#i
replace =
useRegExp = 1
}
20 {
search = # height="[0-9]*?"#i
replace =
useRegExp = 1
}
}
}
Related
I use fcObject to output a header image, the image is configured in page/resources/media:
<f:cObject typoscriptObjectPath="lib.headerimage" />
lib.headerimage = IMAGE
lib.headerimage {
file {
# width = 550
# height = 126
import {
data = levelmedia: -1, slide
# wrap = uploads/media/|
# listNum = 0
listNum = rand
}
treatIdAsReference = 1
required = 1
}
altText.data = page: title
# wrap = <div id="keyvisual">|</div>
}
The above code doesn't output the alternative text of the image unfortunately, at the moment it takes the page title as alt text, and I can't figure out how to access the field "alternative".
I could use a viewhelper to output the image, like here:
<f:for each="{data.media}" as="file">
<f:image image="{file}"/>
</f:for>
The benefit of using the image viewhelper is that it gives me the alt text of the image.
I prefer to use the lib though. I just can't figure out how to access the data of the image field "alternative" in typoscript.
You can use FILES to get the expected result:
lib.headerimage = FILES
lib.headerimage {
references {
data = levelmedia: -1, slide
listNum = rand
}
renderObj = IMAGE
renderObj {
file.import.dataWrap = {file:current:storage}:{file:current:identifier}
altText.data = file:current:alternative
}
}
Source: This example was taken from the TypoScript Reference.
You used the wrong field page:title. Use file:current:alternative instead.
lib.headerimage = IMAGE
lib.headerimage {
file {
import {
data = levelmedia: -1, slide
listNum = rand
}
treatIdAsReference = 1
required = 1
}
altText.data = file:current:alternative
}
How can I use the same random Image several times?
With the following Typoscript I've got different Images in different sizes.
lib.headerimage = COA_INT
lib.headerimage {
1 = IMG_RESOURCE
1 {
file {
import.data = levelmedia:-1, slide
treatIdAsReference = 1
import.listNum = rand
}
}
}
lib.headerimageSmall =< lib.headerimage
lib.headerimageSmall.1.file.width = 768
lib.headerimageTab =< lib.headerimageSmall
lib.headerimageTab.1.file.width = 1280
lib.headerimageDesktop =< lib.headerimageTab
lib.headerimageDesktop.1.file.width = 1920
lib.headerimageHigh =< lib.headerimageDesktop
lib.headerimageHigh.1.file.width = 2880
You might use a register for your image.
This might only work if you use fluidvariables instead of lib-TS
as idea (not tested):
page {
1 = STORE_REGISTER
1 {
randomImage.cObject = IMG_RESOURCE
randomImage.cObject {
file {
import.data = levelmedia:-1, slide
treatIdAsReference = 1
import.listNum = rand
}
10 = FLUID_TEMPLATE
10 {
name = ...
:
variables {
headerimageSmall = IMG_RESOURCE
headerimageSmall {
file.cObject = TEXT
file.cobject.data = register:randomImage
file.width = 768
}
headerimageTab < .headerimageSmall
headerimageTab.file.width = 1280
headerimageDesktop < lib.headerimageSmall
headerimageDesktop.file.width = 1920
headerimageHigh < lib.headerimageSmall
headerimageHigh.file.width = 2880
}
}
}
maybe you could use the file-id as register, maybe the rendering for the fluid-variabels needs some adjustements.
You just need to generate one random image and then resize it with fluid. Something like that:
<f:image src="{headerimageHigh}" width="2880" alt="high" />
<f:image src="{headerimageHigh}" width="1920" alt="desktop" />
<f:image src="{headerimageHigh}" width="1280" alt="tab" />
<f:image src="{headerimageHigh}" width="768" alt="small" />
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>
}
}
}
}
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
...
}
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
this is my first submission.
I want a specific image as Background in my Typo3 Template. I want to parse the needed Image from a reference in the Page. Below Code I copied from another website and it seems correct.
lib.headerimage = IMAGE
lib.headerimage {
file {
import.data = levelmedia:-1, slide
treatIdAsReference = 1
import.listNum = 0
}}
The Problem now is, I want the lib.headerimage.FILELINK to be in my following code and I can't figure out how to use lib.VARIABLES
In a later point I parse this:
page.headerData {
10 = TEXT
10.value = div#header { background-image: url('lib.headerimage.file.value');}
10.wrap = <style type="text/css">|</style>
}
With our without $ it doesn't parse anything. I just started using typoscript 3 days ago again. My last experiences were years back.
Please , there must be an easy way to do this. :/
It looks like you search a way to concat strings. Assumed the first part is correct (As I am not familiar with the IMAGE Object) you can concat the strings like this:
page.headerData {
10 = COA
10 {
10 = TEXT
10.value = <style type="text/css">div#header { background-image: url('
20 < lib.headerimage
30 = TEXT
30.value = ');}</style>
}
}
lib.headerImageText = COA
lib.headerImageText {
10 = IMG_RESOURCE
10.file.treatIdAsReference = 1
10.file.import {
cObject = TEXT
cObject.value = dummy.gif
cObject.override {
required = 1
data = levelmedia: -1, slide
listNum = 0
}
}
}
AND
page.headerData {
10 = COA
10 {
10 = TEXT
10.value = <style type="text/css">div#header { background-image: url('
20 < lib.headerImageText
30 = TEXT
30.value = ');}</style>
}
}
Fixed my problem ;) now the div#header has the correct background-url defined in the typo3 backend.
I'm trying to add additional parameter to tt_news img list source: data-src="path-to-img". Is it possible? I try with generic marker but without any success:
plugin.tt_news.genericmarkers {
data = imgsource
imgsource = TEXT
imgsource {
field = image
wrap = <img src="uploads/pics/|" data-src="uploads/pics/|" />
file.maxW = 112
file.maxH = 124
}
}
But on output I only have this in source: <img src="uploads/pics/img.jpg" data-src="uploads/pics/ without second img source, img size and close tag.
Any suggestions?
Some remarks before I show you an example:
the »wrap« property only allows one pipe (TYPO3 is replacing the first »|« character with the current value), that why your second parameter is empty
the TEXT objekt only allows value and all properties listed in the »stdWrap« section (see TEXT object: http://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Text/Index.html, list of all stdWrap-properties http://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Stdwrap/Index.html)
so TEXT does have properties like »wrap« or »case« or »substring«, but no »file«
what you want is an IMAGE object, which allows to manipulate images
plugin.tt_news.genericmarkers {
imgsource = IMAGE
imgsource {
file.import = uploads/pics/
file.import.field = image
file.import.listNum = 0
file.width = 250
# if you just want to link the original image
params.field = image
params.wrap = data-src="/uploads/pics/|"
/*
# if you want want to manipulate the image as well, then use this code instead
# IMG_RESOURCE is almost the same as IMAGE, but returns only the path to the resulting image, not the »<img src="">«-Markup
params.cObject = IMG_RESOURCE
params.cObject {
file.import = uploads/pics/
file.import.field = image
file.import.listNum = 0
file.width = 500
stdWrap.wrap = data-src="|"
}
*/
}
}