Damien De Paoli
83c7e5379c
BUT, the thumbnails for the videos are fixed ratios, so the resizing doesnt work for them.. Odd
53 lines
2.0 KiB
HTML
53 lines
2.0 KiB
HTML
{% extends "base.html" %}
|
|
{% block main_content %}
|
|
<div class="container-fluid">
|
|
<h3 class="offset-lg-2">{{page_title}} -- {{file_data.view_path}}</h3>
|
|
<div class="form-row input-group">
|
|
<div class="input-group-prepend">
|
|
<button class="btn btn-outline-info disabled" disabled>Size:</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button id="sz-but-64" class="sz-but btn btn-outline-info" onClick="ChangeSize(64)">XS</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button id="sz-but-96" class="sz-but btn btn-outline-info" onClick="ChangeSize(96)">S</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button id="sz-but-128" class="sz-but btn btn-info" onClick="ChangeSize(128)">M</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button id="sz-but-192" class="sz-but btn btn-outline-info" onClick="ChangeSize(192)">L</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button id="sz-but-256" class="sz-but btn btn-outline-info" onClick="ChangeSize(256)">XL</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
{% for obj in file_data.view_list %}
|
|
{% if obj.type != "Directory" %}
|
|
<center>
|
|
<figure class="figure px-2" font-size: 24px;>
|
|
{% if obj.type=="Image" %}
|
|
<a href="{{file_data.symlink}}/{{obj.name}}"><img class="thumb" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img></a>
|
|
{% elif obj.type == "Video" %}
|
|
<img height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img>
|
|
{% endif %}
|
|
<figcaption class="figure-caption text-center">{{obj.name}}</figcaption>
|
|
</figure>
|
|
</center>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div class="row">
|
|
</div class="container">
|
|
{% endblock main_content %}
|
|
{% block script_content %}
|
|
<script>
|
|
function ChangeSize(sz)
|
|
{
|
|
old_but=$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
|
|
$('#sz-but-'+sz).addClass('btn-info').removeClass('btn-outline-info')
|
|
$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
|
|
}
|
|
</script>
|
|
{% endblock script_content %}
|