How to Align an image to Center, Right and Left in Obsidian Note Taking App - Obsidian Tutorial Obsidian Note-Taking App Tutorial Playlist: • Obsidian Note-Taking A...
Hey guys, for those of you having issues with the visualization only working in edit mode and not in reading mode, try this code! /* Align image to the right */ div[src$="#right"], span[src$="#right"], img[src$="#right"] { display: block; text-align: right; margin-left: auto; margin-right: 0; } /* Align image to the center */ div[src$="#center"], span[src$="#center"], img[src$="#center"] { display: block; text-align: center; margin-left: auto; margin-right: auto; } /* Align image to the left */ div[src$="#left"], span[src$="#left"], img[src$="#left"] { display: block; text-align: left; margin-left: 0; margin-right: auto; }
Thank you very much! Although the method I saw in the video worked on one device, for some reason it did not work on the other. Your way helped me out a lot!
thank you very much. First time using snippets. Unfortunately it doesnt work. Obsidian detects the css file however when adding #center, etc. the image doesnt change.
/* Align image to the right */ div[src$="#right"], span[src$="#right"] { text-align: right; } /* Align image to the center */ div[src$="#center"], span[src$="#center"] { text-align: center; } /* Align image to the left */ div[src$="#left"], span[src$="#left"] { text-align: left; }
@@CreadorSupremo It's CSS, so why wouldn't you be able to? With `text-align` you won't be able to but with `float` you can. I tested the below and it works fine for me. ``` div[src$="#float-right"] { float: right; padding-left: 50px; } div[src$="#float-left"] { float: left; padding-right: 50px; } ``` Notes: 1. Use `#float-right` / `#float-left` on your image instead of `#right` / `#left` 2. When using this approach, i.e. floating images, the image needs to come BEFORE the text you want aligned to the left/right. So add your image, set the alignment and then add your text below 3. You can adjust the `padding-left` / `padding-right` in the above CSS if you want to adjust spacing more. You could also replace them with `padding: 10px 10px 10px 10px;` if you want full control over the image. The 4x "10px" are just example values, but represent the sides in the order of TOP, RIGHT, BOTTOM, LEFT.
Місяць тому
Could something like this be used to make the test wrap around the images? I'm using my vault as a mind-palace for my world building project. Things like locations, races, key artifacts etc are being explained and I wanted to write them in a wiki-style format (image to the right, intro text wrapped around it then body below it with additional exemplary images as needed). Would you happen to have an idea how to do this?
Yeah. I myself don't use Reading mode at all. But in order to have it in Reading Mode, you should add another piece of code as well. I will record a video in the future as well. But I don't know exactly when. Because before that, I need to upload a lot of other stuff which they have a bigger priority.
/* Align image to the right */ div[src$="#right"], span[src$="#right"] { text-align: right; } /* Align image to the center */ div[src$="#center"], span[src$="#center"] { text-align: center; } /* Align image to the left */ div[src$="#left"], span[src$="#left"] { text-align: left; }
Місяць тому
@lauzzz1292 Same, this method does not work. Perhaps Obsidian updated something within its core that rendered this inoperable now.
Thanks. I will do my best to record another video on how to solve the problem you addressed as well. But before that, I need to upload some other videos and complete the playlist. But later on, I will do my best to record another video on how to solve the problem you addressed as well
/* Align image to the right */ div[src$="#right"], span[src$="#right"] { text-align: right; } /* Align image to the center */ div[src$="#center"], span[src$="#center"] { text-align: center; } /* Align image to the left */ div[src$="#left"], span[src$="#left"] { text-align: left; }
Thanks. I will do my best to record another video on how to solve the problem you addressed as well. But before that, I need to upload some other videos and complete the playlist. But later on, I will do my best to record another video on how to solve the problem you addressed as well
/* Align image to the right */ div[src$="#right"], span[src$="#right"] { text-align: right; } /* Align image to the center */ div[src$="#center"], span[src$="#center"] { text-align: center; } /* Align image to the left */ div[src$="#left"], span[src$="#left"] { text-align: left; }
div[src$="#right"] {
text-align:right;
}
div[src$="#left"] {
text-align:left;
}
div[src$="#center"] {
text-align:center;
}
it works only in edit mode, why is that?
@@F4hk3n
/* edit mode */
div[src$="#right"] {
text-align: right;
}
/* edit mode */
div[src$="#center"] {
text-align: center;
}
/* edit mode */
div[src$="#left"] {
text-align: left;
}
/* view mode */
img[alt$="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}
/* view mode */
img[alt$="left"] {
display: block;
margin-right: auto;
}
/* view mode */
img[alt$="right"] {
display: block;
margin-left: auto;
}
@@proalex96 thank you iwill try that
FINALY a clear explanation after hours of research on how to wrap text around image. 1 milions thank you.
You're welcome.
Glad you liked the video.
It's my pleasure.
This is amazing. You've made it simple and direct. I have learned more by watching this video than to searching for hours in the web
You're very welcome. Glad the video was helpful. And thanks for your feedback.
Hey guys, for those of you having issues with the visualization only working in edit mode and not in reading mode, try this code!
/* Align image to the right */
div[src$="#right"], span[src$="#right"], img[src$="#right"] {
display: block;
text-align: right;
margin-left: auto;
margin-right: 0;
}
/* Align image to the center */
div[src$="#center"], span[src$="#center"], img[src$="#center"] {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* Align image to the left */
div[src$="#left"], span[src$="#left"], img[src$="#left"] {
display: block;
text-align: left;
margin-left: 0;
margin-right: auto;
}
Thank you very much! Although the method I saw in the video worked on one device, for some reason it did not work on the other. Your way helped me out a lot!
this helps, thanks!
Amazing!! This is exactly what I needed, and you explained it so well.
Thank you!! You are great!
thank you very much. First time using snippets. Unfortunately it doesnt work. Obsidian detects the css file however when adding #center, etc. the image doesnt change.
سجاد جان عالی بود، اکسنت بسیار روان و قابل فهم و ویدئو های کاربردی . موفق باشی
سلام آقای آرش عزیز،
خیلی ممنون از لطف و محبتتون.
این لطف شماست.
خدا رو شکر که مفید بوده
Finally a video that shows exactly the way. Thanks!
hi thanks for the Video ! :) I really like it.
Do you know if there is a snippet to make text float next to pictures ?
Hi. You're welcome. Glad you liked the video.
IDK what you mean by "make text float next to pictures"
@@ObsidianTutorial Probalby he means how to make picture be surraunded by the text. I`m loooking for that solution as well.
@@justMe635033 Yeah that what i meant basically. How can i have text next to pictures and drawing from excalidraw
Hello, what is the plugin that shows you all of the visual setting of text formatting?
I tried your method, it only works in real-time preview mode, not in reading view! Is that so?
Me too, have you managed to solve it?
@@ruanclaudio4719 append to that css file
.image-embed[src$="#right"] {
text-align:right;
display: inline-block;
width: 100%;
}
.image-embed[src$="#left"] {
text-align:left;
display: inline-block;
width: 100%;
}
.image-embed[src$="#center"]{
text-align:center;
display: inline-block;
width: 100%;
}
@@ruanclaudio4719 this is caused by css priorities
/* Align image to the right */
div[src$="#right"], span[src$="#right"] {
text-align: right;
}
/* Align image to the center */
div[src$="#center"], span[src$="#center"] {
text-align: center;
}
/* Align image to the left */
div[src$="#left"], span[src$="#left"] {
text-align: left;
}
can I write text on the left and put the image on the right? I want them next to each other pleae
you can't, and that's supposed to be the point of wanting to align the image LOL
@@CreadorSupremo It's CSS, so why wouldn't you be able to? With `text-align` you won't be able to but with `float` you can.
I tested the below and it works fine for me.
```
div[src$="#float-right"] {
float: right;
padding-left: 50px;
}
div[src$="#float-left"] {
float: left;
padding-right: 50px;
}
```
Notes:
1. Use `#float-right` / `#float-left` on your image instead of `#right` / `#left`
2. When using this approach, i.e. floating images, the image needs to come BEFORE the text you want aligned to the left/right. So add your image, set the alignment and then add your text below
3. You can adjust the `padding-left` / `padding-right` in the above CSS if you want to adjust spacing more.
You could also replace them with `padding: 10px 10px 10px 10px;` if you want full control over the image. The 4x "10px" are just example values, but represent the sides in the order of TOP, RIGHT, BOTTOM, LEFT.
Could something like this be used to make the test wrap around the images?
I'm using my vault as a mind-palace for my world building project. Things like locations, races, key artifacts etc are being explained and I wanted to write them in a wiki-style format (image to the right, intro text wrapped around it then body below it with additional exemplary images as needed).
Would you happen to have an idea how to do this?
thanks, it works. Can i set it default to align image center?
thanks
But this only works in editing mode, no? If I switch to reading mode, its back again aligned to the left. any fix? Thanks. 🙏🏼
Yeah.
I myself don't use Reading mode at all.
But in order to have it in Reading Mode, you should add another piece of code as well.
I will record a video in the future as well. But I don't know exactly when. Because before that, I need to upload a lot of other stuff which they have a bigger priority.
/* Align image to the right */
div[src$="#right"], span[src$="#right"] {
text-align: right;
}
/* Align image to the center */
div[src$="#center"], span[src$="#center"] {
text-align: center;
}
/* Align image to the left */
div[src$="#left"], span[src$="#left"] {
text-align: left;
}
@lauzzz1292 Same, this method does not work. Perhaps Obsidian updated something within its core that rendered this inoperable now.
This is very cool, but it disappears as soon as you enter reading mode. Any clue as to why?
Thanks. I will do my best to record another video on how to solve the problem you addressed as well. But before that, I need to upload some other videos and complete the playlist. But later on, I will do my best to record another video on how to solve the problem you addressed as well
/* Align image to the right */
div[src$="#right"], span[src$="#right"] {
text-align: right;
}
/* Align image to the center */
div[src$="#center"], span[src$="#center"] {
text-align: center;
}
/* Align image to the left */
div[src$="#left"], span[src$="#left"] {
text-align: left;
}
What a God ! Thanks for this.
You're welcome!
It's nice of you.
Thanks
You are great!
It's nice of you.
Thanks.
incrivel man, ansioso pelos proximos videos.
It's work, but only on editing mode when i select view mode, don't work :(
same for me :(((
Thanks. I will do my best to record another video on how to solve the problem you addressed as well. But before that, I need to upload some other videos and complete the playlist. But later on, I will do my best to record another video on how to solve the problem you addressed as well
/* Align image to the right */
div[src$="#right"], span[src$="#right"] {
text-align: right;
}
/* Align image to the center */
div[src$="#center"], span[src$="#center"] {
text-align: center;
}
/* Align image to the left */
div[src$="#left"], span[src$="#left"] {
text-align: left;
}
thanks!
You're welcome.
Thanks man
thanks a lot!:)
You're welcome. Glad you liked the video.
Hi, I dont have a .obsidian folder? Anyone know where im going wrong? thanks
Dot files (.git, .obsidian, .config) are usually hidden by default on windows. File explorer top bar, there's a view option > show > hidden items.
the best
Thanks.
It's nice of you.
Is a way for iPad too ?
I don't know