I'm a typo newbie, and was wondering, how I can make the following code work in my HTML Template file:
<img src="EXT:extension-name/Resources/Public/Images/Logo/logo-white.png" alt="logo.png">
Looking forward to your anwers, thanks.
This cannot be done in an HTML file but within a Fluid template file you should use the uri.resource viewhelper:
<img src="{f:uri.resource(path: 'Images/Logo/logo-white.png')}" alt="Actual explanation of the logo content">
If used within an Extbase plugin there is nothing else to do.
For templates using the FLUIDTEMPLATE content object you'll need to set the extension name, for example with an extensionName: 'MyExt' as argument:
<img src="{f:uri.resource(path: 'Images/Logo/logo-white.png', extensionName: 'MyExt')}" alt="Actual explanation of the logo content">
Alternatively use controllerExtensionName in your TypoScript setup.
Related
Since the release of the security patches in August 2021 that prevents Cross-Site Scripting via Rich-Text Content I noticed that the output of HTML Content Elements suddenly changed in our projects. Some tag attributes and tags got removed by the newly introduced HTML Sanitizer (when the template is modified so that t3:// style TypoLinks get rendered).
So simply overriding the default Html.html Fluid Template, changing the <f:format.raw> to <f:format.html> and adding a html decoding like in the following example is no longer sufficient.
<f:section name="Main">
<f:comment> We use this to render links and other stuff in html elements </f:comment>
<f:format.htmlentitiesDecode>
<f:format.html parseFuncTSPath="lib.parseFunc">
{data.bodytext}
</f:format.html>
</f:format.htmlentitiesDecode>
</f:section>
The easiest way to prevent changes in your html codes output provided by HTML Content Elements is to disable the sanitizer globally by adding lib.parseFunc.htmlSanitize = 0 to your TypoScript config, what is not ideal.
How can I disable the parseFunc.htmlSanitize only for this purpose?
Or is there an other solution to render TypoLinks within HTML Content Elements?
Note: You don't need to disable the HTML Sanitizer if you do not override the Html.html template!
Simply make a copy of lib.parseFunc and disable the sanitizer in this copy.
lib.parseHtmlFunc < lib.parseFunc
lib.parseHtmlFunc.htmlSanitize = 0
Then use this lib in your Html.html template.
<f:section name="Main">
<f:comment> We use this to render links and other stuff in html elements </f:comment>
<f:format.htmlentitiesDecode>
<f:format.html parseFuncTSPath="lib.parseHtmlFunc">
{data.bodytext}
</f:format.html>
</f:format.htmlentitiesDecode>
</f:section>
Thanks to #OliverHader for bringing me to the right track.
What is the correct way of adding CSS to the public folder of an extension? What do I need to do in order for that CSS to be loaded in.
For example I have the following structure:
Public/Css/style.css
Configuration/TypoScript/setup.typoscript
Configuration/TypoScript/constants.typoscript
Would I have to add some code in setup.typoscript?
Since TYPO3 8.7 you can add HTML to the header or footer from your Fluid template using the HeaderAssets and FooterAssets sections. For example:
<f:section name="HeaderAssets">
<link rel="stylesheet" href="{f:uri.resource(path: 'Css/styles.css')}"/>
</f:section>
The advantage of this over page.includeCSS is that it is only included whenever that template is rendered, instead of on all pages.
Your CSS has to be in:
extensionkey/Resources/Public/Css/
And then in your typoscript (setup) you can add:
page.includeCSS.csskey = EXT:extensionkey/Resources/Public/Css/style.css
The "csskey" has to be unique identifier.
Consider the following code:
from xhtml2pdf import pisa
if __name__=="__main__":
source_HTML = """<html>
<body>
<a href="http://www.stackoverflow.com">
<img src="http://i.stack.imgur.com/uQFNA.png"/>
</a>
<a href="http://www.stackoverflow.com">
<p>Stackoverflow</p>
</a>
</body>
</html>"""
output_filename = "output.pdf"
# open output file for writing (truncated binary)
result_file = open(output_filename, "w+b")
# convert HTML to PDF
pisa.CreatePDF(
source_HTML,
dest=result_file)
result_file.close()
The html should render both an hyperlink image and a hyperlink text, but xhtml2pdf renders the image without the hyperlink and the text with the hyperlink. Is this an issue with the code above or a limitation/bug with the library? Thanks in advance for any help with the above issue.
I found a way to get this too work but it is not very good.
You can add a before and after the img inside the A tag. And then set the font-size on the A tag to be the height of the image and then also set text-decoration to none.
So like I said this works but is not a great solution. I searched issues on xhtml2pdf's github page and cannot find anyone else with this issue.
In my Typo3 extension I'm showing a lot of images with fluid, an list view of products. Only if for some reason one image is missing on my server, Typo3 generates an full screen error so the complete website is then not working.
I my opinion there are three way to prevent it:
1) Configure Typo3 so it is ignoring broken image url's. Does anyone know if this is possible?
2) Let Fluid check if the image exists before it is generated. Don't know if this is possible?
3) Use the controller to check if the image exists before it is send to the frond-end. Only due to the manny images it uses a lot of processing.
I prefer the use of the media exists viewhelper from the VHS Viewhelper package. After installing and activating the extension it should look like this screenshot in your TYPO3 extension manager.
This example iterates through a array of products, that have a public picture property holding the filename of it's picture.
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:for each="{products}" as="product">
<v:media.exists file="fileadmin/products/{product.picture}">
<f:then>
<f:image src="fileadmin/products/{product.picture}" />
</f:then>
<f:else>
<f:image src="fileadmin/noImageFound.jpg" />
</f:else>
</v:media.exists>
</f:for>
Cany anybody tell me how to render the following structure in
typo3 without developing a new extension.
<div class="sidebar-details">
<div class="sidebar-details-title">
<h4><span>MY TITLE</span></h4>
</div>
<div class="sidebar-details-body">
<p>
TEXT
</p>
</div>
</div>
What would be the best/recommended way to achieve this ?
Start using gridelements.
Gives you exactly what you want.
http://typo3.org/extensions/repository/view/gridelements
You can activate the RTE html mode and put it in its source or make use of HTML element, but that's depending on your needs.
If you want to keep RTE functions for editing the text what I mentioned first is the recommended way. Have done it several times myself.
If you are using Template mapping using Templavoila so, you can create FCE(Flexible content element) for it and you can map this part.
If you are using fluid template mapping so, you can create gridelement for it. and map all part.