Create a post makdown language

[afern247]

Hi, I want to post 3 pictures like this:

1 2 3

one after the other, how can I:

1. Resize the picture to an avatar size, let’s say 25x25
2. Place the images one next to the other.

I was looking here where they give this

<figure class="kg-image-card">
    <img src="https://example.com/image.jpeg" class="kg-image">
</figure>

but it doesn’t do the trick

Thanks

EDIT: The only way I found to actually resize the image is doing it manually, but that’s a pain, imagine all the time I we have to spend

[dsecareanu]

There’s no gallery option yet, but there is this hack that might work for you:
https://attilathedud.me/photo-gallery-on-ghost-blog/

[afern247]

Thanks for the reply. I’m not really trying to have a gallery. Look at the post and you’ll know what I mean:

https://elkepon.com/setup-mdc-student-email/

At the buttom you’ll see I have 2 images that I had to resize manually on my computer . What I’m trying to do now is to display them in line, side by side because they are vertical now

Btw don’t mind the theme and so on, I’m just focusing on content now

[ahmadajmi]

I think this might be a starting point solution:

<figure class="kg-image-card kg-image-card-grid">
  <img src="https://example.com/image.jpeg" class="kg-image">
  <img src="https://example.com/image.jpeg" class="kg-image">
  <img src="https://example.com/image.jpeg" class="kg-image">
</figure>

Using Code Injection:

<style>
  .kg-image-card-grid {
    display: flex;
    justify-content: space-between;
  }

  .kg-image-card-grid .kg-image {
    height: 200px;
    object-fit: cover;
    width: calc(33% - 6px);
  }
<style>

Result:

[dsecareanu]

Well a gallery could solve that issue of displaying two images side by side.

However, you can try ful html and css (see the post above).

[afern247]

I’ll do the html css for now and during the weekend give the gallery a try. Thanks guys

[pascalandy]

Hey Arturo,

If you want to have three images in three columns why not using a table?

There are three ways to do this:

• Grid table (recommended)
• Markdown
• HTML

On play-with-ghost, I show how to do it on a style-guide page. The whole markdown sources are available as well. I think it’s the most exhaustive style-guide page you can find in the whole world :-p

Let me know if you need help .
Cheers!

[afern247]

It just seems ridiculous that to put a picture side by side I have to do all that…

productivity == -100 ;

Thanks for the help, that’s another way of doing it, even though I like the one that ahmadajmi
proposed better, your post was kind of too broad, didn’t see a simple use of tables (just a tip )

Thanks for the help pasc, if the others don’t work I’ll try that

[pascalandy]

When you say “I have to do all that”, you mean this?

[afern247]

That’s probably the most convenient way of doing it, I already did it with that, however, yes… all those lines can slow down the productivity, now you have to switch focus from production to maintenance or rather trying to get the columns to work. Don’t get me wrong, I love ghost, but this syntax is very unproductive when it comes to add images or something else than just plain text. It took me 2 seconds to do that table that you mentioned, First I had to do it with plain text and then copied the links with images because otherwise I would have to visualise how it would be, look at the example, this is 2 col/rows only, imagine a whole table of 15/15 …

| [![setup-mdc-email-on-iphone-1](/content/images/2018/07/setup-mdc-email-on-iphone-1.png)](https://elkepon.com/setup-mdc-student-email-on-iphone/)  | [![proxy.duckduckgo.com-2](/content/images/2018/07/proxy.duckduckgo.com-2.png)](https://elkepon.com/setup-mdc-student-email-on-android/)
|--------|:----:| 

What I’m trying to say is that a nice and convenient table creation bottom should be included. Editing tables manually like this is a pain.

Thanks for the code tho

[pascalandy]

You’re welcome. Just trying to help here
If you are looking to avoid markdown cause it’s too painful, maybe Ghost is not the best tool for you at this point.

[afern247]

I already thought about it. I’m testing it to see if I like it