Group Pictures bug?

[ivan-nginx]

{% gp 5-2 %}
  ![](/images/docs/github.png)
  ![](/images/docs/next-default-scheme-linux.png)
  ![](/images/docs/tomorrow-night-blue.png)
  ![](/images/docs/tomorrow-night.png)
  ![](/images/docs/tomorrow-normal.png)
{% endgp %}

[ivan-nginx]

Is there any reason to continue support Post Gallery and / or Group Pictures features?

hexo-theme-next/layout/_macro/post.swig

Lines 268 to 281 in 8ee52fe

	{# Gallery support #}
	{% if post.photos and post.photos.length %}
	<div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
	{% set COLUMN_NUMBER = 3 %}
	{% for photo in post.photos %}
	{% if loop.index0 % COLUMN_NUMBER === 0 %}<div class="post-gallery-row">{% endif %}
	<img src="{{ url_for(photo) }}" itemprop="contentUrl"/>
	{% if loop.index0 % COLUMN_NUMBER === 2 %}</div>{% endif %}
	{% endfor %}
	{# Append end tag for `post-gallery-row` when (photos size mod COLUMN_NUMBER) is less than COLUMN_NUMBER #}
	{% if post.photos.length % COLUMN_NUMBER > 0 %}</div>{% endif %}
	</div>
	{% endif %}

As for me, this features too complicated with usage and no give good impact. For example, just with fancybox3 we can see something like gallery in right panel:

Also, we can try to find 3rd-party lib which will provide same feature and do it better.

Any comments or suggestions about this?

[stevenjoezhang]

Is there any reason to continue support Post Gallery and / or Group Pictures features?
For example, just with fancybox3 we can see something like gallery in right panel:

@ivan-nginx It's not only created by fancybox. It will no longer exist if Post Gallery or Group Pictures feature is removed. See:

hexo-theme-next/source/js/src/utils.js

Lines 8 to 46 in 8ee52fe

	wrapImageWithFancyBox: function() {
	$('.content img')
	.not(':hidden')
	.each(function() {
	var $image = $(this);
	var imageTitle = $image.attr('title') || $image.attr('alt');
	var $imageWrapLink = $image.parent('a');
	if ($imageWrapLink.length < 1) {
	var imageLink = $image.attr('data-original') || $image.attr('src');
	$imageWrapLink = $image.wrap('<a class="fancybox fancybox.image" href="' + imageLink + '" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>').parent('a');
	if ($image.is('.post-gallery img')) {
	$imageWrapLink.addClass('post-gallery-img');
	$imageWrapLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery');
	}
	else if ($image.is('.group-picture img')) {
	$imageWrapLink.attr('data-fancybox', 'group').attr('rel', 'group');
	}
	else {
	$imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default');
	}
	}
	if (imageTitle) {
	$imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');
	// Make sure img title tag will show correctly in fancybox
	$imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
	}
	});
	$('.fancybox').fancybox({
	loop: true,
	helpers: {
	overlay: {
	locked: false
	}
	}
	});
	},

Would be better to keep these features

[stevenjoezhang]

@ivan-nginx I found the reason why group-picture won't display in post-detail:

hexo-theme-next/source/css/_common/components/tags/group-pictures.styl

Lines 17 to 22 in 35180c2

	.page-post-detail .post-body .group-picture-column {
	float: none;
	margin-top: 10px;
	width: auto !important;
	img { margin: 0 auto; }
	}

It is broken by float: none; , which was added in: iissnan/hexo-theme-next@7aa1095#diff-b83e8966961c6a3d71d28e6cda1dd4feR17
I'm not sure if it's a bug or feature

[NashMiao]

Hi @ivan-nginx, this bug still exist... Maybe we need to fix it.

https://theme-next.org/docs/tag-plugins/group-pictures

This feature is useful. Sometimes, I hope my image show in the following style:

Here is the css in old version:

Here is the css in newest version:

So, this bug may cased by fancybox fancybox.image.

Now, I fix this bug by remove the css mentioned above:

.page-post-detail .post-body .group-picture-column {
  float: none;
  margin-top: 10px;
  width: auto !important;
  img { margin: 0 auto; }
}

When I use the css like this:

.page-post-detail .post-body .group-picture-column {
  width: auto !important;
  img { margin: 0 auto; }
}

The images show in the right way.

[stevenjoezhang]

Fixed in #929, #931

See also next-theme/hexo-theme-next@fc68fbe