Skip to content

enh: webp added to figure examples #692

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 4, 2025
Merged

enh: webp added to figure examples #692

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 28 additions & 5 deletions _posts/2019-10-26-pyos-min-mistakes-theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
layout: single
title: "pyOS Website Theme Docs"
excerpt: "pyOpenSci minimal mistakes theme documentation."
author: "Leah Wasser"
author: "pyopensci"
permalink: docs/pyos-website/
header:
overlay_color: "#33205c"
Expand Down Expand Up @@ -75,43 +75,57 @@ Position images with the following classes.
### Figure -- align center

<figure class="align-center">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
<figcaption>Growth of pyOpenSci from 2019 to 2024. Growth of pyOpenSci from 2019 to 2024. Growth of pyOpenSci from 2019 to 2024. Growth of pyOpenSci from 2019 to 2024. </figcaption>
</picture>
</figure>

The image above happens to be **centered**.

```html
<figure class="align-center">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
<figcaption>Growth of pyOpenSci from 2019 to 2024</figcaption>
</picture>
</figure>
```


### Figure -- align left

<figure class="align-left">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
</picture>
</figure>


The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned**. There should be plenty of room above, below, and to the right of the image. Just look at him there --- Hey guy! Way to rock that left side. I don't care what the right aligned image says, you look great. Don't let anyone else tell you differently.

```html
<figure class="align-left">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
<figcaption>Growth of pyOpenSci from 2019 to 2024</figcaption>
</picture>
</figure>
```

You can also adjust the width inline:

```html
<figure class="align-left">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
<figcaption>Growth of pyOpenSci from 2019 to 2024</figcaption>
</picture>
</figure>
```

Expand All @@ -120,20 +134,25 @@ You can also adjust the width inline:
Below is a right aligned image

<figure class="align-right">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
</picture>
</figure>


And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.

The html looks like this:


```html
<figure class="align-right">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
</picture>
</figure>
```

Expand All @@ -143,17 +162,21 @@ The image below should extend outside of the parent container on right.


<figure class="full">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
</picture>
</figure>




```html
<figure class="full">
<picture>
<source srcset="/images/pyopensci-general/pyopensci-timeline2019-2024.webp" type="image/webp">
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
</picture>
</figure>
```

Expand Down