Change image to video

[molten drift]

No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[cinder wraith]

This markdown file is acting like a data source. Some other component (or content collection) will be getting this data and putting it into a page.

To have a video rather than an image, you will need to know how the page that uses this data is working.

If you can point to the specific template you are using, someone here may be able to help - I would suggest following some tutorials to get an idea of how markdown files get brought into layouts. Astro's own tutorial https://docs.astro.build/en/tutorial/0-introduction/ including "Extend with Content Collections" will be very helpful for your understanding

[unique dirge]

its this templatehttps://astro.build/themes/details/portfolio/

[cinder wraith]

Okay, so there's a few things to get a video working - I assume you want a video instead of the image?

You will need to edit the collection schema to allow for a new "video" type. This should be a string, and also optional.

You will need to edit the [...slug].astro page so that it checks if a video has been specified. If it has it will display the video, if not, it will fallback to the default behaviour of showing an image.

[unique dirge]

okk, thank you but where is the collection schema, i don't find it (im new in code verry sorry for my level)

[cinder wraith]

No need to apologise, everyone is a beginner at some stage!

Is you plan to learn front end development/Astro? If so I strongly recommend the blog tutorial including the part on content collections. It will give you a much better understanding of what to do rather than someone just give you code to copy/paste

[unique dirge]

not my plan im a video editor and i just want to create a portfolio but i need to post video and not image on my portfolio its why i want to change it

[unique dirge]

so where is the collection schema please ?

[cinder wraith]

okay, so in src/content/config.ts add: video: z.string().optional(), under "image_alt"

In src/pages/work/[...slug].astro replace the code in the "main" tags with:

<main class="wrapper">
  <div class="stack gap-10 content">
    {
      entry.data.video !== undefined ? (
        <video src={entry.data.video} poster={entry.data.img} controls autoplay muted>
          Sorry, your browser doesn't support embedded videos, you can 
          <a href={entry.data.video}>download it</a> instead!
        </video>
      ) : (
        <img src={entry.data.img} alt={entry.data.img_alt || ''} />
      )
    }
  <div class="content">
    <Content />
  </div>
  </div>
</main>

In your .md project files, you can now include a new line under the image alt: video: https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4

[unique dirge]

So the main code need to be like that ?

[unique dirge]

and i don't really understand where should i put it

[cinder wraith]

Looks like the right place!

[unique dirge]

Nice !

[unique dirge]

And where did i need to put it i don't find the place

[cinder wraith]

There are 3 things you need to change:

/src
  /content
    config.ts <-- 1. **CHANGE** this is where the collection schema is kept
    /work
      ... // these are your portfolio .md data files
      markdown-mystery.md <-- 2. **CHANGE** to add the reference to the video file
  /pages
    /work
      [...slug].astro <-- 3. **CHANGE** to add check/display the video file 

[unique dirge]

i don't really understand i already do the 1 and 3 change i think but not the 2 idk where do i need to put this : In your .md project files, you can now include a new line under the image alt: video: https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4

[cinder wraith]

markdown-mystery-tour.md:

---
title: Markdown Mystery Tour
publishDate: 2020-03-02 00:00:00
img: /assets/stock-1.jpg
img_alt: Iridescent ripples of a bright blue and pink liquid
video: https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4
description: |
  We designed a whodunnit-style game to introduce Markdown formatting. Suspense — suspicion — syntax!
tags:
  - Design
  - Dev
  - User Testing
---