{"id":13727188,"url":"https://github.com/jlengstorf/get-share-image","last_synced_at":"2025-04-05T04:09:08.134Z","repository":{"id":36939913,"uuid":"231979718","full_name":"jlengstorf/get-share-image","owner":"jlengstorf","description":"Dynamically generate social media sharing images using Cloudinary! Details:","archived":false,"fork":false,"pushed_at":"2024-01-15T23:18:45.000Z","size":203,"stargazers_count":187,"open_issues_count":8,"forks_count":29,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-04T21:15:46.729Z","etag":null,"topics":["cloudinary","javascript","open-graph","social-image"],"latest_commit_sha":null,"homepage":"https://www.learnwithjason.dev/blog/auto-generate-social-image/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jlengstorf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-01-05T21:41:37.000Z","updated_at":"2025-02-28T00:37:55.000Z","dependencies_parsed_at":"2024-02-04T19:45:43.440Z","dependency_job_id":null,"html_url":"https://github.com/jlengstorf/get-share-image","commit_stats":{"total_commits":37,"total_committers":12,"mean_commits":"3.0833333333333335","dds":0.3783783783783784,"last_synced_commit":"2e5d59109e566a3fff3c57fcd179f947c2022f42"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlengstorf%2Fget-share-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlengstorf%2Fget-share-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlengstorf%2Fget-share-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlengstorf%2Fget-share-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jlengstorf","download_url":"https://codeload.github.com/jlengstorf/get-share-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284948,"owners_count":20913704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudinary","javascript","open-graph","social-image"],"created_at":"2024-08-03T01:03:43.440Z","updated_at":"2025-04-05T04:09:08.087Z","avatar_url":"https://github.com/jlengstorf.png","language":"TypeScript","funding_links":[],"categories":["Tools","TypeScript"],"sub_categories":[],"readme":"# Generate Social Media Images Using Cloudinary\n\nThis is a utility function that builds social media images by overlaying a title and tagline over an image using [Cloudinary’s APIs](https://cloudinary.com/documentation/image_transformations?ap=lwj#adding_text_captions).\n\n\u003e **NOTE:** a Cloudinary account is required to use this package. The free tier should be more than enough for most small to medium websites using this package. [Sign up for an account here!](https://jason.energy/cloudinary)\n\n**This was created as part of an article series:**\n\n- [How to design a social sharing card template](https://www.learnwithjason.dev/blog/design-social-sharing-card)\n- [How the code in this package works](https://www.learnwithjason.dev/blog/auto-generate-social-image)\n\n## Installation\n\n```bash\n# install using npm\nnpm install --save @jlengstorf/get-share-image\n\n# install using yarn\nyarn add @jlengstorf/get-share-image\n```\n\nSee how this is used in a production site in the [learnwithjason.dev source code](https://github.com/jlengstorf/learnwithjason.dev/blob/070468828e8c758d150a8d573fd471d786278243/packages/%40jlengstorf/gatsby-theme-code-blog/src/gatsby-theme-blog-core/components/post.js#L55-L64).\n\n## Example Usage\n\n```js\nimport getShareImage from '@jlengstorf/get-share-image';\n\nconst socialImage = getShareImage({\n  title: 'Deploy a Node.js App to DigitalOcean with SSL',\n  tagline: '#devops #nodejs #ssl',\n  cloudName: 'jlengstorf',\n  imagePublicID: 'lwj/blog-post-card',\n  titleFont: 'futura',\n  taglineFont: 'futura',\n  textColor: '232129',\n});\n```\n\nThis generates an image URL:\n\n```text\nhttps://res.cloudinary.com/jlengstorf/image/upload/w_1280,h_669,c_fill,q_auto,f_auto/w_760,c_fit,co_rgb:232129,g_south_west,x_480,y_254,l_text:futura_64:Deploy%20a%20Node.js%20App%20to%20DigitalOcean%20with%20SSL/w_760,c_fit,co_rgb:232129,g_north_west,x_480,y_445,l_text:futura_48:%23devops%20%23nodejs%20%23ssl/lwj/blog-post-card\n```\n\nWhich looks like this:\n\n![Deploy a Node.js App to DigitalOcean with SSL, from learnwithjason.dev](https://res.cloudinary.com/jlengstorf/image/upload/w_1280,h_669,c_fill,q_auto,f_auto/w_760,c_fit,co_rgb:232129,g_south_west,x_480,y_254,l_text:futura_64:Deploy%20a%20Node.js%20App%20to%20DigitalOcean%20with%20SSL/w_760,c_fit,co_rgb:232129,g_north_west,x_480,y_445,l_text:futura_48:%23devops%20%23nodejs%20%23ssl/lwj/blog-post-card)\n\n## Options\n\nThis utility function accepts a config object. Available options are as follows:\n\n| name               | required | description                                                          |\n| ------------------ | -------- | -------------------------------------------------------------------- |\n| title              | true     | (string) title text to be placed on the card                         |\n| tagline            |          | (string) tagline text to be placed on the card                       |\n| cloudName          | true     | (string) your Cloudinary cloud name (i.e. your username)             |\n| imagePublicID      | true     | (string) the public ID of your social image template                 |\n| cloudinaryUrlBase  |          | (string, default `https://res.cloudinary.com`) Cloudinary asset URL  |\n| titleFont          |          | (string, default `arial`) font to use for rendering title            |\n| titleExtraConfig   |          | (string) optional additional text overlay config                     |\n| taglineExtraConfig |          | (string) optional additional text overlay config                     |\n| taglineFont        |          | (string, default `arial`) font to use for rendering tagline          |\n| imageWidth         |          | (number, default `1280`) SEO image width (defaults to Twitter ratio) |\n| imageHeight        |          | (number, default `669`) SEO image height (defaults to Twitter ratio) |\n| textAreaWidth      |          | (number, default `760`) width of title and tagline text areas        |\n| textLeftOffset     |          | (number, default `480`) distance from left edge to start text boxes  |\n| titleGravity       |          | (string, default `south_west`) location the title is anchored from   |\n| taglineGravity     |          | (string, default `north_west`) location the tagline is anchored from |\n| titleLeftOffset    |          | (number, `null`) distance from left edge to start text boxes  |\n| taglineLeftOffset  |          | (number, default `null`) distance from left edge to start text boxes |\n| titleBottomOffset  |          | (number, default `254`) distance from bottom to start title text     |\n| taglineTopOffset   |          | (number, default `445`) distance from top to start tagline text      |\n| textColor          |          | (string, default `000000`) hex value for text color                  |\n| titleColor         |          | (string) hex value specific for title color. If this is not set, the color will be the one set to `textColor`   |\n| taglineColor       |          | (string) hex value specific for tagline color. If this is not set, the color will be the one set to `textColor` |\n| titleFontSize      |          | (number, default `64`) font size to use for the title                |\n| taglineFontSize    |          | (number, default `48`) font size to use for the tagline              |\n| version            |          | (string) optional version string for caching                         |\n\n### Setting config options\n\n```js\nconst socialImage = getShareImage({\n  title: 'My Post Title',\n  tagline: 'A tagline for the post',\n  cloudName: 'myusername',\n  imagePublicID: 'my-template-image.jpg',\n  titleExtraConfig: '_bold', // optional - set title font weight to bold\n  textColor: '663399', // optional — set the color to purple\n});\n```\n\n## Who is using this?\n\n- [Echobind](https://echobind.com/) with their [blog image generator](https://github.com/echobind/blog-image-generator)\n- [@jsjoeio](https://github.com/jsjoeio) on his [personal website](https://github.com/jsjoeio/joeprevite.com)\n- [Horacio Herrera](https://horacioh.com)\n- [@chris_berry](https://twitter.com/chris_berry) on his [blog](https://chrisberry.io)\n- [@codebender828](https://twitter.com/codebender828) on his [blog](https://jbakebwa.dev)\n- [@ryan_c_harris](https://twitter.com/ryan_c_harris) on his [blog](https://ryanharris.dev)\n- [Idiomatic Programmers](https://idiomaticprogrammers.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlengstorf%2Fget-share-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjlengstorf%2Fget-share-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlengstorf%2Fget-share-image/lists"}