TYPO3 7.6 get youtube-url from youtube-media-file for custom content element with fancybox

Question

如果有人对我的问题有更好的标题，请继续更改...;-)

我在谷歌上搜索了很长时间，但要么我没有问正确的问题，要么到目前为止没有人遇到过这个问题。

我正在使用 TYPO3 7.6、fancyBox v3.0.47 (http://fancyapps.com/fancybox/) 和我自己为 image-gallery 创建的内容元素。到目前为止，一切都很好。一切正常，直到客户要求将视频文件添加到该画廊。画廊使用 fancyBox 作为灯箱，我使用如下：

<div class="imgGalleryIMG">
  <a href="/fileadmin{file.originalFile.identifier}" data-fancybox="gallery" data-caption="{file.description}">
    <f:image image="{file}" crop="{file.crop}" />
  </a>
</div>

fancybox需要link，里面的图片是预览图（可以裁剪）

这适用于图像，我可以将 <f:image image="{file}" 更改为 <f:media file="{file}" />，以便显示加载到带有 "Add media from URL" 的内容元素中的 youtube 视频，并在单击时开始播放在它上面但是这样来自 fancyBox 的灯箱不会弹出并且它保持和 preview-image.

一样小

我尝试使用不同的方法，但我被 youtube 视频卡住了。通过使用 "Add media from URL"，视频将作为 youtube-file 保存到文件列表（意味着它具有 file-extension“.youtube”），并且它的标题成为文件的名称。当我使用 <f:debug> 时，我找不到真正的 link（例如 https://www.youtube.com/watch?v=WEkSYw3o5is），也找不到 youtube 视频的视频 ID（例如 WEkSYw3o5is）。如果我使用我用于图像的上述方法，我有一个 preview-image 的视频，但是当我点击它时，灯箱打开并且除了显示 youtube-video-id 之外没有其他任何东西。

第二种方法：

<div class="imgGalleryIMG">
  <f:if condition="{file.originalFile.properties.extension} == 'youtube'">
    <f:then>
      <a href="{file.originalFile.identifier}" data-type="iframe" data-fancybox="gallery" data-caption="{file.description}">
        <f:image image="{file}" />
      </a>
    </f:then>
    <f:else>
      <a href="/fileadmin{file.originalFile.identifier}" data-fancybox="gallery" data-caption="{file.description}">
        <f:image image="{file}" crop="{file.crop}" />
      </a>
    </f:else>
  </f:if>
</div>

如果我是正确的，我需要的是 link 的 link for fancybox 的 youtube 视频，如文档中所述。

我真正想要的是 youtube-video 的 display-image，点击后会在灯箱中显示（没有自动播放）。我怎样才能做到这一点？

我更喜欢仅更改模板的解决方案。

编辑

在渲染和 fancybox 发挥其魔力之后使用第一种方法，结果如下所示：

<div class="fancybox-container fancybox-show-controls fancybox-show-infobar fancybox-show-buttons fancybox-container--ready fancybox-controls--canzoomIn" role="dialog" tabindex="-1" id="fancybox-container-1" style="">
  ...
  <div class="fancybox-slider-wrap">
    <div class="fancybox-slider" style="transform: translate(0px, 0px);">
      <div class="fancybox-slide fancybox-slide--current fancybox-slide--image fancybox-slide--complete" style="transform: translate(0px, 0px);">
        <div class="fancybox-placeholder" style="transform: translate(512px, 131px) scale(1, 1); width: 1024px; height: 767.94px; opacity: 1; transition: none;">
          <img class="fancybox-image" src="/fileadmin/user_upload/pathToImg.jpg">
        </div>
      </div>
    </div>
  ...
  </div>
... 
</div>

这是灯箱代码。在我的第一种方法中，image-src 是从图像周围的 link 中获取的（而不是从 image-file 中获取）。这就是为什么我想用流体将 youtube-url 或 youtube-id 放入我的部分。

解决方案

感谢 minifranske，我找到了一个简单的方法：

<f:if condition="{file.originalFile.properties.extension} == 'youtube'">
  <f:then>
    <a href="https://www.youtube.com/embed/{file.contents}" data-type="iframe" 
data-fancybox="gallery" data-caption="{file.description}">
      <f:image image="{file}" />
    </a>
  </f:then>

非常感谢！ :)

Answer 1

首先，我想解释一下，如果将 YouTube 视频添加到 TYPO3 媒体列表中，究竟会发生什么。 TYPO3 将存储视频 ID，并且仅在它创建的 .youtube 文件中存储视频 ID。它将在向此 ID 添加 iFrame 和 URL 的渲染器中使用此视频 ID。所有这些都发生在 f:media ViewHelper 中。相应的渲染器位于 TYPO3\CMS\Core\Resource\Rendering\YouTubeRenderer。现在，如果 imo 不付出一点努力，你想要实现的目标是不可能的。您需要为缩略图添加一个额外的图像字段，因此您可以这样做，例如：

<f:if condition="{youtubeFile}">
    <div class="yt-facybox">
        <a class="facybox" href="#yt-iframe">
            <f:media file="{youtubeThumbnailFile}" />
        </a>
        <div style="display: none" id="yt-iframe">
            <f:media file="{youtubeFile}" width="600" height="530" />
        </div>
    </div>
</f:if>

这样您的 fancybox 将只打开隐藏的 iFrame 容器。 iFrame的宽高可以通过ViewHelper的width和height属性来调整。

Answer 2

获取URL：{file.publicUrl} 要获取 YouTube ID：{file.contents}

TYPO3 7.6 get youtube-url from youtube-media-file for custom content element with fancybox

TYPO3 7.6 get youtube-url from youtube-media-file for custom content element with fancybox

video

youtube

typo3

fancybox

typo3-7.6.x