Proper markdown for images with id and class

1

I am using lightgallery JS for my image galleries and I have everything working quite well. I am using bare HTML for my images, but Markdown for everything else. It works fine, so not the end of the world, but I would like to simplify my workflow a little bit if I can, and do everything in Markdown instead of resorting to HTML. How would I write this in Markdown so that it renders just like this:

<a href="{{ site.baseurl }}/images/category/image-1.jpg" id="galleryImage">
  <img src="{{ site.baseurl }}/images/category/thumb/image-1-th.jpg" class="galleryThumb" />
</a>

Is it even possible? Thanks in advance!

-Eli

2

not an answer to your actual question, but if you are repeating that block of code over and over again, it is a good candidate for using a data file instead. Then you could just build the code once and then loop thru a list of images and other info to build it.

3

Kramdown (Jekyll’s default Markdown processor) has inline attribute lists that you can use to add classes and id’s to an element.

For example you could do this to add class="galleryThumb" to your image.

![image]({{ site.baseurl }}/images/category/thumb/image-1-th.jpg){: .galleryThumb}

I’ve never tried doing it with an anchor wrapping an image, but the following should work:

[![image]({{ site.baseurl }}/images/category/thumb/image-1-th.jpg){: .galleryThumb}]({{ site.baseurl }}/images/category/image-1.jpg){: #galleryImage}

Though I don’t know if it’s any better or easier to read than straight HTML.

4

Thank you rdyar and mmistakes for your replies.

mmistakes,
I tried it and yes, it works beautifully… though it only saves 20 key strokes. I agree with you that it’s not really better or easier than the HTML. Honestly I think the HTML looks cleaner, so I will probably stick with that, but thank you for showing me the correct markdown if I ever have a reason to use it. As a side note, thank you so much for your static_files blog post, as I used that as the basis for my galleries script (see below). I’m glad to have the opportunity to thank you personally (or as personally as you can over the interwebs), so THANK YOU!

rdyar,
Thank you for the suggestion. I actually did that (using mmistakes’ code), and I use it whenever I need an image gallery, but what brought up this question was a blog post where I have particular images dividing parts of the text, so I need to specify which image. Maybe this is getting a little off topic, but I’m including the script I used to build my galleries in case anyone is interested:

<div class="galleryWrap" id="lightgallery">
{% assign images_thumb = page.images_url | append: "thumb/" %}
    {% for image in site.static_files %}
	{% if image.path contains page.images_url %}
	    {% unless image.path contains '-th.' %}
		<div class="pictureBox">
		    <div class="innerBox">
			<a href="{{ image.path }}" id="galleryImage">
			    <img src="{{ images_thumb | append: image.basename | append: '-th' | append: image.extname }}" />
			</a>
		    </div>
		</div>
	    {% endunless %}
	{% endif %}
    {% endfor %}
</div>

-Eli

1 Like
5

@randomren, I have written this article on How to add class name or id to an image tag inside a markdown file?

6

No problem, glad that post was useful.

Another option is to use a Jekyll include as a shortcode of sorts. I do something similar with some of my Jekyll themes where I have figure and gallery includes.

Taking you example above you could do something like this:

_includes/image

<a href="{{ include.link | relative_url }}" id="galleryImage">
  <img src="{{ include.thumb | relative_url }}" class="galleryThumb" />
</a>

Then in your Markdown you’d reference it like this to pull in whatever image and link you wanted to wrap it with:

{% include image link="/images/category/image-1.jpg" thumb="/images/category/thumb/image-1-th.jpg" %}
7

Hi there,

I’m new to the forum and I’ve been looking for an answer around a similar topic.

I have a _post layout that is composed like that

  • Hero section
  • post content section
  • pagination section
  • footer section

My post content section contains the content of my markdown file.

The content is within a div “container”
All my <p> text is applied a column class to using liquid to make it as wide a 2 thirds of width

I want to make my images go full width of the container but the problem is that Kramdown wraps my <img> in <p> so they cant get wider than 2 thirds of the screen.

Any chance you guys have found a way ?