adds block attributes

config/module.config.php

@@ -22,7 +22,9 @@ return [
             'panorama_type' => 'equirectangular',
             'pannellum_types' => [],
             'title' => '',
-            'height' => '400px',
+            'width' => 600,
+            'ratio' => '2',
+            'autoLoad' => false,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
             //'imgStyle' => '',
             'ui_background' => 'rgba(0,0,0,0.1)',

src/Form/PanoramaViewerBlockForm.php

@@ -29,12 +29,34 @@ class PanoramaViewerBlockForm extends Form
 		]);
 
 		$this->add([
-			'name' => 'o:block[__blockIndex__][o:data][height]',
+			'name' => 'o:block[__blockIndex__][o:data][width]',
-			'type' => Element\Text::class,
+			'type' => Element\Number::class,
       'options' => [
-				'label' => 'Height',
+				'label' => 'Width in pixels',
-				'info' => 'Please enter CSS px',
+			],
-			]
+			'attributes' => [
+				'min' => '100',
+			],
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][ratio]',
+      'type' => Element\Select::class,
+      'options' => [
+          'label' => 'Ratio',
+					'value_options' => ['2' => '2:1', '1.333' => '4:3', '1.777' => '16:9'],
+      ],
+		]);
+
+		$this->add([
+		    'type' => Element\Checkbox::class,
+		    'name' => 'o:block[__blockIndex__][o:data][autoLoad]',
+		    'options' => [
+		        'label' => 'Auto load the panorama',
+		        //'use_hidden_element' => true,
+		        'checked_value' => true,
+		        'unchecked_value' => false,
+		    ],
 		]);
 
 	}

src/Site/BlockLayout/PanoramaViewer.php

@@ -34,7 +34,7 @@ class PanoramaViewer extends AbstractBlockLayout
     }
 
 	public function getLabel() {
-		return 'PanoramaViewer';
+		return 'Panorama Viewer';
 	}
 
 	public function form(PhpRenderer $view,
@@ -49,7 +49,9 @@ class PanoramaViewer extends AbstractBlockLayout
 		$form->setData([
 			'o:block[__blockIndex__][o:data][panorama_type]' => $data['panorama_type'],
 			'o:block[__blockIndex__][o:data][title]' => $data['title'],
-			'o:block[__blockIndex__][o:data][height]' => $data['height'],
+			'o:block[__blockIndex__][o:data][width]' => $data['width'],
+			'o:block[__blockIndex__][o:data][ratio]' => $data['ratio'],
+			'o:block[__blockIndex__][o:data][autoLoad]' => $data['autoLoad'],
 		]);
 		$form->prepare();
 
@@ -83,11 +85,14 @@ class PanoramaViewer extends AbstractBlockLayout
 				}
 			}
 		}
-
+    $width = $block->dataValue('width');
+    $height = $width / $block->dataValue('ratio');
 		return $view->partial('common/block-layout/panorama-viewer', [
 			'panorama_type' => $block->dataValue('panorama_type'),
 			'title' => $block->dataValue('title'),
-			'height' => $block->dataValue('height'),
+			'width' => $width,
+			'height' => $height,
+      'autoLoad' => $block->dataValue('autoLoad'),
 			'urls' => $urls,
       'id' => 'pv-' . ++$id,
 		]);

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

@@ -12,8 +12,10 @@
 	?>
 
 	<style>
-		.panorama-viewer { height: <?= $height ?>; }
+		#<?= $id ?> {
-		.pannellum-img { width: 100%; }
+			height: <?= $height ?>px;
+			width: <?= $width ?>px;
+		}
 	</style>
 
 	<div class="pannellum">
@@ -22,11 +24,20 @@
 
 	<script>
 
-		pannellum.viewer("<?= $id ?>", {
+	<?php if ($panorama_type == "equirectangular") { ?>
-					type: "<?= $panorama_type ?>",
+			pannellum.viewer("<?= $id ?>", {
-					autoLoad: true,
+						type: "equirectangular",
-					panorama: "<?= $urls[0]; ?>",
+						autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
-		});
+						panorama: "<?= $urls[0]; ?>",
+			});
+	<?php } ?>
+	<?php if ($panorama_type == "cubemap") { ?>
+			pannellum.viewer("<?= $id ?>", {
+						type: "cubemap",
+						autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
+						cubeMap: <?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>,
+			});
+	<?php } ?>
 
 	<?php if ($title !== false): ?>
 		$('#pannellum-ui').append('<?= $title ?>');