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

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

Closed
Kulbhushan-Chand opened this Issue Sep 6, 2018 · 5 comments

Comments

Projects
None yet
2 participants
@Kulbhushan-Chand

Kulbhushan-Chand commented Sep 6, 2018

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 6, 2018

Owner

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.

Owner

mmistakes commented Sep 6, 2018

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 6, 2018

Owner

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.

Owner

mmistakes commented Sep 6, 2018

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.

@Kulbhushan-Chand

This comment has been minimized.

Show comment
Hide comment
@Kulbhushan-Chand

Kulbhushan-Chand Sep 6, 2018

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. 🤔

Kulbhushan-Chand commented Sep 6, 2018

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 6, 2018

Owner

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 %}
Owner

mmistakes commented Sep 6, 2018

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 %}
@Kulbhushan-Chand

This comment has been minimized.

Show comment
Hide comment
@Kulbhushan-Chand

Kulbhushan-Chand Sep 6, 2018

Thanks a lot. That was a silly mistake. 😃

Kulbhushan-Chand commented Sep 6, 2018

Thanks a lot. That was a silly mistake. 😃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment