asset/js/height_calculator.js

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

src/Form/PanoramaViewerBlockForm.php

@@ -20,20 +20,17 @@ class PanoramaViewerBlockForm extends Form
       ],
 		]);
 
-		/*
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][width]',
 			'type' => Element\Number::class,
       'options' => [
-				'label' => 'Width in percentage',
+				'label' => 'Width in pixels',
 			],
 			'attributes' => [
-				'min' => '50',
+				'min' => '100',
-				'max' => '100',
 			],
 		]);
-		*/
+
-		
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][ratio]',
       'type' => Element\Select::class,

src/Site/BlockLayout/PanoramaViewer.php

@@ -95,10 +95,14 @@ class PanoramaViewer extends AbstractBlockLayout
 		}
     $item_id = $attachments[0]->item()->url();
     //$title = $attachments[0]->item()->title();
+    $title = $block->dataValue('title');
+    $width = $block->dataValue('width');
+    $height = $width / $block->dataValue('ratio');
 		return $view->partial('common/block-layout/panorama-viewer', [
 			'panorama_type' => $panorama_type,
-			'title' => $block->dataValue('title'),
+			'title' => $title,
-			'ratio' => $block->dataValue('ratio'),
+			'width' => $width,
+			'height' => $height,
       'autoLoad' => $block->dataValue('autoLoad'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
 			'urls' => $urls,

view/common/block-layout/panorama-viewer.phtml

@@ -3,8 +3,6 @@
 																											'PanoramaViewer'));
 	$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/pannellum.js',
 																									'PanoramaViewer'));
-	$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
-																									'PanoramaViewer'));
 
 	if ($panorama_type == "video") {
 		$this->headLink()->appendStylesheet($this->assetUrl('vendor/video.js/video-js.css',
@@ -22,8 +20,9 @@
 ?>
 
 <style>
-	.pannemmul-wrap {
+	#<?= $id ?> {
-		width: 100%;
+		height: <?= $height ?>px;
+		width: <?= $width ?>px;
 	}
 </style>
 
@@ -96,6 +95,4 @@
 			 }
 		});
 	<?php	} ?>
-	var height = get_height('#<?= $id ?>', <?= $ratio ?>)
-	$('#<?= $id ?>').css('height', height)
 </script>