I am using T3 8.6 and VHS 4.1.0. I want to render the pictures from tx_news using srcset, sizes etc. It all works well as long as i Use additionalAttributes to get the sizes. No Image is rendered anymore.
Here is my partial:
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<v:media.image
src="{newsItem.falMediaPreviews.0}"
alt="{mediaElement.originalResource.alternative}"
class="float-sm-none float-md-left news_header"
srcset="300,600,900,1200"
treatIdAsReference="1"
additionalAttributes="{sizes:'(min-width: 90em) 900px,(min-width: 64em) 600px,(min-width: 30em) 100px,100vw'}"
Any Ideas what's wrong there?
It's Working Fine. Just Closed the tag. with using Latest version of flux , fluidcontent and vhs
<v:media.image
src="{newsItem.falMediaPreviews.0}"
alt="{mediaElement.originalResource.alternative}"
class="float-sm-none float-md-left news_header"
srcset="300,600,900,1200"
treatIdAsReference="1"
additionalAttributes="{sizes:'(min-width: 90em) 900px,(min-width: 64em) 600px,(min-width: 30em) 100px,100vw'}" />
Related
I have a TYPO3 version 6.2 website and I am working on a AMP version.
I use a condition in URL to load different versions of the same TYPO3 page depending if the page version request is AMP or not.
Regular version of the page :
https://www.novethic.fr/actualite/environnement/climat/isr-rse/rencontre-avec-danone-un-des-rares-francais-a-aligner-sa-strategie-sur-l-objectif-2-c-145150.html
AMP version of the page
https://www.novethic.fr/amp/actualite/environnement/climat/isr-rse/rencontre-avec-danone-un-des-rares-francais-a-aligner-sa-strategie-sur-l-objectif-2-c-145150.html
Everything works fine except if my page contains image inserted in the RTE
In this case I would need to convert <img> to <amp-img>for images inserted in the RTE when the version asked is AMP.
I already have a global var condition to load custom TS when AMP version is called.
But no idea how to convert <img> to <amp-img>
Any idea on how to achieve that?
if it is only a replacement of the tag name you could try to use a (conditioned) string replacement on one of these levels:
the whole page.
you could do a stdWrap.replacement, but that might not work on cached content
the page content in fluid.
just use a viewhelper to replace text of rendered content. that even could be a typoscript VH:
(<f:cObject typoscriptObjectPath="lib.img2ampimg">{content}</f:cObject>)
the page content in typoscript.
depending wether you render your content with TS you might add stdWrap.replacement there:
.
page {
10 = FLUIDTEMPLATE
10 {
:
variables {
content < styles.content.get
:
}
}
}
[--your amp condition--]
page.10.variables.content.stdWrap.replacement {
1.search = <img
2.replace = <amp-img
}
[global]
Maybe this could be achieved with the extension "Content Replacer", https://extensions.typo3.org/extension/replacer
I've solved it as Bernd Wilke suggested , but directly in my fluid template :
<f:if condition="{f:cObject(typoscriptObjectPath:'lib.conditionamp')} == 1">
<f:then>
<v:format.replace substring="<img " replacement="<amp-img layout=\"responsive\"">
<f:format.html>{article.corpsDeTexte}</f:format.html>
</v:format.replace>
</f:then>
<f:else>
<f:format.html>{article.corpsDeTexte}</f:format.html>
</f:else>
</f:if>
Thanks again for your help
:)
Default behaviour of Typo3 is that Typo3-Links are not rendered in a HTML-element. There is a workaround, see here: How to get rendered links of a HTML element in TYPO3 7.6
Unfortunately, in Typo3 9.5.7 this seems not to work. As described above, I replaced html.html by this:
<f:format.htmlentitiesDecode>
<f:format.html parseFuncTSPath="lib.parseFunc">
{data.bodytext}
</f:format.html>
</f:format.htmlentitiesDecode>
I also replaced html.html by this, did't work for me:
<f:format.html>{data.bodytext}</f:format.html>
In the HTML-element I tested these variations of links, but none works:
<a class="download-link" href="t3://file?uid=107" target="_blank">Download (PDF)</a>
<link t3resources/cms/pdf/linux.pdf>Administration von Linux-PCs</link>
<link 27>Linktext</link>
Have your tried setting plugin.tx_powermail.settings.misc.htmlForHtmlFields = 1 in the constants?
Unfortunately I'm still using TYPO3 7.6, but it's the same in principle like the latest TYPO3 CMS, so I also use Fluid_styled_content .. uff!
I've included the lazy load javascript plugin into my TYPO3-Website and now I try to change the FLUID-partial typo3conf/ext/myext/Resources/Private/Extensions/Fsc/Partials/MediaGallery.html - but I've a probem with this .. because my changing in line 'file' throws an error. I try it with or without " or \" ..
<f:section name="media">
<f:media
file="{f:uri.image(src: \"EXT:/myext/Resources/Public/img/icons/blank.gif\", treatIdAsReference:1}"
class="lazyload"
data="{src: '{f:uri.image(image: column.media)}'}"
width="{column.dimensions.width}"
height="{column.dimensions.height}"
alt="{column.media.alternative}"
title="{column.media.title}"
/>
</f:section>
I've changed file="{column.media}" , because I want to load my 'blank.gif' instead of the image himself.
Argument 1 passed to TYPO3\CMS\Core\Resource\Rendering\RendererRegistry::getRenderer() must implement interface TYPO3\CMS\Core\Resource\FileInterface, string given, called in C:\www\typo3_src-7.6.31\typo3\sysext\fluid\Classes\ViewHelpers\MediaViewHelper.php on line 90
The output is like this:
<img data-src="/fileadmin/user_upload/admins.jpg" class="lazyload" src="/fileadmin/user_upload/admins.jpg" width="280" height="176" alt="">
Lazy load is working perfect, but I have to load the blank.gif.
Is there a solution to manipulate the FSC-partials or do I need a new ViewHelper, like this?
I'm trying to imply lazyload with a specific slider, it requests the src of the image to be entered twice, once as src and second as data-lazy like this:
<img src="domain.com/image.png" data-lazy="domain.com/image.png">
with <f:image /> I can use data="{lazy: 'domain.com/image.png'}" and should repeat the src of the image created with the viewhelper ... (typo3 documentation and the inline use of f:uri.image)
i have actually two questions:
how do I nest f:uri.image ? this gives an error <f:image src="{image.uid}" treatIdAsReference="1" data="{lazy: '{f:uri.image(src: {image.uid})}'}"/>
it should actually be the refference to the same
image, if I nest f:uri.image would I create a second rendered image ?
(especially because I also set width and height, but I wanted to keep the snippets simple)
the solution should work for TYPO3 v7 and v8
Try this
<img src="{f:uri.image(src : image.uid)}" data-lazy="{f:uri.image(src : image.uid)}" />
You don't have to use the <f:image ..> tag for creating the <f:uri.image ..> returns the same processed resource.
In loop:
<f:for each="{MARKER}" as="file">
<img class="lazy" src=".../blank.gif" data-lazy="{f:uri.image(image: file, width:'XXXc', height:'XXXc', treatIdAsReference:1)}" alt="{file.alternative}" title="{file.title}">
</f:for>
In typo3 6.2, with fluidpage extension. (http://fluidtypo3.org/)
I create a page with 2 fluid content elements.
Im trying to render a page's content with fluid template.
This is my code :
<v:content.render column='0' pageUid="3" as="contentElement">
<f:for each="{contentElement}" as="content">
<f:debug title="Debug of MyArray">{contentElement}</f:debug>
</f:for>
</v:content.render>
Edit : sry, my mistake i didnt indeent the last line.
About debug, it change nothing, because contentElement is empty.
This displays nothing. When I check array's data, I got empty array.
Thanks in advance for you help.