adding_images_to_gb_studio_site.txt

You can include images by adding them to the folder static/img/ and then you can include them by adding a HTML tag to your content.
https://github.com/chrismaltby/gb-studio-site/tree/develop/static/img/screenshots
https://github.com/chrismaltby/gb-studio-site/tree/develop/static/img/events

e.g.
If you added an image as static/img/screenshots/actor-limits.png you would be able to include it in a page like this

<img title="New Project" src="/img/screenshots/actor-limits.png" width="812">

The width is optional as the image will scale to full width if you don't provide it, I just set it manually on a few images when I know the exact size I want to images to appear.

On the scripting page you'll also notice I had a html class to the images

<img src="/img/events/text-animation-speed.png" class="event-preview" />

This just adds the following styles

.event-preview {

  width: 100%;

  max-width: 301px;

  margin-top: 20px;

  margin-right: 20px;

}

to just make sure the event images always appear consistently.

Those images are pretty awkward to make though, I took screenshots at double size at 608px wide and had a big photoshop action to add the 2px border (why didn't I use CSS for that? I actually can't remember...) making them 612px wide. I really want to write something that just automates taking those screenshots so we don't have to do it by hand.

If you want me to take any screenshots for you just to make sure they're all consistent let me know and I could do that too.

    Pin to screen makes it so the actor will stay at the same position on the screen no matter where you scroll to, so for example if you pin an actor at 0,0 it will always appear on the top left of the screen allowing you to do simple HUD elements like Life/Score etc.