Ben Gorman

Ben Gorman

Life's a garden. Dig it.

You can embed images such as PNGs, JPGs, GIFs, and MP4s in your posts. Furthermore, you may upload and host image and video files directly on Scipress 🤯

External images

External images are images hosted on other websites (e.g. Reddit, Wikipedia, Pinterest, etc.). You can embed these images following the pattern ![Alt text](imageURL). For example,

![chipmunk eating](

chipmunk eating

Alt text

Alt text should be a short description of the image. It serves a few purposes:

  • It's read aloud to users with screen readers
  • It's indexed by search engines
  • It displays on the page if the image fails to load

User uploaded images

There are a few ways to upload images to Scipress.

  1. Use the Image button on the post editor navbar.
  2. Drag and drop an image directly onto the post editor.
  3. Use the upload panel in the author > images page in your dashboard.
Every image you upload should have a unique filename.

After you upload an image, you can reference it from a post using the pattern ![Alt text](my-image.png). Notice how you only need to reference the image filename - not the fully qualified URL.

If your image filename includes a space, you can wrap the filename in <angle brackets> when referencing it. For example, ![](<my image.png>)


You can style an image by applying Tailwind CSS classnames in braces {} immediately after the image definition.

Adjust image width

![Alt text](imageUrl){.w-96}

This image is 384px wide.

chipmunk eating

![Alt text](imageUrl){.w-40}

This image is 160px wide.

chipmunk eating

![Alt text](imageUrl){.w-1/2}

This image takes up half the width of the post viewer, no matter the size of the user's screen. chipmunk eating

Adjust image position

![Alt text](imageUrl){.w-40 .mx-auto}

This image is horizontally centered.

chipmunk eating

![Alt text](imageUrl){.w-40 .float-right .mt-2 .ml-2}

chipmunk eating

This image floats to the right of this text with some margin on the top and left. Now here's some lorem ipsum to fill the remaining space. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sodales ut eu sem integer vitae justo eget magna fermentum.

Add image border

This image has a green border.

![Alt text](imageUrl){.w-40 .border .border-4 .border-emerald-500}

chipmunk eating

Make image round

This image has a fully rounded border.

![Alt text](imageUrl){.size-40 .rounded-full}

chipmunk eating

.size-40 sets the image's width and height to 160px. Since the original image is wider than it is tall, the resulting image is visibly "squished", giving the chipmunk a cute chubby face.


Scipress supports video files in MP4 format. Uploading, styling, and managing videos works just like images. Although, videos have a few additional properties..

Use autoplay to make a video play automatically

![My Video](my-video-file.mp4){autoplay}

Use muted to mute a video by default

![My Video](my-video-file.mp4){muted}

Use loop to make a video repeat indefinitely

![My Video](my-video-file.mp4){loop}

Use controls=true/false to turn on/off video controls. Controls are turned on by default.

![My Video](my-video-file.mp4){controls=false}

YouTube Videos

Scipress lets you embed youtube videos in your posts using the ::youtube tag with the src parameter. For example,


You can obtain the src parameter from any YouTube video by

  1. Click the Share button under the video player on
  2. Click Embed
  3. Copy the src portion of the embed code

You may also specify the video's width and height properties like this

::youtube{ width="650" height="566" src="..." }

Tips & Best Practices

  • Always include Alt text in your image definitions
  • Strive to reduce your image file size. Generally, image files should be less than 500 kB
    • Convert PNGs to JPGs
    • Resize images to have width ≤ 700 px
    • Use an image compression tool to compress image files before uploading them. (Mac users, check out ImageOptim )