image thumbnails: compressing additional images for thumbnails at 20k. css improvements
parent
f541d8aa7d
commit
df1f27b053
6
app.py
6
app.py
|
@ -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:
|
||||
|
|
7
game.py
7
game.py
|
@ -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:
|
||||
|
|
|
@ -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; */
|
||||
|
|
Loading…
Reference in New Issue