Bingo Plus rewards login registration Philippines.Claim Your Free 999 Pesos Bonus Today

(@chrisfo)

I’m trying to use the lightbox (LightGallery) included in a Onepage theme (Onepress) also on the standard Gutenberg Block Gallery (wp-block-gallery) to avoid additional plugins and code.

Sample of the working homepage onepage gallery section code:

<div class="gallery-content">
	<div class="gallery-grid g-zoom-in enable-lightbox g-col-3">
		<a class="g-item" title="A" href="/wp-content/uploads/a.jpg">
			<span class="inner">
				<span class="inner-content">
					<img src="/wp-content/uploads/a-480x300.jpg" alt="a" />
				</span>
			</span>
		</a>
		<a class="g-item" title="b" href="/wp-content/uploads/b.jpg">
			<span class="inner">
				<span class="inner-content">
					<img src="/wp-content/uploads/b-480x300.jpg" alt="b" />
				</span>
			</span>
		</a>
	</div>
</div>

Gallery page code with attempt to call the function with the “enable-lightbox” style class:

<figure class="wp-block-gallery columns-3 is-cropped enable-lightbox">
	<ul class="blocks-gallery-grid">
		<li class="blocks-gallery-item">
			<figure>
				<a href="/wp-content/uploads/a.jpg">
					<img class="wp-image-117" src="/wp-content/uploads/a.jpg-1024x682.jpg" alt="a" data-id="117" data-full-url="/wp-content/uploads/a.jpg" data-link="/wp-content/uploads/a.jpg" />
					
				</a>
				<figcaption class="blocks-gallery-item__caption">
					a
				</figcaption>
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<a href="/wp-content/uploads/b.jpg">
					<img class="wp-image-124" src="/wp-content/uploads/b-1024x640.jpg" sizes="(max-width: 1024px) 100vw, 1024px" srcset="/wp-content/uploads/b-1024x640.jpg 1024w, /wp-content/uploads/b-300x188.jpg 300w, /wp-content/uploads/b-768x480.jpg 768w, /wp-content/uploads/b-1536x960.jpg 1536w, /wp-content/uploads/b-480x300.jpg 480w, /wp-content/uploads/b-640x400.jpg 640w, /wp-content/uploads/b.jpg 1800w" alt="b" data-id="124" data-full-url="/wp-content/uploads/b" data-link="/gallery/b/" />
				</a>
				<figcaption class="blocks-gallery-item__caption">
					b
				</figcaption>
			</figure>
		</li>
	</ul>
</figure>

By adding the frontpage code as a HTML element in the subpage it did work as on the frontpage.

I was also not able to get it to work on <div class=”wp-block-image enable-lightbox”>
Best solution would be a function in the child theme so that all galleries and images use this lightbox, but here I would need advise to possibly get to that.

I wonder why “enable-lightbox” class works on the DIV element in the frontpage while it seems without effect on the FIGURE and DIV element in a subpage?
Has someone experience and was able to do this or a similar lightbox by class?

This topic was modified 4 years, 11 months ago by ChrisFo.
This topic was modified 4 years, 11 months ago by ChrisFo.
This topic was modified 4 years, 11 months ago by ChrisFo.

Viewing 1 replies (of 1 total)

Thread Starter ChrisFo
(@chrisfo)

4 years, 11 months ago
Wrapping this Tag around Gallery and Images does the trick:
<div class=”gallery-content”> … </div> + “enable-lightbox” CSS class to the gallery and image block.
Found two interesting links:
Simple: https://www.isitwp.com/automatically-wrap-images-in-the_content-with-custom-html/
StartEnd: https://wordpress.stackexchange.com/questions/279861/wrap-a-span-tag-around-authors-post-count

I’m looking how I could add this to the child functions.php for posts/pages:
```
function filter_figure($content){
    return preg_replace('<figure class="wp-block-gallery', '<div class="gallery-content"><figure class="wp-block-gallery enable-lightbox', $content);
    return preg_replace('figure class="wp-block-image', '<div class="gallery-content">figure class="wp-block-image enable-lightbox', $content);
    return preg_replace('</figure>', '</figure></div>', $content);
}
add_filter('the_content', 'filter_figure');
```
Unfortunately the closing tag must be connected to the two possible opening tags and I’m not able to code in this logic by myself (only very mild PHP knowledge).

Probably some Gallery plugins compatible to Gutenberg have this coded in, but I do not think I’m able to pull this out and edit to work in the child functions.php
Thanks if you can give hints.

Viewing 1 replies (of 1 total)

The topic ‘Using Theme Lightbox on wp-block-gallery, wp-block-image’ is closed to new replies.

Tags