mirror of https://github.com/zulip/zulip.git
portico: hello images are always x2 size
This commit is contained in:
parent
b08fea991b
commit
edef41ca32
|
@ -23,31 +23,24 @@
|
|||
<!-- dark theme is only with webp images, since webp support was at the same time or earlier than prefers-color-scheme https://caniuse.com/?search=prefers-color-scheme https://caniuse.com/webp -->
|
||||
<source class='appshot-1__img'
|
||||
type="image/webp"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-dark-1x.webp') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-1-dark-2x.webp') }} 2x"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-dark-2x.webp') }}"
|
||||
media="(min-width: 941px) and (prefers-color-scheme: dark)"/>
|
||||
<source class='appshot-1__img'
|
||||
type="image/webp"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-dark-1x.webp') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-1-mobile-dark-2x.webp') }} 2x"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-dark-2x.webp') }}"
|
||||
media="(max-width: 940px) and (prefers-color-scheme: dark)"/>
|
||||
<source width="1095" height="496" class='appshot-1__img'
|
||||
type="image/webp"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-1x.webp') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-1-2x.webp') }} 2x"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-2x.webp') }}"
|
||||
media="(min-width: 941px)"/>
|
||||
<source class='appshot-1__img'
|
||||
type="image/webp"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-1x.webp') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.webp') }} 2x"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.webp') }}"
|
||||
media="(max-width: 940px)"/>
|
||||
<source class='appshot-1__img'
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-1x.jpg') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.jpg') }} 2x"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.jpg') }}"
|
||||
media="(max-width: 940px)"/>
|
||||
<img alt="" width="1095" height="496" class='appshot-1__img' src="{{ static('images/landing-page/hello/generated/screen-1-1x.jpg') }}"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-1-1x.jpg') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-1-2x.jpg') }} 2x"/>
|
||||
<img alt="" width="1095" height="496" class='appshot-1__img' src="{{ static('images/landing-page/hello/generated/screen-1-2x.jpg') }}"/>
|
||||
</picture>
|
||||
<div class="cta-buttons">
|
||||
<a href="/try-zulip/">
|
||||
|
@ -100,17 +93,16 @@
|
|||
<!-- we only have mobile images here -->
|
||||
<source class='appshot-2__img'
|
||||
type="image/webp"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-1x.webp') }},
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }} 2x"
|
||||
media="(prefers-color-scheme: dark)"/>
|
||||
<source class='appshot-2__img'
|
||||
type="image/webp"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.webp') }},
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }} 2x"/>
|
||||
<img alt="" class='appshot-2__img'
|
||||
src="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }}"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }} 2x"/>
|
||||
src="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }}"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }}"/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -32,12 +32,12 @@ def generate_landing_page_images() -> None:
|
|||
for image_file_path in glob.glob(f"{ORIGINAL_IMAGES_DIR}/*"):
|
||||
file_name = Path(image_file_path).stem
|
||||
image = pyvips.Image.new_from_file(image_file_path)
|
||||
for size in (1, 2):
|
||||
scaled_width = get_x_size(image.width, size)
|
||||
scaled_height = get_x_size(image.height, size)
|
||||
scaled = image.thumbnail_image(scaled_width, height=scaled_height)
|
||||
for format in ("webp[Q=50]", "jpg[Q=70,optimize-coding=true]"):
|
||||
scaled.write_to_file(f"{GENERATED_IMAGES_DIR}/{file_name}-{size}x.{format}")
|
||||
size = 2
|
||||
scaled_width = get_x_size(image.width, size)
|
||||
scaled_height = get_x_size(image.height, size)
|
||||
scaled = image.thumbnail_image(scaled_width, height=scaled_height)
|
||||
for format in ("webp[Q=55]", "jpg[Q=75,optimize-coding=true]"):
|
||||
scaled.write_to_file(f"{GENERATED_IMAGES_DIR}/{file_name}-{size}x.{format}")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
|
|
@ -759,6 +759,7 @@ ul {
|
|||
|
||||
.appshot-1__img {
|
||||
width: auto;
|
||||
max-width: 400px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue