Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/PabloLec/website-to-gif
GitHub Action to turn your website into a GIF :camera:
https://github.com/PabloLec/website-to-gif
actions automation documentation-generator documentation-tool ducumentation generator gif gif-animation gif-creator github-actions image image-generation image-generator publication readme readme-generator selenium selenium-python selenium-webdriver webp
Last synced: about 2 months ago
JSON representation
GitHub Action to turn your website into a GIF :camera:
- Host: GitHub
- URL: https://github.com/PabloLec/website-to-gif
- Owner: PabloLec
- License: gpl-3.0
- Created: 2021-07-09T11:56:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-13T01:11:44.000Z (about 2 months ago)
- Last Synced: 2024-11-13T06:11:48.806Z (about 2 months ago)
- Topics: actions, automation, documentation-generator, documentation-tool, ducumentation, generator, gif, gif-animation, gif-creator, github-actions, image, image-generation, image-generator, publication, readme, readme-generator, selenium, selenium-python, selenium-webdriver, webp
- Language: Python
- Homepage:
- Size: 270 MB
- Stars: 112
- Watchers: 3
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-actions - Website to GIF - Turn any webpage into a GIF to display on your README, docs, etc. (Community Resources / Utility)
- trackawesomelist - Website to GIF (⭐108) - Turn any webpage into a GIF to display on your README, docs, etc. (Recently Updated / [Sep 02, 2024](/content/2024/09/02/README.md))
- fucking-awesome-actions - Website to GIF - Turn any webpage into a GIF to display on your README, docs, etc. (Community Resources / Utility)
README
# website-to-gif [](https://github.com/PabloLec/website-to-gif/releases/) [](https://github.com/PabloLec/website-to-gif/blob/main/LICENSE)
This Github Action automatically creates a animated GIF or WebP from a given web page to display on your project README (or anywhere else).
## Usage
In your GitHub repo, create a workflow file or extend an existing one. (e.g. `.github/workflows/gif.yml`)
You have to also include a step to `checkout` and commit to the repo.
You can use the following example `gif.yml`. Make sure to modify the `url` value and add any other [input](#Inputs) you want to use.
`.github/workflows/gif.yml`
``` yaml
name: Generate demo file
on: push
jobs:
generate-gif:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Website to file
uses: PabloLec/[email protected]
with:
url: "https://docs.github.com/en/get-started"
- name: Commit file to GH repo
run: |
git config --global user.name "PabloLec/website-to-gif"
git config --global user.email "[email protected]"
git add .
git commit -m 'Update file'
git push
```
See [official GitHub doc](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions) to further customize your workflow.
## Inputs
| Name | Description | Default | Example |
|----------------------|-------------------------------------------------------------------------------------------------------------------------------|-----------------|----------------------------------|
| url | Web page URL to be captured. **Required** | | `url: "https://docs.github.com"` |
| save_path | File saving path, starts with `/`. Make sure the path you provide already exists as this action will not create any directory. | repo root | `save_path: "/docs/images/"` |
| file_format | Output file format, currently support GIF and WebP | GIF | `file_format: "WebP"` |
| file_name | File name, **do not include extension or path** | demo | `file_name: "ss_25_tps_100"` |
| window_width | Browser window width | 1920 (px) | `window_width: 1366` |
| window_height | Browser window height | 1080 (px) | `window_height: 768` |
| stop_y | Position where file capture should stop | bottom of page | `stop_y: 800` |
| start_y | Position where file capture should start | 0 (px) | `start_y: 1024` |
| final_width | Final file width | 640 (px) | `final_width: 1024` |
| final_height | Final file height | 360 (px) | `final_height: 576` |
| scroll_step | Number of pixels by scroll | 25 (px) | `scroll_step: 50` |
| time_per_frame | Milliseconds per frame | 100 (ms) | `time_per_frame: 200` |
| start_delay | Number of milliseconds to wait for before starting capture | 0 (ms) | `start_delay: 100` |
| no_scoll | Capture GIF without page scroll, will discard any scroll related parameter | false | `no_scoll: true` |
| time_between_frames | Number of milliseconds between frame captures if no_scroll is true | 100 (ms) | `time_between_frames: 200` |
| number_of_frames | Number of frames to be captured if no_scroll is true | 20 | `number_of_frames: 50` |
| resizing_filter | Filter used to resize frames, see https://pillow.readthedocs.io/en/stable/reference/Image.html?highlight=resize#PIL.Image.Image.resize | LANCZOS | `resizing_filter: "LANCZOS"` |
## Examples
Increase or decrease `scroll_step` and `time_per_frame` to modify file rendering and filesize.
#### `scroll_step: 15` `time_per_frame: 80`
#### `scroll_step: 25` `time_per_frame: 100`
#### `scroll_step: 50` `time_per_frame: 50`
#### `scroll_step: 50` `time_per_frame: 100`
#### `scroll_step: 50` `time_per_frame: 200`
You can also capture pages without scrolling
#### `no_scoll: true` `time_per_frame: 100` `time_between_frames: 100` `number_of_frames: 50`
## WebP
WebP rendering will take **a lot** of time to benefit from lossless quality and file size optimization.
## Contributing
Feel free to contribute!
To suggest a new feature, report a bug or offer your help, simply open a new [issue](https://github.com/PabloLec/website-to-gif/issues).