Dynamic custom images for social media sharing.
Loriqeet is a tool that enables you to create dynamic custom images - typically for the purpose of using on websites for social media previews on platforms such as Facebook, Twitter, LinkedIn, Instagram, etc.
Loriqeet is simple to configure and can be easily integrated into any project and workflow.
Install Loriqeet globally:
npm i -g loriqeetType loriqeet --help to see all available usage options:
Usage: loriqeet [options]
Dynamic custom images for social media sharing
Options:
-V, --version output the version number
-c, --config <path> path to the configuration file (default: "./loriqeet.config.yaml")
-t, --template <path> path to the template file (default: "./loriqeet.template.html")
-w, --width <number> image width (default: 1200)
-h, --height <number> image height (default: 630)
-q, --quality <number> image quality between 0-100 (not applicable to PNG images) (default: 100)
--no-background allow transparent background (not applicable to JPEG images)
-v, --verbose display verbose output (default: false)
-d, --debug run in debug mode (default: false)
-H, --help display help for command
mkdir loriqeet-quickstart
cd loriqeet-quickstart
mkdir images
touch loriqeet.config.yaml
touch loriqeet.template.htmlCopy the following code into loriqeet.config.yaml and save the file:
- path: "./images/everything-you-ever-wanted-to-know-about-loriqeet.png"
title: "Everything You Ever Wanted to Know About Loriqeet"
description: "Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas nec dolor id eros pulvinar euismod ac et mi curabitur efficitur imperdiet urna varius consequat."
- path: "./images/15-amazing-facts-about-loriqeet.jpeg"
title: "15 Amazing Facts About Loriqeet"
description: "Vestibulum facilisis tempor velit ut tincidunt arcu vehicula et in et vulputate dolor quisque elementum urna at viverra commodo ante tortor aliquam augue fermentum."
- path: "./images/what-research-says-about-loriqeet.jpg"
title: "What Research Says About Loriqeet"
description: "Maecenas id cursus nisl morbi libero felis finibus et odio et ultrices dapibus purus duis scelerisque orci ut lorem bibendum et accumsan magna sodales fusce."
- path: "./images/this-is-your-brain-on-loriqeet.webp"
title: "This Is Your Brain on Loriqeet 🧠"
description: "Nulla accumsan ut metus at rutrum etiam eu iaculis neque non finibus orci morbi sollicitudin accumsan ipsum nam pharetra tellus ac diam lobortis."
- path: "./images/everything-you-need-to-know-about-loriqeet.png"
title: "Everything You Need to Know About Loriqeet"
description: "Mauris semper at mauris egestas accumsan donec in sagittis odio vivamus quis fermentum neque praesent in ante pharetra congue nunc non egestas felis."Copy the following code into loriqeet.template.html and save the file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Roboto:wght@300&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
<title>Loriqeet</title>
<style>
body {
background: #141e30;
background-image: linear-gradient(to right, #141e30, #243b55);
font-family: "Roboto", sans-serif;
}
hr {
border: 4px solid lime;
}
h1 {
font-family: "Roboto Slab", "Roboto", sans-serif;
}
</style>
</head>
<body class="m-0 m-lg-5 p-5 text-white fw-light">
<svg class="w-25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 693.04 235" fill="white" fill-opacity="0.75"><path d="M416.69,92.6c-2.07-1.93-3.11-4.62-3.11-8.08s1.36-6.35,4.08-8.68c2.71-2.32,6.1-3.48,10.15-3.48,3.66,0,6.62,.89,8.9,2.67,2.27,1.78,3.41,4.3,3.41,7.56,0,3.96-1.29,7.09-3.86,9.42-2.57,2.32-5.98,3.48-10.23,3.48s-7.26-.96-9.34-2.89Z"/><path d="M676.29,119.36c11.16,0,16.75-3.41,16.75-10.23,0-1.88-.35-3.16-1.04-3.85-.69-.7-1.83-1.04-3.41-1.04h-16.6c12.85-11.37,19.27-24.71,19.27-40.03,0-5.54-1.18-10.13-3.56-13.79-2.37-3.66-5.63-5.49-9.78-5.49-5.64,0-10.9,2.67-15.79,8.01-4.89,5.34-9.07,12.5-12.53,21.5-3.46,8.99-6.03,18.93-7.71,29.8h-8.45c-4.45,0-6.67,2.77-6.67,8.3,0,2.37,.52,4.1,1.56,5.19,1.03,1.09,3.04,1.63,6,1.63h5.78c-.29,4.45-.44,8.85-.44,13.19,0,3.15,.13,6.15,.41,9.01-.89,.32-1.72,.92-2.49,1.82-4.15,5.04-9.06,9.11-14.75,12.23-5.68,3.11-10.75,4.67-15.19,4.67-6.92,0-11.62-2.27-14.09-6.82,11.66-2.87,19.94-6.75,24.83-11.64,4.9-4.89,7.34-10.75,7.34-17.57,0-5.83-1.73-10.45-5.19-13.86-3.46-3.41-8.05-5.11-13.78-5.11-6.43,0-12.19,1.73-17.28,5.18-5.09,3.46-9.07,8.14-11.93,14.01-2.87,5.89-4.3,12.24-4.3,19.06,0,2,.12,3.92,.37,5.75-2.76,2.43-5.77,4.54-9.04,6.33-5.69,3.11-10.75,4.67-15.2,4.67-6.92,0-11.61-2.27-14.08-6.82,11.66-2.87,19.94-6.75,24.83-11.64,4.89-4.89,7.34-10.75,7.34-17.57,0-5.83-1.73-10.45-5.19-13.86-3.46-3.41-8.06-5.11-13.79-5.11-6.42,0-12.18,1.73-17.27,5.18-5.09,3.46-9.07,8.14-11.93,14.01-2.87,5.89-4.3,12.24-4.3,19.06,0,1.01,.03,2,.1,2.96-4.79,.2-7.34,.3-7.67,.3-2.96,0-5.26,1.09-6.89,3.26-1.63,2.17-2.45,4.89-2.45,8.15,0,1.09,.05,1.88,.15,2.38,.69,5.83,1.04,12.5,1.04,20.01,0,6.32-.4,12.31-1.19,17.94-.79,5.63-1.75,10.13-2.89,13.49-1.13,3.36-2.2,5.04-3.18,5.04-1.19,0-2.15-1.61-2.9-4.82-.74-3.21-1.11-7.09-1.11-11.63,0-12.16,1.58-26.15,4.75-41.96,1.08-5.54,2.54-11.66,4.37-18.39,1.83-6.72,3.53-12.84,5.12-18.38,.39-1.38,1.21-4.23,2.44-8.53,1.24-4.29,1.86-7.04,1.86-8.22,.09-1.88-.43-3.31-1.56-4.3-1.14-.99-3.39-1.49-6.75-1.49-3.16,0-5.63,.55-7.41,1.63-1.78,1.09-3.11,3.22-4,6.38-1.29-1.58-3.12-2.37-5.49-2.37-7.02,0-13.61,2.15-19.79,6.45s-11.12,9.96-14.83,16.97c-3.61,6.85-5.47,14.07-5.55,21.66-1.88,2.07-3.51,3.74-4.9,5.03-2.67,2.47-4.89,3.71-6.67,3.71-1.88,0-3.21-.79-4-2.38-.8-1.58-1.19-3.85-1.19-6.82,0-3.85,1.19-11.21,3.56-22.09,1.88-8.99,2.82-14.72,2.82-17.19,0-3.36-2.52-5.04-7.56-5.04-3.27,0-5.64,.59-7.12,1.77-1.48,1.19-2.67,3.36-3.56,6.53-1.78,6.03-3.24,12.52-4.37,19.49-.05,.34-.11,.67-.16,1-2.49,1.86-4.63,2.78-6.44,2.78-2.47,0-3.7-1.72-3.7-5.19,0-.98,.39-3.45,1.18-7.41,.89-4.94,1.34-8.05,1.34-9.34,0-6.42-3.22-9.63-9.64-9.63-3.26,0-6.85,1.13-10.75,3.4-3.91,2.28-7.88,6.08-11.93,11.42-4.06,5.34-7.71,12.26-10.98,20.76,.4-4.35,.89-8.01,1.49-10.97,.59-2.97,1.38-6.43,2.37-10.38,1.48-5.54,2.22-9.1,2.22-10.68,0-1.38-.39-2.32-1.18-2.81-.8-.5-2.18-.74-4.15-.74-3.66,0-6.5,.66-8.53,2-2.03,1.33-3.48,3.43-4.37,6.3-1.72,5.43-3.03,11-3.94,16.73-4.42,.98-8.34,1.58-11.78,1.8-.79-7.61-3.48-14.01-8.08-19.2-4.59-5.19-10.65-7.78-18.16-7.78-6.13,0-11.71,1.65-16.75,4.96-5.04,3.32-9,7.91-11.86,13.79-2.87,5.88-4.3,12.58-4.3,20.09,0,1.97,.14,3.89,.42,5.76-2.29,2.4-4.31,4.26-6.05,5.58-3.07,2.33-6.63,3.49-10.68,3.49-2.57,0-4.64-.87-6.23-2.6-1.58-1.73-2.71-4.62-3.4-8.67,11.16-15.22,20.01-30.59,26.53-46.11,6.53-15.52,9.79-29.16,9.79-40.92,0-8.2-1.36-14.5-4.08-18.9-2.72-4.4-6.45-6.6-11.19-6.6-8.4,0-15.64,5.54-21.72,16.6-6.08,11.08-10.68,24.32-13.79,39.74-3.11,15.42-4.67,29.16-4.67,41.21s2.1,22.79,6.3,30.69c4.2,7.91,10.65,11.86,19.35,11.86,6.32,0,11.98-1.68,16.97-5.04,2.79-1.88,5.47-4.05,8.03-6.53,1.93,2.87,4.34,5.3,7.24,7.27,4.2,2.87,9.27,4.3,15.2,4.3,7.02,0,13.29-2.49,18.83-7.48,5.53-4.99,9.24-11.64,11.12-19.94,4.01-.17,7.83-.62,11.47-1.35-.04,1.28-.06,2.57-.06,3.87,0,8.7,.77,15.02,2.3,18.97,1.53,3.96,4.17,5.93,7.93,5.93,3.06,0,5.31-.81,6.75-2.44,1.43-1.63,2.69-4.77,3.78-9.42,1.48-6.02,3.41-11.76,5.78-17.19,2.37-5.44,4.77-9.81,7.19-13.13,2.42-3.31,4.37-4.96,5.86-4.96,1.08,0,1.63,.79,1.63,2.37,0,.69-.1,2.03-.3,4-.3,1.49-.44,2.97-.44,4.45,0,4.55,1.35,8.16,4.07,10.82,2.72,2.67,6.7,4.01,11.94,4.01,3.69,0,7.2-.81,10.53-2.41,.12,7.05,1.58,12.74,4.37,17.08,2.91,4.55,7.58,6.82,14.01,6.82s12.84-3.22,19.78-9.69c.57,1.01,1.21,1.97,1.93,2.87,3.61,4.55,8.13,6.82,13.57,6.82s9.83-2.57,13.2-7.71c-2.58,11.27-3.86,22.69-3.86,34.25,0,9.29,1.46,17.17,4.37,23.65,2.92,6.47,7.2,9.71,12.83,9.71,8.3,0,14.4-5.54,18.31-16.61,3.9-11.06,5.85-24.06,5.85-38.99,0-5.63-.19-11.26-.59-16.9,1.88,0,3.31,.05,4.3,.15l5.49,.15c.1,0,.2,0,.3-.01h.01c.94,1.38,2.03,2.67,3.24,3.86,5.74,5.64,13.79,8.45,24.17,8.45,7.61,0,14.75-1.87,21.42-5.63,3.65-2.05,6.84-4.2,9.58-6.46,.91,1.3,1.95,2.51,3.1,3.64,5.73,5.64,13.79,8.45,24.17,8.45,7.6,0,14.75-1.87,21.42-5.63,6.67-3.75,11.83-7.86,15.49-12.31,.11-.13,.23-.27,.33-.41,.83,2.35,1.81,4.54,2.93,6.57,4.35,7.85,11.22,11.78,20.61,11.78,6.52,0,12.35-2.12,17.49-6.37,1.49-1.19,2.6-2.67,3.34-4.45,.74-1.78,1.11-3.61,1.11-5.48s-.37-3.49-1.11-4.82c-.74-1.34-1.71-2.01-2.89-2.01-1.09,0-2.18,.5-3.26,1.49-1.78,1.58-3.76,2.87-5.93,3.85-2.18,.99-4.06,1.49-5.64,1.49-3.06,0-5.46-.87-7.19-2.6-1.73-1.73-2.96-4.6-3.7-8.6-.75-4-1.12-9.56-1.12-16.68,0-2.76,.1-6.62,.3-11.56h18.09Zm-12.53-39.21c1.63-6.58,3.36-11.72,5.19-15.42,1.83-3.71,3.48-5.56,4.96-5.56,2.18,0,3.27,2.91,3.27,8.74,0,5.14-1.46,10.85-4.38,17.13-2.91,6.28-7.29,11.93-13.12,16.97,1.09-8,2.45-15.29,4.08-21.86Zm-417.11,12.37c2.17-12.15,4.69-22.33,7.56-30.54,2.86-8.2,5.43-12.3,7.71-12.3,2.76,0,4.15,3.76,4.15,11.27,0,9.58-2.08,20.18-6.23,31.8-4.15,11.61-9.74,23.2-16.75,34.76,.19-11.16,1.38-22.83,3.56-34.99Zm60.85,63.01c-2.32,2.58-5.06,3.86-8.22,3.86-2.87,0-5.37-1.43-7.49-4.3-2.13-2.87-3.19-7.02-3.19-12.45,0-6.92,1.31-12.28,3.93-16.09,2.62-3.8,5.91-5.71,9.86-5.71h.74c-.3,1.58-.44,3.17-.44,4.75,0,3.75,.81,7.31,2.44,10.67,1.63,3.36,3.98,6.08,7.04,8.15-.79,4.85-2.35,8.55-4.67,11.12Zm169.53-9.78c-.89,3.95-2.37,7.34-4.45,10.15-2.07,2.82-4.25,4.23-6.52,4.23-1.98,0-3.53-.82-4.67-2.45s-1.7-3.97-1.7-7.04c0-5.43,1.06-10.6,3.18-15.49,2.13-4.89,4.99-8.82,8.6-11.79,3.61-2.96,7.59-4.49,11.94-4.59l-6.38,26.98Zm55.89-4.15c0-6.03,1.27-11.17,3.79-15.42,2.52-4.25,5.6-6.38,9.26-6.38,1.78,0,3.19,.57,4.23,1.71,1.03,1.14,1.55,2.64,1.55,4.52,0,3.66-1.68,6.87-5.04,9.64-3.36,2.77-7.95,4.84-13.79,6.22v-.29Zm58.27,0c0-6.03,1.26-11.17,3.78-15.42,2.52-4.25,5.61-6.38,9.27-6.38,1.78,0,3.18,.57,4.22,1.71,1.04,1.14,1.56,2.64,1.56,4.52,0,3.66-1.68,6.87-5.04,9.64-3.36,2.77-7.96,4.84-13.79,6.22v-.29Z"/><path d="M57.45,92.82c.23,2.07,1.39,6.16,6.68,9.46,.66-3.04,1.11-6.12,1.34-9.22-2.61-.75-5.36-.83-8.01-.24Z"/><path d="M61.6,111.71c.48-1.47,.89-2.92,1.28-4.35-6.74-3.6-9.18-8.44-10.04-11.94-1.89,1.98-3.23,4.42-3.88,7.07-.26,.92-1.03,1.61-1.98,1.77-.14,.02-.29,.04-.44,.04-.8,0-1.56-.38-2.03-1.04-.14-.19-13.14-18.81,5.58-41.27,1.74-6.92,6.78-12.62,14.63-16.49,15.05-7.41,37.43-6.77,48.88-1.52,14.03,6.42,25.41,20.92,33.88,43.09,.48,1.06,6.63,14.62,12.83,26.25,1.25,2.35,3.35,5.95,5.56,9.76,3.11,5.34,6.33,10.87,8.15,14.52,1.63,3.22,3.44,6.39,5.35,9.74,1.48,2.47,2.9,4.97,4.26,7.5,10.35-15.75,16.38-34.6,16.38-54.85C200,44.77,155.23,0,100,0S0,44.77,0,100c0,40.83,24.47,75.94,59.55,91.47-11.9-36.31,1.44-77.9,2.05-79.76Z"/><path d="M86.21,63.73c-4.14,0-7.5,3.35-7.5,7.49s3.35,7.5,7.49,7.5c4.14,0,7.49-3.36,7.5-7.5,0-4.13-3.35-7.48-7.49-7.49Zm-.01,9.99c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h0c1.38,0,2.5,1.12,2.5,2.5,0,1.38-1.12,2.5-2.5,2.5Z"/><path d="M157.89,157.44c-12.01-14.54-33.2-27.62-56.68-20.75-34.52,10.1-34.36,47.65-33.65,57.93,10.17,3.49,21.08,5.38,32.44,5.38,26.34,0,50.3-10.19,68.16-26.83-3.01-5.84-6.44-11.09-10.27-15.73Z"/><path d="M53.31,65.97c-10.4,12.94-9.04,23.9-6.98,29.79,1.56-2.88,3.96-5.22,6.89-6.69,3.88-1.74,8.22-2.14,12.35-1.12-.03-4.7-1.16-9.33-3.31-13.51-1.98-3.73-5.12-6.7-8.95-8.46Z"/></svg>
<hr class="my-5 w-25 opacity-50">
<h1 class="mb-4 display-3 fw-bold">{{ title }}</h1>
<p class="m-0 fs-3 opacity-75">{{ description }}</p>
</body>
</html>loriqeetTake a look in the images folder. You'll see the images that Loriqeet has created using your template and the options defined in your config file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent