Video renders with block defined width, and respects initial ratio.

This commit is contained in:
buttle 2021-07-30 13:20:46 +02:00
parent 361f4c2917
commit 559a385055
6 changed files with 37 additions and 16 deletions

View File

@ -9,12 +9,19 @@ class Module extends AbstractModule
{ {
const NAMESPACE = __NAMESPACE__; const NAMESPACE = __NAMESPACE__;
const IMAGE_WIDTH = [
'25' => '25 %',
'50' => '50 %',
'75' => '75 %',
'100' => '100 %',
];
/*
const RATIOS = [ const RATIOS = [
'1.777' => '16:9', '1.777' => '16:9',
'1.333' => '4:3', '1.333' => '4:3',
'2' => '2:1', '2' => '2:1',
]; ];
*/
public function getConfig() public function getConfig()
{ {
return include __DIR__ . '/config/module.config.php'; return include __DIR__ . '/config/module.config.php';

View File

@ -0,0 +1,4 @@
function get_height(container, ratio) {
var height = $(container).width() / ratio
return height
}

View File

@ -31,7 +31,7 @@ return [
'VimeoBlockForm' => [ 'VimeoBlockForm' => [
'title' => '', 'title' => '',
'renderSourceLink' => true, 'renderSourceLink' => true,
'width' => 600, 'width' => 100,
'ratio' => '2', 'ratio' => '2',
'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;', 'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
] ]

View File

@ -12,13 +12,16 @@ class VimeoBlockForm extends Form
$this->add([ $this->add([
'name' => 'o:block[__blockIndex__][o:data][width]', 'name' => 'o:block[__blockIndex__][o:data][width]',
'type' => Element\Number::class, 'type' => Element\Select::class,
'options' => [ 'options' => [
'label' => 'Width in pixels', 'label' => 'Width',
], 'value_options' => Module::IMAGE_WIDTH,
],
/*
'attributes' => [ 'attributes' => [
'min' => '100', 'min' => '100',
], ],
*/
]); ]);
$this->add([ $this->add([

View File

@ -75,15 +75,17 @@ class Vimeo extends AbstractBlockLayout
static $id = 0; static $id = 0;
$media = $attachments[0]->item()->media()[0]; $media = $attachments[0]->item()->media()[0];
$width = 900; $vimeo_width = $media->mediaData()['width'];
//$height = $width / $block->dataValue('ratio'); $vimeo_height = $media->mediaData()['height'];
$height = $width / 1.333; $ratio = $vimeo_width / $vimeo_height;
return $view->partial('common/block-layout/vimeo', [ return $view->partial('common/block-layout/vimeo', [
'title' => $block->dataValue('title'), 'title' => $block->dataValue('title'),
'renderSourceLink' => $block->dataValue('renderSourceLink'), 'renderSourceLink' => $block->dataValue('renderSourceLink'),
'item_url' => $attachments[0]->item()->url(), 'item_url' => $attachments[0]->item()->url(),
'width' => $width, 'width' => $block->dataValue('width'),
'height' => $height, 'video_id' => $media->mediaData()['video_id'],
'ratio' => $ratio,
'vimeo_iframe' => $media->mediaData()['html'], 'vimeo_iframe' => $media->mediaData()['html'],
]); ]);
} }

View File

@ -1,4 +1,9 @@
<div class="vimeo-wrap" style="position:relative;"> <?php
$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
'Vimeo'));
?>
<div id="vimeo_<?= $video_id ?>" class="vimeo-wrap" style="position:relative;">
<?php if ($renderSourceLink) { ?> <?php if ($renderSourceLink) { ?>
<div class="source-link"> <div class="source-link">
@ -16,11 +21,11 @@
</div> </div>
<script> <script>
jQuery(document).ready(function() { jQuery(document).ready(function() {
var vimeo = $(".vimeo-wrap").find('iframe'); var vimeo = $("#vimeo_<?= $video_id ?>").find('iframe');
//$(vimeo).prop('width', <?= $width ?>); $(vimeo).prop("width", "<?= $width ?>%")
//$(vimeo).prop('height', <?= $height ?>); var height = get_height(vimeo, <?= $ratio ?>)
$(vimeo).prop("height", height)
}); });
</script> </script>