Socials Carousel Post Builder

By Matthijs van Loon

---

This is a plugin (and separate HTML/JS) for WordPress that helps users easily create a bunch of images for use in social media, based on an existing post or other HTML content. It uses FabricJS for Canvas object management, allowing for easy edits like one would do in an image-editor; dragging, text-editting, stuff like that. You can even drag in images and it'll save them to the page. Oh right, most settings and layouts are stored locally. No accounts.

Usage

You drag the plugin folder into WordPress or open up the index.html. Or add the script to your own stuff:

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<script>
  window.socialsCarouselBuilderOptions = {
    editJSON: true, // allow editting JSON of objects
    dimensions: {
      width: 1080,
      height: 1350
    },
    getData: () => {
      return {
        title: "The commons belongs to us all",
        author: "Creative Commons",
        bodyText: [
          {"text": "body text.", "tagName": "p"},
          {"text": "heading", "tagName": "h2"},
        ]
      }
    }
  }
</script>
<script src="index.js"></script>

Note the return value format of getData. We don't validate the JSON schema there, but it's important that it's the same format. bodyText is an array of bodyText as illustrated, but you can also pass bodyHTML and we'll use Readability to try and parse it for you. Also it's async, so use await appropriately.

Options in the WordPress plugin are set through a filter, socials_carousel_builder_options. By default the system gets the most recent 10 posts as options and puts them above the editor for the user to select. Note that this is JSON, not a PHP array. You have to decode/encode yourself.

Also note that editJSON doesn't do anything right now, and you can't automatically override an image either. Just drag one in and you'll be fine.

Saving and loading templates

Layout data is stored in a JSON format that has elements of FabricJS and our own. Layout data and images are stored locally, but you can export and import to share.

Developing

ParcelJS is used with ReactJS and FabricJS, scripts are in packge. npm run watch will also use ParcelJS' Hot Module Reloading. This may be a bit buggy, so just reload if it doesn't update correctly.

NO AI

No AI code was used in the creation of this piece of software. That's why it's so lean.