Code Monkey home page Code Monkey logo

gallery-types's Introduction

Gallery Types

A plugin that allows you to define a theme specific gallery type. Props to Jetpack for their Gallery module.

Add custom gallery types

By default the plugin supports only one type, WordPress default thumbnail grid. To add more types you can use the gallery_types.types filter.

add_filter( 'gallery_types.types', function( $types ) {
	return array_merge( $types, [
		'slider' => [
			'label' => __( 'Slider', 'gallery-types' ),
			'supports_columns' => false,
		],
	] );
} );

Each type has a key (slider) with two values: label for the label displayed in the select menu and supports_columns to define whether the type supports columns. If supports_columns is set to false the columns option will be hidden.
Once a user selects a type the shortcode will get a new type attribute with the key of a gallery type as value.

To change the default selected type you can use the gallery_types.default-type filter.

Customize gallery output

This plugin does not change the ouput of the gallery shortcode. That needs to be part of your theme and could be something like this:

/**
 * Customizes the gallery shortcode output if the type attribute is set to 'slider'.
 *
 * @see gallery_shortcode()
 *
 * @param string $output The gallery output. Default empty.
 * @param array  $attr   Attributes of the gallery shortcode.
 * @return string HTML content to display gallery.
 */
function required_gallery_shortcode( $output, $attr ) {
	$is_slider = false;
	
	// Check if the type attribute is set.
	if ( isset( $attr['type'] ) && 'slider' === $attr['type'] ) {
		$is_slider = true;
	}

	// Return the default gallery if the type attribute isn't set.
	if ( ! $is_slider ) {
		remove_filter( 'post_gallery', 'required_gallery_shortcode', 10 );
		$output = gallery_shortcode( $attr );
		add_filter( 'post_gallery', 'required_gallery_shortcode', 10, 2 );
		return $output;
	}

	// Override shortcode attributes.
	$attr['size']    = 'thumbnail';
	$attr['link']    = 'file';
	$attr['columns'] = 0;

	// Get default gallery output and wrap it in a custom container div.
	remove_filter( 'post_gallery', 'required_gallery_shortcode', 10 );
	$output = gallery_shortcode( $attr );
	add_filter( 'post_gallery', 'required_gallery_shortcode', 10, 2 );

	return "<div class='gallery-slider'>$output</div>";
}
add_filter( 'post_gallery', 'required_gallery_shortcode', 10, 2 );

Contributing

Build Task

To update the minfied JavaScript file you need Node.js installed.

# to install dependencies run:
npm install

# to update the file run:
npm run build

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.