defines image width with percentages

This commit is contained in:
buttle 2021-04-19 14:24:34 +02:00
parent 7c1ee9d4d7
commit d86e63b9f5
4 changed files with 19 additions and 17 deletions

View File

@ -9,6 +9,13 @@ class Module extends AbstractModule
{ {
const NAMESPACE = __NAMESPACE__; const NAMESPACE = __NAMESPACE__;
const IMAGE_WIDTH = [
'25' => '25 %',
'50' => '50 %',
'75' => '75 %',
'100' => '100 %',
];
public function getConfig() public function getConfig()
{ {
return include __DIR__ . '/config/module.config.php'; return include __DIR__ . '/config/module.config.php';

View File

@ -21,13 +21,11 @@ class ImageViewerBlockForm 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' => [ ],
'min' => '100',
],
]); ]);
$this->add([ $this->add([

View File

@ -74,11 +74,10 @@ class ImageViewer extends AbstractBlockLayout
static $id = 0; static $id = 0;
$media = $attachments[0]->item()->media()[0]; $media = $attachments[0]->item()->media()[0];
$width = $block->dataValue('width');
return $view->partial('common/block-layout/imageViewer', [ return $view->partial('common/block-layout/imageViewer', [
'zoom' => $block->dataValue('zoom'), 'zoom' => $block->dataValue('zoom'),
'title' => $block->dataValue('title'), 'title' => $block->dataValue('title'),
'width' => $width, 'width' => $block->dataValue('width'),
'image' => $media->primaryMedia()->thumbnailUrl('large'), 'image' => $media->primaryMedia()->thumbnailUrl('large'),
'id' => 'iv-' . ++$id, 'id' => 'iv-' . ++$id,
]); ]);

View File

@ -20,9 +20,8 @@
?> ?>
<style> <style>
.archive-img { #<?= $id ?> {
width: <?= $width ?>px; width: <?= $width ?>%;
<!-- width: 50%; -->
} }
<?php if ($zoom == true) { ?> <?php if ($zoom == true) { ?>
#<?= $id ?> { #<?= $id ?> {
@ -51,13 +50,12 @@
<?php if ($zoom == true) { ?> <?php if ($zoom == true) { ?>
<script> <script>
/* /*
$(document).ready(function(){ $(document).ready(function(){
wheelzoom(document.querySelector('#<?= $id ?>')); wheelzoom(document.querySelector('#<?= $id ?>'));
}); });
*/ */
</script> </script>
<?php } ?> <?php } ?>
</div> </div>