Adding "Half" and "Full" class for galleries defined via front matter

[kulbhushanchand]

The galleries defined via front matter always have class="third" attribute with them (i.e. they are shown in column of three images).

Is it possible to show them as single images or set of two column images?

I searched the documentation, and this feature is not available (documentation link page)

Please note - It is possible to do by writing html code as -

	<img src="/images/image-filename-1.jpg">
	<img src="/images/image-filename-2.jpg">
	<img src="/images/image-filename-3.jpg">
	<figcaption>Caption describing these three images.</figcaption>
</figure>

But I want to avoid writing html code and to use gallery as -

{% include gallery caption="This is a sample gallery with." %}

[mmistakes]

The gallery helper doesn't support this. It has some internal logic to apply the half class when there are 2 images, and the third class when 3 or more.

This is done for styling purposes to maintain a pleasing grid. On smaller screens the half and third classes default to a single column, similar to what you're asking for. If you wanted to override this you could add CSS to force .half and .third to stay as single columns.

Not something I'd want to change for the theme, so you'll have to manage that in your own repo.

[mmistakes]

You could also create your own copy of /_includes/gallery and rip out the logic that applies the .half and .third classes.

Consult the Jekyll docs on how to override theme defaults.

[kulbhushanchand]

Thanks for the directions.

A little help please

I tried to tweak the logic in /_includes/gallery as follows --

• Created new front matter variable gallery_layout: half
• Changed if -else logic as

{% if page.gallery_layout %}

 {% assign gallery_layout = {{ page.gallery_layout }} %}

{% else %}

{% if gallery.size == 2 %}
  {% assign gallery_layout = 'half' %}
{% elsif gallery.size >= 3 %}
  {% assign gallery_layout = 'third' %}
{% else %}
  {% assign gallery_layout = '' %}
{% endif %}

{% endif %}

You can see I just added an if condition before previous logic, so If in the front matter if gallery_layout is defined it will be used instead.

Problem is in the html code the class defined to gallery is blank. I am sure the problem is with the second line {% assign gallery_layout = {{ page.gallery_layout }} %}, but I am not able to figure it out. 🤔

[mmistakes]

Remove the curly braces in your second line. You just need the variables name when inside of the assign.

{% assign gallery_layout = page.gallery_layout %}

[kulbhushanchand]

Thanks a lot. That was a silly mistake. 😃