Val Town Code SearchReturn to Val Town

1Usage example of https://www.val.town/v/tylergaw.socialImage

1# Simple image generator
2
3A bit of a toy image creator that can be used anywhere images can be, but is intended for social share images in `og:image` or `twitter:image` meta tags.
4
5## Usage examples
7**In a live web page**
8
9- Live example https://tylergaw-socialimageusage.web.val.run/
10- Live example Val https://www.val.town/v/tylergaw.socialImageUsage
11
12## Code examples
14**Default**
15
16This will set the `og:image` of a web page to a png image of an orange 1200x600 pixel rectangle
17
18```html
19<meta property="og:image" content="https://tylergaw-socialimage.web.val.run/">
20```
21
22Works the same way as an embedded image
23
24```html
25<img src="https://tylergaw-socialimage.web.val.run/">
26```
27
33- `bg`: Sets the background color. Default `orange`. See Color format examples below for details
34- `color`: Sets the background color. Default `black`. See Color format examples below for details
35- `w`: Sets the width of the image. Default `1200`
36- `h`: Sets the height of the image. Default `600`
37- `text`: Sets the text displayed. Default `Wellow horld`
38
39```html
40<meta property="og:image" content="https://tylergaw-socialimage.web.val.run/?bg=pink&w=1000&h=400">
41```
42

1# Email DALL·E 2 image requests
2
3Send an email to andreterron.dallemail@valtown.email, it will forward it to DALL·E 2, and email you back the resulting image.
4
5![](https://i.imgur.com/sfbjyZ3.png)

4
5
6![import-gists.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/95b91359-aadc-4a52-38e5-9d1f5bdef100/public)
7
8

1# Generate an image
2
3![](https://tmcw-canvastext.web.val.run/)
4
5This image is generated by the Val below and exposed to the internet with the [Web API](https://docs.val.town/api/web).

5[**View Live Form**](https://stevekrouse-form.web.val.run) | [**View Data**](https://www.val.town/v/stevekrouse.formDataEx)
6
7![Screenshot 2023-08-28 at 15.37.04@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/1ad7af89-7791-44e6-8bb4-873e2fa89e00/public)
8
9

2
3- `node-emoji` [github here](https://github.com/omnidan/node-emoji) - replaces all emojis with spans
4- emoji images for replacement are hosted at netlify (sourced from private repo) 
5
6Migrated from folder: Twig/replaceEmojisWithImages

1Migrated from folder: OpenAI/images

35```
36
37### Getting an image
38
39```console

2
3TL;DR: you can see a Figma board in a website
4![An image of a screenshot of Figma the visual design software and a browser, showing how something drawn in Figma can be rendered individually in the browser](https://air-prod.imgix.net/fb0a5caa-72b5-4002-ad23-1e2628f48362.jpg?w=2000&h=4664&auto=compress&ixlib=react-9.5.4 "Figma frame to HTML")
5
6Migrated from folder: Figma/FigmaFrameToHTML