[feature] custom image as placeholder

[medarob]

Hi,

I installed the extension and it works. :)
Currently it looks like this:

Is it possible to add a custom image as background image behind the play-button? Maybe it's possible to add an option so that the image can be changed via typoscript?

[IchHabRecht]

Hi @medarob,

It seems as the video doesn't provide any preview image. But you can change the fluid template on your own. I don't think it is necessary to add any option here. Just set the TypoScript constants "lib.socialgdpr.view..." to any other paths.

[medarob]

I just had a look at the fluid template.
Which content element do you use for the preview or how can I make use of {data.preview}?

<div class="social-gdpr-youtube-video" id="yt{data.uid}" style="{f:if(condition: data.preview, then: 'background-image: url(\'{data.preview}\'); ')}{f:if(condition: data.height, then: 'height: {data.height}px; ')}{f:if(condition: data.width, then: 'width: {data.width}px;')}">

Currently I use the HTML content element with an <iframe>-tag.

[IchHabRecht]

The preview image is fetched in an own PHP class and given as url into the fluid template. So you either need to change the whole if condition to suit your needs or extend an else part with a default image.

[medarob]

Mh, I tried this:

lib.socialgdpr.view	{
	templateRootPaths {
		150 = EXT:my_extension/Resources/Private/_socialgdpr/Templates/
		}
}

and put the changed Youtube.html into that folder and this didn't work.

I also tried adding this line
lib.socialgdpr.view.templateRootPath = EXT:my_extension/Resources/Private/_socialgdpr/Templates/
to constants.typoscript but that didn't work either.

What did I wrong? 🤔

[IchHabRecht]

You either need to set TypoScript setup to lib.socialgdpr.templateRootPaths.150 = EXT:my_extension/Resources/Private/_socialgdpr/Templates/ or TypoScript constants lib.socialgdpr.view.templateRootPath = EXT:my_extension/Resources/Private/_socialgdpr/Templates/

You may check the settings in the Template > TypoScript Object Browser. Make sure your template is called Youtube.html

[medarob]

If I add the path directly in the backend, where you can change the constants, it's working and the backgroundimage is shown correctly but it's not working when I add this line of code to my constants.typoscript file. 🤔 It's empty everytime...

So I kept digging and found out that I have to include this codeline to another extension.
We have a base extension with general stuff and then we have child extensions (websites) which inherit the configuration of the base extension but you can customize the settings or add new templates etc.
So, if I put the codeline into the child extension it works. I guess something is not correct configured on my end because it should work regardless of which extension the settings are included... 🤨

[IchHabRecht]

I guess you missed to define a dependency to social_gdpr to ensure it gets loaded beforehand.

[medarob]

The preview image is fetched in an own PHP class and given as url into the fluid template. So you either need to change the whole if condition to suit your needs or extend an else part with a default image.

A late follow up question :)

I changed the else part to use a default image. If you have only one video on the whole site that is good enough because you can customize the default image. If you have more videos, you need the possibility to use custom preview images for each videos otherwise you end up having the same image for each video.

When you say that you use an own PHP class that means that the functionality to use a custome preview image is missing in this extension? I only found a class YoutubeImageService.php but not sure what this class exactly does... It looks for typo3temp/assets/tx_socialgdpr/youtube_' . md5($id) . '.jpg but also for maxresdefault.jpg', 'mqdefault.jpg', 'hqdefault.jpg', '0.jpg ?

[IchHabRecht]

Hi @medarob,

To be able to help you, I need some more information about your use case. Which preview images do you want to use? How are they named, where is their path?

[medarob]

Thank you for your reply.

There are two use-cases:

• preview image for a youtube live stream
• preview image for a normal youtube video

That's probably exactly the problem: Where do I define the preview images so that they will be used if I add a youtube video?
So, here is what I have done so far:

For the live stream I created a HTML CE with an iframe:

<iframe height="400" src="https://www.youtube.com/embed/live_stream?channel=CHANNEL-ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

For the normal youtube video I created a Text&Media element and added a normal youtube video for testing purposes:

Then I get a cryptic file inside the folder, like Xgs73kL9dks5s.youtube which is 11 bytes big. I assume that this is the video id.
Now I have the video included in the Text&Media CE.

Those extra fields are from this extension: https://extensions.typo3.org/extension/hh_video_extender/

Now I changed the Youtube.html template and added my default image to the else part of the if condition:

<div class="social-gdpr-youtube-iframe">
    <div class="social-gdpr-youtube-video" id="yt{data.uid}" style="{f:if(condition: data.preview, then: 'background-image: url(\'{data.preview}\');', else: 'background-image: url(\'/fileadmin/My_Website/Images/video/my_default_image.jpg\');')}

This image is used for every youtube video, which is OK if I have only one youtube video on the website (normal or livestream) because I can customize it. But if I have more youtube videos I end up having this image for every video.

So, to answer your question: I don't know where I have to put the preview images for youtube videos so that they are being used. Do I have to create a special preview folder and use the video id as filename?

For self hosted videos, like test.mp4, where I don't have the chance to define custome preview images I created a subfolder "preview" and in that folder I save an image with the filename of the video, for example test.jpg. So the fluid code will look for the subfolder and a jpg which has the same name like the video file.

Not sure if that approach can be used for the livestream or normal youtube videos.

[IchHabRecht]

Hi @medarob,

If you want to define your own preview image depending on the video I guess the simplest solution is to store those images as [youtube-id].jpg in a folder and use {data.id} in your fluid template to include the image.