Typo3, how to dynamically change content - typo3

Problem
There is the requirement, to swap out the logo, based on a choice, the user makes on first visit. (Logo for internationals and logo for north America)
What I came up with
On fist thought this problem can be solved using a cookie. I implemented some javascript, to check and set the cookie if needed. This works fine so far but using javascript to change to logo isn´t the way to go and now I´m looking for possible solutions to this.
Some thoughts
If following the cookie approach, I´d need a way to swap out the template/partials, based on the cookie. Is there any way to do this using fluid or typoscript perhaps?
Maybe the cookie approach is the wrong way to handle this at all? Maybe this could be done (ab-)using the language selection or something like that?
Any help or ideas are appreciated.
Thanks!

First of all: Please use a question title that describes the problem more precise.
After setting the cookie with your javascript, you can set the logo to render in the TypoScript.
With a condition (https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Conditions/Index.html#request-getcookieparams) you can read the cookie parameter and set the logo depending on the cookie.
[request.getCookieParams()['logo'] == 'us']
lib.logoFile = pathToYourLogos/us.svg
[else]
lib.logoFile = pathToYourLogos/international.svg
[end]

Thanks to #thomas-löffler and #jonas-eberle for pointing out the right direction. Thomass solution is meant for Typo3 >= 9. This solution that worked for me on Typo3 ver. 8.7 (also see this solution):
Get the cookie value inside typoscript (setup) like this:
lib.requestedLocation = TEXT
lib.requestedLocation.data = global:_COOKIE|<cookie-name>
After getting the cookie value we can use it with fluid like this:
<f:variable name="location" value="{f:cObject(typoscriptObjectPath: 'lib.requestedLocation')}" />
<f:if condition="{location} == 'america'">
<f:then>
<img class="logo" src="/path-to-us-logo.svg">
</f:then>
<!-- defaulting to international if cookie is not set or somehting else is wrong -->
<f:else>
<img class="logo" src="/path-to-international-logo.svg">
</f:else>
</f:if>

Related

How to use t3:// TypoLinks in TYPO3 HTML Content Elements without disabling `parseFunc.htmlSanitize` globally?

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.

TYPO3 Image From Extension

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.

Addthis button size class stopped working

We have a sharing toolbox that defaults to 32x32 px but we also use the same toolbox code to display at 20x20 px in other parts of our site. The code below (including Drupal tokens) worked fine for a few months but last month it started showing the icons at 32x32 even though it has the class addthis_20x20_style. It also changed the behavior on another system outside Drupal that uses the same toolbox code.
<div addthis:title="[node:title]" addthis:url="[node:url]"
class="addthis_sharing_toolbox addthis_default_style addthis_20x20_style">
</div>
I tried changing addthis_sharing_toolbox to addthis_toolbox per the support page at http://www.addthis.com/academy/customizing-the-addthis-toolbox/, but then the buttons do not display at all. The AddThis support pages are incredibly disorganized and outdated and they seem to have abandoned their user forum. I don't even know where else to ask.
Here's a reply I received from AddThis support. Hopefully this will be of use to others:
JAN 07, 2016 | 03:26PM EST
Hi,
We recently made a change to our code that affected some of our older
buttons.
You will need to use our advanced configuration code in the locations
that you would like our buttons to appear in 20x20.
Replace the current code in these locations with the following:
<div class="addthis_toolbox addthis_default_style addthis_20x20_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
Additional advanced configuration code information can be found here:
http://www.addthis.com/academy/customizing-the-addthis-toolbox/
Please let me know if you need any additional help
Thanks,
Mike
I am having the same problem. It looks like they have removed support for 20x20 sized buttons, as it is no longer listed on the academy support page you provided. It is a shame because it is the only size that has a constant height for facebook, facebook_like, tweet, etc buttons.
The below css styles, while feeling a little hacky, go some distance in repairing the broken functionality:
.addthis_20x20_style .at-icon-wrapper,
.addthis_20x20_style .at-icon {
height:20px !important;
width:20px !important;
}
That didn't fix the size of the google_plusone button. I happen to be using drupal as well - the addthis module - and the below 'customize services' settings worked pretty well.
That's:
Service code: google_plusone
HTML classes: addthis_button_google_plusone
HTML attributes: g:plusone:size="medium"
(Re the addthis service, the phrase "you had one job!" comes to mind...)

Prevent Typo3 broken image url error

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>

Creating Custom Content Element in TYPO3

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.