#45

Does this new code you’ve linked here provide a grid in the way you’ve done it? For me, this is how it appears.

Screen Shot 2021-03-05 at 00.58.39
Screen Shot 2021-03-05 at 00.58.391718×1490 166 KB

Screen Shot 2021-03-05 at 00.59.09
Screen Shot 2021-03-05 at 00.59.091868×726 90.5 KB

#46

Please note, I know nothing of programming or css. I’m a noob. I was lucky to have @santi kindly help me add your initial code to my vault.

2 Likes
#47

Please discuss in the thread linked above.

Since the solution proposed in this thread is no longer functional, and cannot be updated without changes to Obsidian core, it’s best to work directly with maintainers of other alternatives.

#48

The code still works for me on 11.3?

shot_210305_070006
shot_210305_070006937×1083 192 KB

Just make sure the images are at the very bottom of the page.

.img-grid .markdown-preview-section > div:last-of-type > p {
    display: grid;
    /*grid-template-columns: repeat(5, minmax(0, 100%));*/
    grid: 1fr / repeat(5, minmax(0, 100%));
    gap: 1rem;
    align-items: stretch;
}
.img-grid .markdown-preview-section > div > p > img + br{display: none;}
.img-grid .markdown-preview-section img:not(:active):not(.emoji) {
    object-fit:cover;
    width: 100%;
    height: auto;
    max-height: 60vh;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span2"]{
    grid-column: span 2;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span3"]{
    grid-column: span 3;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span4"]{
    grid-column: span 4;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span5"]{
    grid-column: span 5;
}
#49

This approach works very differently and is not reverse compatible with the flexbox model in the original post.

The way your code is set up only works if your images are the last element in your file, and there are some additional quirks with the span modifiers. Because of the way Obsidian changed how images are grouped, I don’t see a way that it could be set up to be reverse compatible so that you can use multiple image grids within the flow of text.

I recommend splitting this approach out into its own thread to describe how it works. It might still be a good fit for some users!

#52

This is so well organized…
Can you share the code :smiley:
would like to give It a try

#53

I’m afraid that got broke by an Obsidian update, as alluded to in Kepano’s reply. The best solution I have found is @Lithou 's ‘Image_Flags’ ( Sandbox/Image Flags (Core Documentation).md at main · Lithou/Sandbox (github.com)). The ‘Gallery’ plugin is also quite useful.

1 Like
#54

thanks for letting me know :smiley:

#55

The (not working anymore) layout displayed in the first post was just perfect and really usefull… I can’t believe it has been broken and does not work anymore, without any real alternatives (i tryed the other solution with “img flags” but i’m not able to have it working in any way).

By any chance, is there another (working) alternative somewhere ?

#56

The next release of Minimal Theme will include a new version of img-grid that works just like the original. It will be available to my Early Access backers soon.

4 Likes
#57

This functionality is now available in Minimal Theme combined with Contextual Typography v2.2.1 — read the Minimal 4.2 release notes for more detail.

1 Like
#58

Hi !! This one works for me (with contextual typography plugin) :

.img-grid .el-embed-image p{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
grid-template-rows: masonry;
align-items: stretch;
column-gap: 1rem;
justify-content: stretch;
align-content: stretch;
justify-items: stretch;
margin-bottom: -0.8rem;
}

.img-grid .el-embed-image p br{
display: none;
}

.img-grid img {
object-fit: cover;
height: 200px; /* The height you want */
width: 100%;
}

#59

Great, @kepano, thanks for the amazing work! It worked well here, but I was wondering if there’s a way to show the images as links, so the image grid acts like a dashboard that links to the pages. I tried here but it didn’t work.

#60

I just released a snippet inspired by kepano’s image grid layouts. Should work with any theme. Hope others find it useful!

obsidian-media-grid-twitter
obsidian-media-grid-twitter1920×1282 131 KB

4 Likes
#61

Thanks for that ! That’s the code I used in the Harmonic theme ! An issue or an advantage of this (depends of the point of view) is that the syntax :

![image](link)
Text your write without space before it

Displays the text in grid

1 Like
#62

Have just seen these updates and i can confirm that the CSS provided by @ zremboldt seems to be working fine ! Thanks a lot !

#63

Did anyone has succeeded with any implementation of Live Preview image grid in Blue Topaz theme?

#64

This CSS is wonderful, but I must warn that it does cause some problems. If you have ‘Readable line length’ enabled in Obsidian’s settings, all embedded notes now have artifacts like the ones shown below. This is valid at least for the Ars Magna theme.


  1. I create notes that contain tables with certain characteristics defined in the frontmatter, and then embed those notes with tables in other notes. Tables should be shown extended, covering the full width of the note. As can be seen here, this feature is lost and the table is displayed compressed to one side of the note.

1
11142×596 65.2 KB


  1. In addition, these strange lines that appear in other transclusions of notes that do not contain tables can be observed.

2
21116×1024 127 KB


In short, it causes problems in the transclusions, at least in the Ars Magna theme, as I previously stated. It would be very useful if this CSS were modified so that it affects ONLY the transclusions with the format .jpg, .mp4, etc., and not all the transclusions (ie, that an exception be defined for the .md notes that are embedded) . I would do it myself and share the code here if I knew more about CSS, but my abilities in that regard are very limited.

#65

Hello Zremboldt, I’m on v. 0.13.23 on Windows 10 and it does not seem to work. I tried with different themes with no luck.

I was wondering if we still have to add the cssclass declaration in YAML ? Does the size of the images have an impact ? Do I have to define their size so that they would fit side by side ? I know it would defeat the purpose of this snippet, but just asking in case.

I just noticed, image grid feature doesn’t work either in the Minimal theme… mmm even stranger.

#66

Image grid requires Contextual Typography plugin to be enabled

You can find the documentation about image grid here: