This commit is contained in:
azett 2022-07-02 12:50:04 +02:00
commit e9ad117428
3 changed files with 42 additions and 36 deletions

View File

@ -17,7 +17,7 @@ $theme ['version'] = 0.705;
$theme ['style_def'] = 'style.css'; $theme ['style_def'] = 'style.css';
$theme ['style_admin'] = 'admin.css'; $theme ['style_admin'] = 'admin.css';
$theme ['default_style'] = 'leggero'; $theme ['default_style'] = 'leggero-v2';
// Other theme settings // Other theme settings

View File

@ -58,10 +58,10 @@ class PhotoSwipeFunctions {
// for usage in HTML attributes, we need to remove quotes and HTML tags from the title // for usage in HTML attributes, we need to remove quotes and HTML tags from the title
$titleForAttributes = isset($attr ['title']) ? htmlentities(strip_tags($attr ['title'])) : ''; $titleForAttributes = isset($attr ['title']) ? htmlentities(strip_tags($attr ['title'])) : '';
// image may float, according the the given float attribute // image may float, according the the given float attribute - if not given, use "nofloat" class
$float = ' class="thumbnail nofloat" '; $floatClasses = 'thumbnail nofloat';
if (isset($attr ['float'])) { if (isset($attr ['float'])) {
$float = ' class="thumbnail float' . $attr ['float'] . '"'; $floatClasses = 'float' . $attr ['float'];
} }
// to get the HTML code for preview image, we use the Flatpress standard function do_bbcode_img() // to get the HTML code for preview image, we use the Flatpress standard function do_bbcode_img()
@ -78,28 +78,34 @@ class PhotoSwipeFunctions {
$previewHtml .= ' itemprop="thumbnail" title="' . $titleForAttributes . '">'; $previewHtml .= ' itemprop="thumbnail" title="' . $titleForAttributes . '">';
// PhotoSwipe needs to know the dimensions of the image - so we read them // PhotoSwipe needs to know the dimensions of the image - so we read them
$imgsize = getimagesize($imgPathRel); $imgsize = @getimagesize($imgPathRel);
$datasizeAttr = ($imgsize === false) ? '' : 'data-size="' . $imgsize [0] . 'x' . $imgsize [1] . '" ';
// set max width of the figure according to the width attribute
$styleAttr = isset($attr ['width']) ? ' style="width:' . $attr ['width'] . 'px" ' : '';
// now lets assemble the whole HTML code - including the overlay HTML, if not inserted into the DOM before // now lets assemble the whole HTML code - including the overlay HTML, if not inserted into the DOM before
$imgHtml = self::getPhotoSwipeOverlay() . // $imgHtml = self::getPhotoSwipeOverlay() . //
'<div class="photoswipe"> '<div ' . //
<figure ' . // 'class="photoswipe ' . $floatClasses . '"' . $styleAttr . //
'>' . //
'<figure ' . //
'itemprop="associatedMedia" ' . // 'itemprop="associatedMedia" ' . //
'itemscope ' . // 'itemscope ' . //
'itemtype="http://schema.org/ImageObject" ' . // 'itemtype="http://schema.org/ImageObject" ' . //
'data-index="' . self::$lastusedDataIndex . '" ' . // 'data-index="' . self::$lastusedDataIndex . '" ' . //
$float . ' ' . // 'class="' . $floatClasses . '" ' . //
'>' . // '>' . //
'<a ' . // '<a ' . //
'href="' . $imgUrl . '" ' . // 'href="' . $imgUrl . '" ' . //
'itemprop="contentUrl" ' . // 'itemprop="contentUrl" ' . //
'data-size="' . $imgsize [0] . 'x' . $imgsize [1] . '" ' . // $datasizeAttr . //
'data-index="' . self::$lastusedDataIndex . '" ' . // 'data-index="' . self::$lastusedDataIndex . '" ' . //
'title="' . htmlentities($title) . '" ' . // 'title="' . htmlentities($title) . '" ' . //
'>' . // '>' . //
$previewHtml . // $previewHtml . //
'</a>' . // '</a>' . //
'<figcaption>' . $title . '</figcaption>' . // '<figcaption' . $styleAttr . '>' . $title . '</figcaption>' . //
'</figure>' . // '</figure>' . //
'</div>'; '</div>';

View File

@ -186,37 +186,40 @@ background: transparent url(../img/play.png) no-repeat scroll 16px 14px !importa
background-image: url(../img/stop.png) !important; background-image: url(../img/stop.png) !important;
} }
div.photoswipe {
}
div.photoswipe figure { div.photoswipe figure {
display:inline-block;
margin:.5em 1em 0 0;
}
div.photoswipe figure img {
margin: 0 !important;
}
div.photoswipe figcaption {
text-align:center; text-align:center;
} }
div.photoswipe figure.floatleft {
div.floatleft {
float:left; float:left;
margin:0 1em 1em 0; margin:0 1em 1em 0;
} }
div.photoswipe figure.floatright { div.floatleft img.floatleft {
float:none;
}
div.floatright {
float:right; float:right;
margin:0 0 1em 1em; margin:0 0 1em 1em;
} }
div.floatright img.floatright {
float:none;
}
.img-gallery div.photoswipe figure { .img-gallery div.photoswipe figure {
display:inline-block; display:inline-block;
width:140px;
vertical-align: top; vertical-align: top;
text-align:center;
margin:.5em 1em 0 0; margin:.5em 1em 0 0;
} }
div.photoswipe figure figcaption {
width:200px;
}
.img-gallery div.photoswipe figure figcaption {
width:140px;
}
div.photoswipe figure.nofloat figcaption {
width:inherit;
}
div.photoswipe figure img {
margin: 0 0 .5em 0;
}
button.pswp__button--share { button.pswp__button--share {
display:none; display:none;
@ -229,14 +232,11 @@ div.img-gallery div.photoswipe
display: inline; display: inline;
} }
/*
Fixes FP standard behaviour: If no float attribute is given, the image will get float attribute "center"
*/
figure.nofloat,
figure.nofloat figcaption,
figure.nofloat img.center {
display:inline-block;
text-align:left !important;
}
.pswp__img { margin: 0px !important; } .pswp__img { margin: 0px !important; }
.pswp__caption__center {
text-align: center;
margin: 0 auto;
max-width:90%;
}