image thumbnails: compressing additional images for thumbnails at 20k. css improvements

main
simp 2025-06-20 00:14:44 -04:00
parent f541d8aa7d
commit df1f27b053
3 changed files with 26 additions and 18 deletions

6
app.py
View File

@ -287,7 +287,7 @@ def home():
else:
guess_list.append(f'<p class="guess">...?</p>')
#<img src="{get_relative_image_url(v['url'], Pl.instance_url)}" alt="{k}" width="100%">
img_ = f'''<div><a href="/id/{k}" class="fill"><div class="panel_img" style="background-image: url({get_relative_image_url(v['url'], Pl.instance_url)}); background-size: 100%;">{h1_}</div></a></div>'''
img_ = f'''<div><a href="/id/{k}" class="fill"><div class="panel_img" style="background-image: url({get_relative_image_url(v['url'], 'thumbnails', Pl.instance_url)}); background-size: 100%;">{h1_}</div></a></div>'''
guesses = f'''{''.join(guess_list)}'''
div_dict[n] = f'''<div class="column">{img_}<div class="panel_guess">{guesses}</div></div>'''
n += 1
@ -359,7 +359,7 @@ def finished():
else:
img_hover = f"{guesses}. Audio not available."
# img_ = f'''<div data-tooltip="{img_hover}"><a href="/id/{k}"><img src="{get_relative_image_url(v['url'], Pl.instance_url)}" alt="{k}" width="100%"></a></div>'''
img_ = f'''<div><a href="/id/{k}" class="fill"><div class="panel_img" style="background-image: url({get_relative_image_url(v['url'], Pl.instance_url)}); background-size: 100%;">{h1_}</div></a></div>'''
img_ = f'''<div><a href="/id/{k}" class="fill"><div class="panel_img" style="background-image: url({get_relative_image_url(v['url'], 'thumbnails', Pl.instance_url)}); background-size: 100%;">{h1_}</div></a></div>'''
# guesses = f'''{''.join(guess_list)}'''
# div_dict[n] = f'''<div class="column">{h1_}{answer}{img_}</div>{guesses}</div>'''
div_dict[n] = f'''<div class="column">{img_}</div>'''
@ -729,7 +729,7 @@ def img(input_string):
h1_ = f'''<div class="caption_img"><h1 style="text-align:left">??? - ???</h1>ID {s_id} | TRIES {Pl.all[s_id]['tries_total']} | {expires}</div>'''
else:
h1_ = f'''<div class="caption_img"><h1 style="text-align:left">{Pl.all[s_id]['title']} - {Pl.all[s_id]['artist']}</h1>ID {s_id} | TRIES {Pl.all[s_id]['tries_total']} | WINNER {Pl.all[s_id]['winner']}</div>'''
body = f'''<div style="height: 500px; background-size: 500px 500px; background-repeat: no-repeat; background-image: url({get_relative_image_url(Pl.all[s_id]['url'], Pl.instance_url)});">
body = f'''<div style="height: 500px; background-size: 500px 500px; background-repeat: no-repeat; background-image: url({get_relative_image_url(Pl.all[s_id]['url'], 'images', Pl.instance_url)});">
<div1><div class="caption" style="height:50px">{h1_}</div>
</div>'''
elif s_id in Pl.finished_songs:

View File

@ -82,7 +82,7 @@ bytes_file_accepted = {
'opus': {'start': ['1f8b0800000000000003']},
}
def get_relative_image_url(url:str, instance_url:str)->str:
def get_relative_image_url(url:str, subpath:str, instance_url:str)->str:
"""converts absolute image url to relative
Args:
@ -96,7 +96,7 @@ def get_relative_image_url(url:str, instance_url:str)->str:
if len(domainsplit) > 1:
fname = url.split('/')
filename = fname[len(fname)-1:][0]
relative_url = f'/static/images/{filename}'
relative_url = f'/static/{subpath}/{filename}'
else:
relative_url = url
return relative_url
@ -664,6 +664,7 @@ def file_download(url:str, proxies:dict, timeout:int, file_upload:dict)->tuple:
print(fname, valid, filename_filetype)
random_name = f'{random_string(25)}.jpeg'
file_name = os.path.join(script_directory, 'static', 'images', random_name)
thumbnail_name = os.path.join(script_directory, 'static', 'thumbnails', random_name)
def check_response_headers(content_encoding, content_type, content_length):
print(content_type)
@ -702,6 +703,8 @@ def file_download(url:str, proxies:dict, timeout:int, file_upload:dict)->tuple:
img_obj = Image.open(stream).convert("RGBA")
resized_image, image_size_bytes = resize_image_to_target_size(img_obj, 150*1000)
resized_image.save(file_name, format="JPEG", quality=75, optimize=True, progressive=True)
thumb_image, image_size_bytes = resize_image_to_target_size(img_obj, 20*1000)
thumb_image.save(thumbnail_name, format="JPEG", quality=75, optimize=True, progressive=True)
success = True
return success, random_name
else:

View File

@ -193,6 +193,8 @@ html, body {
margin-left: auto;
padding-top: 2.5%;
padding-bottom: 2.5%;
padding-left: 2.5%;
padding-right: 2.5%;
width:50%;
height: 90vh;
flex-flow: column wrap;
@ -238,8 +240,8 @@ html, body {
}
.column {
flex: 24%;
max-width: 25%;
flex: 25%;
max-width: 24%;
padding: 0 3px;
}
@ -291,22 +293,24 @@ html, body {
}
.container_text {
padding-top: 5%;
padding-bottom: 8%;
padding-top: 5%;
padding-bottom: 8%;
margin-right: auto;
margin-left: auto;
background: #00000083;
padding-left: 0.5%;
padding-right: 0.5%;
background: #00000083;
width:100%;
flex-flow: column wrap;
text-align: left;
color: #EAED86;
position: absolute;
left: 0px;
height: 85vh;
border-right: none;
border-left: none;
overflow-y: scroll;
scroll-behavior: smooth;
position: absolute;
left: 0px;
height: 85vh;
border-right: none;
border-left: none;
overflow-y: scroll;
scroll-behavior: smooth;
}
.container_table {
font-size: 0.9em;
@ -362,7 +366,8 @@ html, body {
}
.panel_img {
height: 30vh;
/* height: 40vh; */
height: 40vh;
margin-top: 5px;
border: 1px solid #1C451A;
/* box-shadow: 0px 0px 8px 2px #1C451A; */