Change wp-block-gallery output based on class

  • At the moment, when you add an image gallery with WordPress, it’s output looks something like this:

    <figure class="wp-block-gallery has-nested-images columns-3 is-cropped">
	<figure class="wp-block-image size-thumbnail">
		<a href="IMAGE" etc etc></a>
	</figure>
</figure>

    What I would like to achieve is that when I add an image gallery and give it the class of “flexslider”, both through WordPress, that the output will be like this instead:

    <div class="flexslider">
	<ul class="slides">
		<li>
			<figure class="wp-block-image size-thumbnail">
				<a href="IMAGE" etc etc></a>
			</figure>
		</li>
	</ul>
</div>

    At least, I would like to know what file I need to look into to change this output. So far, I am not sure where to find this.

    Alright, I hope someone is capable of helping me here.

    Thank you and take care ??

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey,

    I believe you can use block filters to change class names like so. In this case you’d need to modify the Gallery and Image blocks.

    Another option would be to install a slideshow block plugin?

    I don’t know of any blocks that change their structure based on classes names. To create one would be a little bit of an undertaking. You would have to set up a Nodes environment. There is a nodes plugin you can use to set up the environment for Gutenberg. To do it manually is a big undertaking if you haven’t done it before. You have to change REACT preset to use the Gutenberg environment. It is not an easy undertaking. I’ve only built a few small blocks. After you do it once you can copy your environment if you do it manually. But the Gutenberg nodes adding is far easier.

    Thread Starter RayR75

    (@rayr75)

    Thank you guys, I will definitely check it out. For the time-being, I have found a solution with JQuery by swapping the tags and wrapping them.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change wp-block-gallery output based on class’ is closed to new replies.