Images & Videos

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](https://images.unsplash.com/photo-1526800544336-d04f0cbfd700?q=80&w=3174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

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.

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.

Styling¶

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.

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

This image is 160px wide.

![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.

Adjust image position¶

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

This image is horizontally centered.

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

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}

Make image round¶

This image has a fully rounded border.

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

Videos¶

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,

::youtube{src="https://www.youtube.com/embed/0e3GPea1Tyg?si=GmB-zffAFo0egBT0"}

You can obtain the src parameter from any YouTube video by

1. Click the Share button under the video player on YouTube.com
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 )