Streams/streams
Streams/streams
1
0
Fork 0
mirror of https://codeberg.org/streams/streams.git synced 2024-09-20 00:35:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

adaptive cover photo aspect ratio

Browse source
This commit is contained in:
nobody 2022-03-17 11:01:41 -07:00
parent eff0b62be7
commit 6247a478a1
2 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
Code/Widget/Cover_photo.php
View file

@ -16,7 +16,7 @@ class Cover_photo
$o = '';
if (App::$module == 'channel' && $_REQUEST['mid']) {
if (App::$module === 'channel' && $_REQUEST['mid']) {
return '';
}
@ -83,19 +83,18 @@ class Cover_photo
$subtitle = '';
}
$c = Channel::get_cover_photo($channel_id, 'html');
$c = Channel::get_cover_photo($channel_id, 'array');
if ($c) {
$c = str_replace('src=', 'data-src=', $c);
$photo_html = (($style) ? str_replace('alt=', ' style="' . $style . '" alt=', $c) : $c);
$o = replace_macros(Theme::get_template('cover_photo_widget.tpl'), array(
'$photo_html' => $photo_html,
$o = replace_macros(Theme::get_template('cover_photo_widget.tpl'), [
'$photo' => $c,
'$style' => $style,
'$alt' => t('cover photo'),
'$title' => $title,
'$subtitle' => $subtitle,
'$hovertitle' => t('Click to show more'),
'$hide_cover' => $hide_cover
));
]);
}
return $o;
}

11
view/tpl/cover_photo_widget.tpl
View file

@ -16,7 +16,7 @@
}
$('#cover-photo').removeClass('d-none');
cover_height = Math.ceil($(window).width()/1.77777778);
cover_height = calc_height();
$('#cover-photo').css('height', cover_height + 'px');
datasrc2src('#cover-photo > img');
@ -52,7 +52,7 @@
});
$(window).resize(function () {
cover_height = Math.ceil($(window).width()/1.77777778)
cover_height = calc_height();
$('#cover-photo').css('height', cover_height + 'px');
if($(window).width() < 755) {
$('#cover-photo').remove();
@ -63,6 +63,11 @@
});
function calc_height() {
if (! {{$photo.height}} ) return Math.ceil($(window).width()/1.77777778);
return Math.ceil( ({{$photo.width}} / {{$photo.height}}) * $(window.width()));
}
function slideUpCover() {
if(coverSlid) {
return;
@ -95,7 +100,7 @@
</script>
<div class="d-none" id="cover-photo" title="{{$hovertitle}}">
{{$photo_html}}
<img class="zrl" width="{{$photo.width}}" height="{{$photo.height}}" data-src="{{$photo.url}}" alt="{{$alt}}" style="{{$style}}" >;
<div id="cover-photo-caption">
<h1>{{$title}}</h1>
<h3>{{$subtitle}}</h3>