Creating a Custom Dynacover Template - erikaheidi/dynacover GitHub Wiki

This page shows how you can customize your cover.

Step 1: Creating a custom header image

You'll need to create a design for your header as a PNG image in the format 1500x500px. The position of each element (latest follower 1, latest follower 2, etc) is set as a JSON coordinate that you can adjust to have them anywhere you like in the canvas. Then you'll have to cut out the areas where the follower image should appear (the colored placeholder circles in this image), saving the PNG with transparency so that this image comes as the top layer.

After creating this on Canva, I opened the image on Gimp and used the circle selection tool to select where I want the profile images to go, then hit "delete" to delete that portion of the image and make it transparent. Then I used the square selection tool to obtain the x,y coordinates of each element.

Step 2: Creating a Dynacover template

The simplest way to create a new custom Dynacover template is by copying one of the base templates, such as cover_basic.json. This is how this template is defined:

{
  "width": 1500,
  "height": 500,
  "sources": {
    "twitter": {
      "count": 5,
      "class": "App\\ImageSource\\TwitterFollowerImageSource"
    }
  },
  "elements": {
    "tw1": {
      "type": "image",
      "properties": {
        "pos_x": 486,
        "pos_y": 272,
        "width": 130,
        "height": 130
      }
    },
    "tw2": {
      "type": "image",
      "properties": {
        "pos_x": 670,
        "pos_y": 270,
        "width": 132,
        "height": 132
      }
    },
    "tw3": {
      "type": "image",
      "properties": {
        "pos_x": 859,
        "pos_y": 270,
        "width": 132,
        "height": 132
      }
    },
    "tw4": {
      "type": "image",
      "properties": {
        "pos_x": 1049,
        "pos_y": 270,
        "width": 132,
        "height": 132
      }
    },
    "tw5": {
      "type": "image",
      "properties": {
        "pos_x": 1236,
        "pos_y": 270,
        "width": 130,
        "height": 130
      }
    },
    "cover":  {
      "type": "image",
      "properties": {
        "width": 1500,
        "height": 500,
        "pos_x": 0,
        "pos_y": 0,
        "image": "cover_basic.png"
      }
    }
  }
}

This template has 6 elements:

• tw1: Twitter follower n. 1
• tw2: Twitter follower n. 2
• tw3: Twitter follower n. 3
• tw4: Twitter follower n. 4
• tw5: Twitter follower n. 5
• cover: a static PNG file with transparency that will be pasted as top layer

Each element requires a pos_x and pos_y to define the coordinates where the layer will be pasted on the canvas.

Change the template accordingly, to reflect your own custom arrangement of elements. Make sure the cover points to the correct image, relative to the default images path.

If you are using Dynacover with GitHub Actions

If you have successfully set up Dynacover using GitHub actions, now you might be wondering how you can customize your cover, using your own header and other elements.

Since version 0.4, you can set up a custom location for templates and images, which enables you to use the same repository where the workflow is set to store your custom Dynacover template and images, which are pulled to the build with the actions/checkout action.

Make sure you save both the template and any custom image resources to the same repository where you have your workflow set. Then, make sure you have the DYNA_DEFAULT_TEMPLATE, DYNA_TEMPLATES_DIR, and DYNA_IMAGES_DIR set within your workflow:

name: Update Twitter Header Image with Dynacover
on:
  schedule:
    - cron: "0 * * * *"
  workflow_dispatch:
jobs:
  main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          path: 'dynacover_custom'
      - name: 'Update Dynacover image and upload to Twitter'
        uses: erikaheidi/dynacover-actions@v4
        env:
          DYNA_DEFAULT_TEMPLATE: dynacover.json
          DYNA_TEMPLATES_DIR: ${{ github.workspace }}/dynacover_custom
          DYNA_IMAGES_DIR: ${{ github.workspace }}/dynacover_custom
          DYNA_TWITTER_KEY: ${{ secrets.DYNA_TWITTER_KEY }}
          DYNA_TWITTER_SECRET: ${{ secrets.DYNA_TWITTER_SECRET }}
          DYNA_TWITTER_TOKEN: ${{ secrets.DYNA_TWITTER_TOKEN }}
          DYNA_TWITTER_TOKEN_SECRET: ${{ secrets.DYNA_TWITTER_TOKEN_SECRET }}
          DYNA_GITHUB_TOKEN: ${{ secrets.DYNA_GITHUB_TOKEN }}

If you are running Dynacover with Docker

To customize your header with your own JSON template file and PNG images, you'll need to build a local Docker image with your changes. You don't need to have PHP installed locally. You need only Docker for that.

Start by cloning this repository to your local development machine:

git clone https://github.com/erikaheidi/dynacover.git

The Dockerfile included within the application will copy the files in the current directory into the image. When you are finished with any changes you made to customize your banner, you can run:

docker build . -t myuser/dynacover

Then, you can run dynacover using your custom image with:

docker container run --env-file .dynacover --rm -v $(pwd) myuser/dynacover php dynacover cover update

If you are using a self-hosted Dynacover setup with Linux and Cron

You can save your custom template and images to the default application resources folders: app/Resources/templates and app/Resources/images.