TYPO3 7.6从youtube-media-file获取youtube-url,用于自定义内容元素和fancybox

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}" />使被装载到内容元素与YouTube视频"从URL添加媒体"显示,并开始在其上点击时打不过这种方式从的fancybox的收藏夹就不会弹出和它保持与预览图像一样小.

我尝试使用不同的方法,我遇到了youtube视频.通过使用"从URL添加媒体",视频将作为youtube文件保存到文件列表(意味着它具有文件扩展名".youtube"),并且它的标题将成为文件的名称.当我使用时,<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>

如果我是正确的,我需要的是youtube视频的链接,用于fancybox的链接,如文档中所述.

我真正想要的是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}