Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add inline image in text #314

Closed
stalkerGH opened this issue May 15, 2024 · 6 comments
Closed

Add inline image in text #314

stalkerGH opened this issue May 15, 2024 · 6 comments
Labels
enhancement New feature or request

Comments

@stalkerGH
Copy link

I asked on general Zola board (https://zola.discourse.group) but maybe I can try here too.

I’d like to add small inline image, directly in text. If I add tag directly in .md file, it renders as separate paragraph:

first part of text

IMAGE

rest of text

But I’d like to have it like this: “some text IMAGE and some text again”.

How (and if) can I achieve that in Zola & Tabi?

@stalkerGH stalkerGH added the enhancement New feature or request label May 15, 2024
welpo added a commit that referenced this issue May 15, 2024
Regular images get a `block` display to be centered.
This allows vertically aligned inline images.

Related: #314
@welpo
Copy link
Owner

welpo commented May 15, 2024

It wasn't possible with tabi's CSS. I've added (6a4f424) a new class for images, inline, which allows you to do this.

To use it, you'll need to specify the inline class on the image. To embed the image, use HTML:

Some text <img src="path/to/img.png" class="inline" alt="Descriptive text"> and some more text.

I've made it so the image gets vertically aligned with the text, hoping that fits most use cases for this class.

Let me know whether that helps.


As to why I made all images centered and in a new line: I want centered images on my posts. So far, I haven't had to use an inline image. In choosing a default, I chose the one I saw most use for. Making inline images the default (which it is without CSS) would make adding centered images more cumbersome.

Hope that makes sense!

@stalkerGH
Copy link
Author

Thank you very much! Yes, it works like a charm. Little change in the code but great effect :)

@stalkerGH
Copy link
Author

The problem is solved so I close the issue.

@welpo
Copy link
Owner

welpo commented May 18, 2024

@stalkerGH if you're interested, now you can use all image shortcodes with the inline option (#315)

@stalkerGH
Copy link
Author

stalkerGH commented May 18, 2024

Yes, indeed I'm interested. Thank you for this new feature :)

@welpo
Copy link
Owner

welpo commented May 18, 2024

Thank you for the idea!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants