Images/Collections in Newsletters

Hosting on Micro.blog
1

Thanks to the new change in Micro.blog, now photos from RSS feeds now show up nicely in the newsletter coz they’re linked to images in the Uploads and not hotlinked to the source :raised_hands:t4:

However the images within @jsonbecker’s GLightbox’s <div class="img-gallery">tag don’t show up. In the earlier version of the newsletter, you could edit the post for the newsletter without editing the post on the blog. I don’t mind doing this before the newsletter goes out. Possible?

Also, will the new Collections shortcode show the images in the newsletter? I am assuming yes. But in a grid like on the blog or all in a list like on the timeline?

2

I don’t think shortcodes work at all in Newsletters last I checked. The CSS for the grid I provide for img-gallery is based on CSS Grid which I don’t think is supported in HTML emails.

3

Thanks. Hence my Q about editing only a post for the newsletter.

BTW a (maybe?) related Q about your plugin. I reduced image width to 70% but this increased the horizontal gap between images within the <div class="img-gallery"> class. I understand why but any way to make it look like it did originally?

4

I can’t quite figure out what, but there’s something adding margin before and after your photos related to them being wrapped in a paragraph. Nothing I do adjusting the grid code works because the actual item is being read as much wider than the photo itself and I can’t quite pinpoint why.

Screenshot 2024-12-17 at 9.57.33 AM
Screenshot 2024-12-17 at 9.57.33 AM998×664 250 KB

Note how this spacing does not show up on a post on my site:

Removing the paragraph wrapper didn’t help either, though best I can tell that should have done it.

5

It works as it should if my overall image-width is 100%. I’ll check my other CSS. There’s plenty of cruft in there that may be conflicting. I thought there may be a plugin-specific CSS where I could make the change and have the images within it be 100% width.

6

You can add the following to have a more specific selector override your broader image width setting:

.img-gallery>p>a>img {
	width: 100%
}

.img-gallery>a>img {
  width: 100%
}
7

Yes! that worked. Thanks. Didn’t know about the >a>img style.