Create gen-img-front-end.md

src/content/docs/contributors/gen-img-front-end.md

@@ -0,0 +1,63 @@
+---
+title: Using the gen-img front-end to generate speaker images / event collateral
+---
+
+`WORK IN PROGRESS`
+
+## Preamble
+
+
+#### Quick-reference:
+[https://github.com/web3privacy/web](https://github.com/web3privacy/web)
+
+[gen-img frontend](https://web3privacy.info/gen/event/)
+
+[gen-img background source](https://github.com/web3privacy/web/tree/main/public/gen-img/events)
+
+
+## Pre-requisites
+- [ ] Have a Github account to create a PR in this repository[https://github.com/web3privacy/data](https://github.com/web3privacy/data)
+- [ ] Have a background image to upload to /web (or use one already within the front-end selector)
+
+
+## Step-by-step Guide
+
+### Part 1: Setup
+- [ ]  Sign in to Github and go to the [Data repository](https://github.com/web3privacy/web)
+- [ ]  Make a fork of the Data repository, and proceed to make the edits in your fork
+- [ ]  Collect the following information for the new event: date, location, lead person(s), registration link, some of the confirmed speakers
+- [ ]  
+
+### Part 2:  Commits
+- [ ] Images for events are similar but require extra steps (see below) story which also begins with Data respoitory. Images for events need to be uploaded to /data/src/events/_images in 4 different image sizes. To aid for the creation of these images a javascript script was written with the Web repository which can be used from the frontend here: https://web3privacy.info/gen/event/
+- [ ] To be able to create easily the 4 formats of images, you must first upload a base image to the folder and then add it to the svelte function...
+https://github.com/web3privacy/web/tree/main/public/gen-img/events
+- [ ]  Generate the 4 different format images for the event using the [gen-img frontend](https://web3privacy.info/gen/event/)
+- [ ]  navigate to the gen-img page for the event by clicking on the image or use the drop-down menu
+- [ ] right-click to 'save image as' for the 5 formats needed: square, wide-square, wide, poster, poster-simple. (Please note: the speaker image is not necessary at this time, only useful to generate marketing collateral)
+- [ ] Upload those images to your fork within the _images folder noted in last step of Part 2
+- [ ] Double check the content and images are there, then you can create a Pull Request from your fork into the main /data repository.
+
+### Part 3: Testing
+- [ ] Once the PR is merged, verify there are no issues within the Github Pages deployment. To do this visit the Actions page and see if any recent Actions have failed (red circle indicates this).
+- [ ] Request that the /data maintainer runs the [W3PN data refresh Action](https://github.com/web3privacy/data/actions/workflows/data-refresh.yml)
+- [ ] Request that the /data maintainer runs the [sync Action](https://github.com/web3privacy/data/actions/workflows/sync.yml)
+- [ ] Check the event listed in visible on data.web3privacy.info and that images and thumbs have been properly generated by scripts
+- [ ] Wait 6 hours for the automated scripts within the /web code base to activate and scrape the appropriate data from data.web3privacy.info
+- [ ] navigate to the events section of the website and verify all is correct: [https://web3privacy.info/events](https://web3privacy.info/events) 
+
+
+### Tips & Tooling
+- [ ] [https://web3privacy.info/gen/event](https://web3privacy.info/gen/event)
+- [ ] [https://github.com/web3privacy/web/tree/main/public/gen-img/events](https://github.com/web3privacy/web/tree/main/public/gen-img/events)
+- [ ] 
+- [ ] 
+
+### Troubleshooting
+- Ask in W3PN chats for support or help
+- 
+- 
+
+### External resources
+
+[Example PR of adding an image to the Data repository](https://github.com/web3privacy)