Image/Video Embedding (Centering, Link Through and Sizing)

teagan commented

2021-08-31 22:17:57 +02:00

Owner

I've been experimenting with embedding images and videos on the site, as it's a commonly requested function in the preliminary discussions around the site. I've come up with the following for basic image linking, but I have two issues I can't figure out.

(Forgive me as I have a self-taught basic understanding of some HMTL and markdown.)

Image embed HMTL

<img src=”https://miro.medium.com/max/700/1*uAp4K4IuVOaJp6v4B99KSQ.jpeg”>

Image embed HTML (with size constraint, for images smaller than 800px wide)

<div style=”maxwidth: 100px”><img src=”https://miro.medium.com/max/700/1*uAp4K4IuVOaJp6v4B99KSQ.jpeg”></div>

Image embed HTML (with size constraint and link on click.)

<a href="https://meta.stackoverflow.com/users/44330/jason-s">
   <div style="max-width:100px"><img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07"></div>
   </a>

The two things I can't figure out/am curious about are

How to align an image to the center of the column when the size of the image is constrained. As having them aligned left by default when they less than 800px is not ideal visually.
When adding links to the images, I've found that <a href= bypasses the standard /www stylisation that pops up for links by default on the site. I was wondering if there was a way to selectively bypass the /www stylization when using identifier based links, like the following example.
[<div style="max-width:100px"><img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07"></div>][identifier]
then at the end of the markdown
[identifier]: https>//https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07
It's not absolutely neccessary, if using the HTML <a href= is the effective workaround for avoiding the /www stylization that is totally fine, but I'm going to encourage people to use the identifier method for normal links to keep things organized, so I was just wondering if you had a workaround.

Lastly the video embedding related question
So the last question was centering around video being embedded on the site. Using simple embed codes from vimeo or youtube I've gotten videos working on the site in a functional basic way.

<figure class="video_container">
  <iframe src="https://player.vimeo.com/video/535294266" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</figure>

The one unideal thing formatting wise is that the size in pixels of the embeds is manual, rather than adaptive to the width of the content column.

As such the videos do not fill the whole column and do not scale if the column is scaling. Which means that they do sometimes break the bounds of the column if the window size is quite low.

While it's an edge case that someone with that small of a monitor/monitor resolution would be an end user, if there was a relatively simple way to make the sizing of the video match the column width I'd be interested in knowing what that would entail.

If it would be very complicated to do, then it's alright, since my concern would also be whether I could easily teach it to the RAs that will be functioning as editors.

Thanks a TON for all your help Marcell!

I've been experimenting with embedding images and videos on the site, as it's a commonly requested function in the preliminary discussions around the site. I've come up with the following for basic image linking, but I have two issues I can't figure out. (Forgive me as I have a self-taught basic understanding of some HMTL and markdown.) **Image embed HMTL** `<img src=”https://miro.medium.com/max/700/1*uAp4K4IuVOaJp6v4B99KSQ.jpeg”>` **Image embed HTML (with size constraint, for images smaller than 800px wide)** `<div style=”maxwidth: 100px”><img src=”https://miro.medium.com/max/700/1*uAp4K4IuVOaJp6v4B99KSQ.jpeg”></div>` **Image embed HTML (with size constraint and link on click.)** ``` <a href="https://meta.stackoverflow.com/users/44330/jason-s"> <div style="max-width:100px"><img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07"></div> </a> ``` **The two things I can't figure out/am curious about are** 1. How to align an image to the center of the column when the size of the image is constrained. As having them aligned left by default when they less than 800px is not ideal visually. 2. When adding links to the images, I've found that `<a href=` bypasses the standard */www* stylisation that pops up for links by default on the site. I was wondering if there was a way to selectively bypass the /www stylization when using identifier based links, like the following example. `[<div style="max-width:100px"><img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07"></div>][identifier]` then at the end of the markdown `[identifier]: https>//https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07` It's not absolutely neccessary, if using the HTML `<a href=` is the effective workaround for avoiding the /www stylization that is totally fine, but I'm going to encourage people to use the identifier method for normal links to keep things organized, so I was just wondering if you had a workaround. **Lastly the video embedding related question** So the last question was centering around video being embedded on the site. Using simple embed codes from vimeo or youtube I've gotten videos working on the site in a functional basic way. ``` <figure class="video_container"> <iframe src="https://player.vimeo.com/video/535294266" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </figure> ``` The one unideal thing formatting wise is that the size in pixels of the embeds is manual, rather than adaptive to the width of the content column. As such the videos do not fill the whole column and do not scale if the column is scaling. Which means that they do sometimes break the bounds of the column if the window size is quite low. While it's an edge case that someone with that small of a monitor/monitor resolution would be an end user, if there was a relatively simple way to make the sizing of the video match the column width I'd be interested in knowing what that would entail. If it would be very complicated to do, then it's alright, since my concern would also be whether I could easily teach it to the RAs that will be functioning as editors. ***Thanks a TON for all your help Marcell!***

marcell commented

2021-09-19 13:35:08 +02:00

Owner

i would propose to work on this following the sandpoints custom set of links already existing..

let me try to show that via few examples (from https://pages.sandpoints.org/camposud/spectre/adifferenzadelpresente/ or git repo: https://git.sandpoints.org/CampoSud/SpectreOfReflections)

bibliographic references

this screenshot is made after this markdown syntax in the source file:

![Southern Question](bib:b663c527-165a-4571-a58b-15f7d76e13e7)

this follows the regular image link in markdown but it introduces few custom details:

inside the rounded brackets at the very begining after the first left bracket it introduces the bib: for the bibliographic references and it asks for the ID of the book from the dedicated Sandpoints library
it makes the text inside square brackets (Southern Question) into the hyperlink to the library item

another use of bibliographic custom link is made if you leave the square brackets empty like this:

![](bib:3dcc9d1f-1071-43e0-8320-1cf5921371c0)

which expands into a full citation like this:

sandpoints internal links

following what is introduced with 'bibliograhic references' there's also a support for the internal links to other sandpoints pages.

CampoSud's SpectreOfReflections has this triadic structure: spectre::reflection::highlight so here are few examples:

was rendered after this markdown link:

![Anna Maria Ortese](highlight:dichiachi.md)

the same reference/highlight is rendered into full title if the sqare brackets are left empty:

![](highlight:dichiachi.md)

and here's how it looks like on the same page in different part of the text:

that syntax should work for any page in Sandpoints not only for the ones part of the triadic tiers hierarchy. so far, very often internal link would be the link to editor or author pages..

i would propose to work on this following the sandpoints custom set of links already existing.. let me try to show that via few examples (from https://pages.sandpoints.org/camposud/spectre/adifferenzadelpresente/ or git repo: https://git.sandpoints.org/CampoSud/SpectreOfReflections) 1. bibliographic references ![](https://i.imgur.com/dOZGZtr.png) this screenshot is made after this markdown syntax in the source file: ``` ![Southern Question](bib:b663c527-165a-4571-a58b-15f7d76e13e7) ``` this follows the regular image link in markdown but it introduces few custom details: * inside the rounded brackets at the very begining after the first left bracket it introduces the `bib:` for the bibliographic references and it asks for the ID of the book from the dedicated Sandpoints library * it makes the text inside square brackets (`Southern Question`) into the hyperlink to the library item another use of bibliographic custom link is made if you leave the square brackets empty like this: ``` ![](bib:3dcc9d1f-1071-43e0-8320-1cf5921371c0) ``` which expands into a full citation like this: ![](https://i.imgur.com/VAtIVKu.png) 2. sandpoints internal links following what is introduced with 'bibliograhic references' there's also a support for the internal links to other sandpoints pages. CampoSud's `SpectreOfReflections` has this triadic structure: `spectre::reflection::highlight` so here are few examples: ![](https://i.imgur.com/pfPvoq5.png) was rendered after this markdown link: ``` ![Anna Maria Ortese](highlight:dichiachi.md) ``` the same reference/highlight is rendered into full title if the sqare brackets are left empty: ``` ![](highlight:dichiachi.md) ``` and here's how it looks like on the same page in different part of the text: ![](https://i.imgur.com/uNnR88n.png) that syntax should work for any page in Sandpoints not only for the ones part of the triadic tiers hierarchy. so far, very often internal link would be the link to `editor` or `author` pages..

marcell commented

2021-09-19 13:50:06 +02:00

Owner

following the above comment i would like to introduce similar approach to video and images. and the reason why i would add prefix image even hugo already has support for images (via common markdown) is that if i do that i can introduce also better control of how the images would be then embedded into the page.

hugo has support for (youtube, vimeo) videos via its shortcodes.

both of those are good enough for most of the hugo users.

my experience working with not typical hugo users is that introducing too many different syntax rules is a big obstacle.

i feel following the syntax i already introduced to sandpoints should be the way to go.

i would suggest we do something like this:

![](image:/path/to/uploaded/image.jpg)
![](image:http://path.to.image.somewhere.on.the.internet/image.jpg)

the same should go for the videos by replacing the prefix image in above example.

that would allow me to make a support for the custom styling/embedding. we should discuss the syntax when we want to add styles like: centering or aligning to the left/right, resizing etc.

i like that if the video/images are added this way i can do things like image/video galleries which would keep the backlinks and any other metadata we want to introduce to the images and videos.

would that satisfy the needs explained in this issue?

following the above comment i would like to introduce similar approach to video and images. and the reason why i would add prefix `image` even [hugo](https://gohugo.io/) already has support for [images](https://spec.commonmark.org/0.30/#images) (via common markdown) is that if i do that i can introduce also better control of how the images would be then embedded into the page. hugo has support for ([youtube](https://gohugo.io/content-management/shortcodes/#youtube), vimeo) videos via its [shortcodes](https://gohugo.io/content-management/shortcodes). both of those are good enough for most of the hugo users. my experience working with not typical hugo users is that introducing too many different syntax rules is a big obstacle. i feel following the syntax i already introduced to sandpoints should be the way to go. i would suggest we do something like this: ``` ![](image:/path/to/uploaded/image.jpg) ![](image:http://path.to.image.somewhere.on.the.internet/image.jpg) ``` the same should go for the `videos` by replacing the prefix `image` in above example. that would allow me to make a support for the custom styling/embedding. we should discuss the syntax when we want to add styles like: centering or aligning to the left/right, resizing etc. i like that if the video/images are added this way i can do things like image/video galleries which would keep the backlinks and any other metadata we want to introduce to the images and videos. would that satisfy the needs explained in this issue?

teagan commented

2021-09-21 17:02:01 +02:00

Author

Owner

I totally understand the utility of the custom links, and they are what I am telling people to use where relevant. (Pages on the same site like curriculum, topic and syllabus.)

In general I think whatever is simplest and best matches the other systems is a good choice. (i.e. keeping everything in the format of ![](topic:firsttopic.md) and ![](image:https://...) should help users remember the syntax I think.) That way people more layman than myself will hopefully get used to the system as they format writings for it.

So I am 100% behind that implementation.

If you can write into the default styling something that accounts for images that are bellow 800px that can make them scale 1:1 instead of filling the width of the column, I think that would work on it's own for 99% of cases. Otherwise let me know what you think would work in terms of giving end users control over styles. (As being mostly a layman myself I don't know what the syntax options would be for that.)

The video prefix matching the rest of imprementations ![](video:https://...) would also be great. Most users will definetly have an easier time copying the url from youtube/vimeo rather than having to get them to find the embed code option.

If this also allows you to setup formatting for galleries I am sure someone will find that super useful in the future.

As a last question, I wanted to confirm, can the site host it's own images or do they need to be hosted elsewhere? I have thusfar assumed that images will need to be pulled from a seperate site. It's fine either way, I just wanted to confirm.

So in conclusion, yes I think the outlined solutions would satisfy the needs outlined!

Thanks!

I totally understand the utility of the custom links, and they are what I am telling people to use where relevant. (Pages on the same site like curriculum, topic and syllabus.) In general I think whatever is simplest and best matches the other systems is a good choice. (i.e. keeping everything in the format of `![](topic:firsttopic.md)` and `![](image:https://...)` should help users remember the syntax I think.) That way people more layman than myself will hopefully get used to the system as they format writings for it. So I am 100% behind that implementation. If you can write into the default styling something that accounts for images that are bellow 800px that can make them scale 1:1 instead of filling the width of the column, I think that would work on it's own for 99% of cases. Otherwise let me know what you think would work in terms of giving end users control over styles. (As being mostly a layman myself I don't know what the syntax options would be for that.) The video prefix matching the rest of imprementations `![](video:https://...)` would also be great. Most users will definetly have an easier time copying the url from youtube/vimeo rather than having to get them to find the embed code option. If this also allows you to setup formatting for galleries I am sure someone will find that super useful in the future. As a last question, I wanted to confirm, can the site host it's own images or do they need to be hosted elsewhere? I have thusfar assumed that images will need to be pulled from a seperate site. It's fine either way, I just wanted to confirm. So in conclusion, yes I think the outlined solutions would satisfy the needs outlined! Thanks!

marcell commented

2022-01-11 15:38:22 +01:00

Owner

there's an initial support for img and vid... in short:

![](<img:path_to_image style:'width:100px'>)

img: and vid: as referenced earlier in this issue would expand into respected <img and <video html tags. right after : would be its source path and then separated with spaces should list the html attributes coming into the img or video html tags...

the only difference so far with the rest of custom links is that in order to get spaces recognized one should place "less than" < and "greater than" > in the brackets following ![]. so it starts like this (< and ends like this >). see the example above...

there's an initial support for img and vid... in short: ``` ![](<img:path_to_image style:'width:100px'>) ``` `img:` and `vid:` as referenced earlier in this issue would expand into respected `<img` and `<video` html tags. right after `:` would be its source path and then separated with spaces should list the html attributes coming into the `img` or `video` html tags... the only difference so far with the rest of custom links is that in order to get spaces recognized one should place "less than" `<` and "greater than" `>` in the brackets following `![]`. so it starts like this `(<` and ends like this `>)`. see the example above...

teagan commented

2022-01-11 16:27:10 +01:00

Author

Owner

So I think this sort of solution could work, at the moment it doesn't seem to work at least from me quickly trying it.

When tried with an image link, the image displays but isn't formatted. With a youtube link it gives me a no mime warning and doesn't display.

But if we can use it to properly constrain the size and center the image or video in the column this would be great.

I think the ideal solution, if possible, would be to make it so that the size adjustment for images and video would be automatic through some kind of site wide stylization. (So a user could use the img: or vid: code and the stylisation would happen without a need to manually set it via HTML tags.) I am sure I could teach people how to use the tags if this isn't possible, but I figured I would ask, since I doubt that 99% of users would be looking for any stylisation that deviates from the following.

Images:

Be displayed at it's default resolution, if that resolution exceeds the column width it would be constrained to the 800px width.
Be centered in the column when displayed. (So that images smaller than 800px would appear centered rather than Right Aligned.)

Video:

Be displayed at the full width of the column (so 800px and the appropriate proportional height)
Center alignment if the video is smaller, but I think most video posted would be larger than 800px anyways.

Thanks again for your help on this Marcell!
(Hope your year is off to a decent start!)

So I think this sort of solution could work, at the moment it doesn't seem to work at least from me quickly trying it. When tried with an image link, the image displays but isn't formatted. With a youtube link it gives me a no mime warning and doesn't display. But if we can use it to properly constrain the size and center the image or video in the column this would be great. I think the ideal solution, *if possible*, would be to make it so that the size adjustment for images and video would be automatic through some kind of site wide stylization. (So a user could use the img: or vid: code and the stylisation would happen without a need to manually set it via HTML tags.) I am sure I could teach people how to use the tags if this isn't possible, but I figured I would ask, since I doubt that 99% of users would be looking for any stylisation that deviates from the following. **Images:** - Be displayed at it's default resolution, if that resolution exceeds the column width it would be constrained to the 800px width. - Be centered in the column when displayed. (So that images smaller than 800px would appear centered rather than Right Aligned.) **Video:** - Be displayed at the full width of the column (so 800px and the appropriate proportional height) - Center alignment if the video is smaller, but I think most video posted would be larger than 800px anyways. **Thanks again for your help on this Marcell!** (Hope your year is off to a decent start!)

marcell commented

2022-01-11 17:54:43 +01:00

Owner

youtube videos wouldn't work with video tag. i will make a youtube/vimeo embed as a separate approach.

will come back to this..

youtube videos wouldn't work with video tag. i will make a youtube/vimeo embed as a separate approach. will come back to this..

marcell commented

2022-01-11 18:01:45 +01:00

Owner

with an image it should be style= not style: like in this commit:

2ae814e1da

with an image it should be `style=` not `style:` like in this commit: https://git.sandpoints.org/GEMLab/RaceCriticalTheories/commit/2ae814e1da988536c5dd3e65d218f75e52ff318e

marcell commented

2022-01-12 08:56:52 +01:00

Owner

with an image it should be style= not style:

just realized the mistake was introduced with my example here in this thread. i edited the comment..

>with an image it should be `style=` not `style:` just realized the mistake was introduced with my example here in this thread. i edited the comment..

marcell commented

2022-02-04 13:59:55 +01:00

Owner

i made as default styling for images bigger than the div container to fit in and for smaller to stay centered and in its original dimensions. if one wants to change that it could go for what i proposed earlier...

teagan commented

2022-02-07 21:13:20 +01:00

Author

Owner

Sorry for the wait on my reply, I saw your comments, that sounds great in terms of making the default styling to re-size "larger than column" images and to leave "smaller than column" images their default size while centering them.

I am a bit confused as to how to test this default stylisation though since I cannot seem to figure out the correct syntax to make this work...

I've tried out writing the image tag both in the manner you outlined in one of your previous comments:

![](<img:https://m.media-amazon.com/images/I/811fc592UsL._SY445_.jpg style='width:100px'>)

This seems to just resize like the original stylisation if the image is smaller than column width and/or when the image is manually reduced with style= the image does not center.

I also tried using:

![image](<img:https://m.media-amazon.com/images/I/811fc592UsL._SY445_.jpg "Mikhail")

But this also seems to still respect the old styling.

Am I just completely missing what the proper syntax is to access the default stylisation? Sorry if that is the case.

But either way I totally agree on the approach you outlined above of having images scale one way if larger than column and another if smaller as a default style!

Sorry for the wait on my reply, I saw your comments, that sounds great in terms of making the default styling to re-size "larger than column" images and to leave "smaller than column" images their default size while centering them. I am a bit confused as to how to test this default stylisation though since I cannot seem to figure out the correct syntax to make this work... I've tried out writing the image tag both in the manner you outlined in one of your previous comments: ``` ![](<img:https://m.media-amazon.com/images/I/811fc592UsL._SY445_.jpg style='width:100px'>) ``` This seems to just resize like the original stylisation if the image is smaller than column width and/or when the image is manually reduced with **style=** the image does not center. I also tried using: ``` ![image](<img:https://m.media-amazon.com/images/I/811fc592UsL._SY445_.jpg "Mikhail") ``` But this also seems to still respect the old styling. Am I just completely missing what the proper syntax is to access the default stylisation? Sorry if that is the case. But either way I totally agree on the approach you outlined above of having images scale one way if larger than column and another if smaller as a default style!

Rows
Columns

Image/Video Embedding (Centering, Link Through and Sizing) #1