Question

如果有人对我的问题有更好的头衔，请继续更改......; - ）

我已经谷歌搜索了很长一段时间，但要么我没有提出正确的问题，要么到目前为止还没有人在努力解决这个问题。

我正在使用TYPO3 7.6，fancyBox v3.0.47（http://fancyapps.com/fancybox/）以及我为图片库创建的内容元素。到现在为止还挺好。在客户要求将视频文件添加到该库之前，一切正常。该库使用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需要链接，里面的图像是预览图像（可以裁剪）。

这适用于图片，我可以将<f:image image="{file}"更改为<f:media file="{file}" />，以便使用＆＃34;从网址添加媒体＆＃34;加载到内容元素中的YouTube视频显示并在点击时开始播放，但这样来自fancyBox的灯箱不会弹出，并且它保持与预览图像一样小。

我尝试使用不同的方法，我遇到了youtube视频。使用＆＃34;从网址添加媒体＆＃34;视频将作为youtube-file保存到文件列表中（意味着它具有文件扩展名＆＃34; .youtube＆＃34;）并且它的标题将成为文件的名称。当我使用<f:debug>时，我无法找到真实链接（例如https://www.youtube.com/watch?v=WEkSYw3o5is），也无法找到YouTube视频中的视频ID（例如，WEkSYw3o5is）。如果我使用上面用于图像的方法，我会看到视频的预览图像，但是当我点击它时，灯箱会打开，除了显示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>

如果我正确无误，那就是指向fancybox链接的youtube视频链接，如文档中所述。

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

我赞成只能更改模板的解决方案。

修改

使用渲染后的第一种方法和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是从图像周围的链接中获取的。这就是为什么我想将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

获取网址：{file.publicUrl} 获取YouTube ID：{file.contents}

Answer 2

首先，我想解释如果将YouTube视频添加到TYPO3媒体列表中会发生什么。 TYPO3会将视频ID和视频ID存储在其创建的f:media文件中。它将在渲染器中使用此视频ID，该渲染器会将iFrame和URL添加到此ID。所有这些都发生在TYPO3\CMS\Core\Resource\Rendering\YouTubeRenderer ViewHelper中。相应的渲染器位于<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>。现在，如果没有一点efford imo，你想要实现的目标是不可能的。您需要为缩略图添加其他图像字段，因此您可以执行以下操作，例如：

pyplot

这样你的fancybox就会打开隐藏的iFrame容器。 iFrame的宽度和高度可以通过ViewHelper的宽度和高度属性进行调整。

TYPO3 7.6使用fancybox

2 个答案: