Gutenslider adds a filter to WordPress that you can use to manipulate the default attributes of the slider. If you have never worked with filters before, fear not. It is easy. Read all you need for the beginning on the WordPress filter page for plugin developers or just follow along.

The filter Gutenslider adds to alter its attributes is called gutenslider_attributes and gets passed an array of $attributes with a type and a default value that looks something like this:

$gutenslider_attributes = array(
  'gsBlockId'           => array(
    'type'    => 'string',
  ),
  'media' => array(
    'type' => 'array',
    'default' => array(),
  ),
  'align'             => array(
    'type'    => 'string',
    'default' => 'none',
  ),
  'contentMode'       => array(
    'type'    => 'string',
    'default' => 'change',
  ),
  ... //many more attributes here
)

For reference, you can find the file in your gutenslider plugin directory in src/blocks/gutenslider/attributes.php.

Adding your custom filter

First take a look at all available attributes and their default values. When you found the attribute you want to change, add a filter to one of your included php files (e.g. the theme’s function.php):

add_filter(
    'gutenslider_attributes',
    function ($attributes) {
        $new_defaults = array(
            'lgBgColor' => array(
                'type' => 'string',
                'default' => '#ff00ff',
            ),
        );
        return array_merge($attributes, $new_defaults);
    }
);

You see, that the example code changes the default background color of the lightgallery named lgBgColor to #ff00ff instead of the default #ffffff defined in attributes.php.

As Gutenslider adds two blocks Gutenslider and Gutenslide (<- a block for a single slide), you might not be able to find the attribute you are looking for in the attributes file named above. Instead, look in the attributes.php of Gutenslide (<- no ‘r’) and use the gutenslide_attributes filter instead.

The Result

You can see in the screenshot a brand new slider with the default background color set to the value of the above example.

If you need any more help and you are a Gutenslider Pro user, do not hesitate to contact us using the contact form in your WordPress backend. Settings -> Gutenslider -> Contact Us (tab at top)

The post Setting Slider Defaults with PHP WordPress filters (Pro) appeared first on Gutenslider.

For this example we are building a simple Gutenslider that is controlled by two Gutenberg button blocks, that will initiate the previous and next slide functions.

Selecting the elements

To get the custom logic working, we need to select the correct DOM elements for the Gutenslider you want to control (1), the “Previous Slide” Button (2), the “Next Slide” Button (3), the “Go to Slide 3” Button (4). The Gutenslider plugin gives each slider a custom unique id that you can use as a queryselector in javascript. You can find that id in Block Settings > Advanced > Slider ID. In this example it is e.g.
gutenslider-7dyparcj6.

For the elements you want as controllers, it is easiest to give them a custom unique class. Almost all Gutenberg Blocks have a setting in the Block settings Advanced tab to add Additional CSS class(es) at the very bottom. We here chose gs-custom-next and gs-custom-prev.

The Code

We here show you the annotated javascript code you can insert into your page. If you have no idea how to do it, you can use the WPCode plugin, that allows you to insert arbitrary javascript into your page. Note that in that case you need to wrap the code with
<script type="text/javascript"> ... </script>

//test if your script was loaded - check browser console log
console.log( 'test custom scripting' );

//define variables for all your relevant elements
const customNextButton = document.querySelector('.gs-custom-next');
const customPrevButton = document.querySelector('.gs-custom-prev');
const controlledGutenslider = document.querySelector('#gutenslider-83tfsie32');

//test if all your elements were selected correctly
console.log( customNextButton, customPrevButton, controlledGutenslider );

//add event listeners to buttons
customNextButton.addEventListener( 'click', ( e ) => {
	if (
		controlledGutenslider &&
		controlledGutenslider.gutenslider &&
		controlledGutenslider.gutenslider.swiperInstance
	) {
		// go to next slide
		controlledGutenslider.gutenslider.swiperInstance.slideNext()
	}
})

customPrevButton.addEventListener( 'click', ( e ) => {
	if (
		controlledGutenslider &&
		controlledGutenslider.gutenslider &&
		controlledGutenslider.gutenslider.swiperInstance
	) {
		// go to previous slide
		controlledGutenslider.gutenslider.swiperInstance.slidePrev()
	}
})

Before publishing in production you should check:
– are the ids / classnames correct for your sliders and elements that control the block?
– have you removed all console.log calls from the code

If you are having issues implementing this, Gutenslider Pro includes support for custom scripting.

The post Gutenslider Custom Javascript scripting appeared first on Gutenslider.

Notice how the url changes and try copy pasting the url to start at the slide you left. You can also use links to navigate with buttons or arbitrary <a> elements on your website.

Hash Navigation Settings

To enable hash navigation you can go to Gutenslider Block Advanced Settings at the very bottom and check Enable Hash Navigation, which is disabled by default.

In Gutenslider Pro, you can additionally set a slider hash id: That is the id that shows in the browsers location, as long as a slide is active that does not have its own hash id.

In the example above we set it to holidays and you can see it on slides 3,4,5,6. The first to slides have their own hash id which you can find in the slides’ block settings. Check the example, where slide 1 has the id: flamingo and slide 2 the id beach.

In Gutenslider Free you can totally use hash navigation to set direct links to your slides, you can however not control the displayed text in the browser location bar.

That said, go ahead and hash navigation to your sliders if you feel like it.

The post Hash Navigation appeared first on Gutenslider.

• How to format your svg arrow files to seamlessly integrate with the backend
• How to write a WordPress filter to add your arrow to the Gutenberg UI Backend
• How to select your arrows for the new Slider

Depending on the complexity of your SVG and your knowledge this will take you probably 15-30min.

Custom Arrows is a Gutenslider Pro feature

Step1 – Preparing the SVG Graphic

For custom arrows, you will usually want to choose two svg graphics. One for the previous-arrow and one for the next-arrow. You can of course only pick / select one and mirror it then. For demonstration purposes we will use Adobe Illustrator for vector graphic manipulation but you can of course use other tools.

Trimming

After opening the svg, you will want to make sure no useless data is included. It will clutter the svg code you need later for integration into the slider. So on the layers view on the right, make sure no extra clipping paths, or layers are visible. If they are, you can delete them.

Exporting / Copying the svg code

To export the svg file: File -> Export -> Export As... then select SVG in the dropdown and the following window will appear.

You can leave all the settings as they are by default. You will not need the file, but only the code later, so you can click on Show Code to see the svg code and copy it to your dashboard.

Write a WordPress filter to add your custom SVG to Gutenslider

Gutenslider provides a filter called gutenslider_arrows which you can use to change the array of arrows provided by Gutenslider. After integration, Gutenslider UI will automatically show the selection option in the Block Settings and you can choose your newly generated arrows.

You need to add the following php code to one of your theme’s .php files (if you are a beginner, you can safely add it to functions.php in your theme base directory.

function my_custom_arrows( $arrows ) {
	$arrows[] = array(
		'value' => 'my-custom-arrow',
		'label' => 'Custom Arrow',
		'prev'  => '<your svg code for prev arrow here>',
		'next'  => '<your svg code for prev arrow here>',
	);
	return $arrows;
}
add_filter( 'gutenslider_arrows', 'my_custom_arrows' );

You see that it is straight forward. You create a filter function my_custom_arrows which changes the $arrows variable. The item you add is an array with the keys:

Save the file and continue with pasting your svg code to the next and prev sections. For a seamless integration please also see the next step on how to format your svg.

Formating your SVG

There are two things you want to take care of, before pasting your code:

1. The size of the svg
2. The color of the svg

We will refer to the following example code which was the one copied from the AI svg above.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 817.95 1792.69"><path class="arrow" d="M824.62,1753.28c1.08,29.3-20.31,71.77-54.87,58.43-8.6-3.07-15.57-9.79-22.11-16.2-17.82-17.78-35-36.19-52.85-54-52.11-53.06-101.38-108.8-149.57-165.41q-52.1-58.76-104.08-117.6c-34-41.44-66.12-84.34-100.83-125.17-90.39-106.67-178.1-215.53-267.54-322.94C61,995,50.16,978.94,39.42,962.81,16.11,935.27.25,899.57,9.27,863.14c3.83-19.31,14.6-36,28-50,17-19,30.74-40.6,47-60.2,52.5-61.73,104.52-124,163.16-180,27.46-31.23,51.6-65.26,80.83-95,53.29-55.65,93.31-108.85,145.17-163.65,28.59-33.76,56-68.51,86.15-101,33.23-36,67.46-70.85,102.18-105.36,26.32-26.27,49.48-56.14,78.37-79.61C786.78.25,820,66,812.63,105.94c-1.46,34.29-27.58,56.91-50.62,78.87-47.17,50.21-96.72,98-143.59,148.47C583.28,371.41,553.39,414,517,451c-33.61,39.94-66.52,80.57-102.37,118.58-36.24,37.18-67.74,78.45-102,117.29-15.83,18.27-34.42,33.78-51.62,50.68-44.25,48.85-89.82,96.77-129.91,149.17,155.09,184,302,375.11,462.79,554.21,47.38,51.42,93.38,104.06,140.31,155.91C773.38,1641.63,822.89,1690.12,824.62,1753.28Z" transform="translate(-6.7 -21.54)"/></svg>

There is a lot going on here but we marked the important parts.

To make sure the default size is correct, you want to make sure you have width and height properties in your svg and they are set to 24, which is the default width and height of all our arrows. If your dimensions are not 1:1 you can adjust accordingly. The user can still change the size in the backend. But this is to make sure that arrows are not inserted too big at the beginning.

Second, to allow users to select the arrow color from the Block Settings, you will want to make sure that all paths that show the arrow lines have the class="arrow" property applied.

There is one more class you can use: bg if you add this class to a path you will be able to change the svg color with the Arrow Background Color Setting in the UI later. If you have no background path you can ignore this.

Finishing Up

See your work in action.

If you have any questions and are a pro or expert user, do not hesitate to write us a mail to support@gutenslider.org. We are happy to help

The post Add Custom Arrows to your WordPress Sliders appeared first on Gutenslider.

tl;dr

1. Download the Regenerate Thumbnails plugin and execute it.
2. Gutenslider will add 4 new image sizes with widths: 1600, 2200,2800, 3400, 4000
3. If it does not work add your own image sizes.

Generating Thumbnails

When you upload images to WordPress, many image sizes are generated automatically in order to serve only the quality needed for different screen sizes or use cases. These 4 image sizes are generated automatically:

• Thumbnail size (150 x 150 pixels)
• Medium size (maximum 300 x 300 pixels)
• Large size (maximum 1024 x 1024 pixels)
• Full size (the original size of the uploaded image)

WordPress does this, so you don’t have to keep resizing images manually and to ensure the best image size is selected for different locations on your website.

For example, the image size used in the header of a blog post will be different from the blog post’s thumbnail image.

You see that those image sizes are not suited for large screens as on all screens wider than 1024px the full size image will be served. And not only that, depending on the theme you use, the theme authors can have written code, that tell your WordPress

Changing WordPress Default Image sizes

In addition to the default image sizes, you can also upload your custom image sizes to fit your needs.

Here’s how:

1. Go to your WordPress Admin Dashboard
2. Click on Settings – Media
3. In the Media Settings, adjust the default image settings to fit your preferences
4. Click Save Changes to confirm

The other way to do it is by adding the Regenerate Thumbnails plugin. As Gutenslider already adds more image sizes to your page, it will most likely just work after running the plugin, if not, please contact us in the WordPress support forum.

The post Full Quality Images with Gutenslider appeared first on Gutenslider.

This headline

Is positioned in a column block

Watermelon

This is the next slide with the same 50/50 column layout

Gutenslider allows you to create complex layouts with all the Gutenberg blocks you like and want to use. So you can add the `columns` block e.g. to get the layout you want. See the example below

The post WordPress Slide Text next to Image appeared first on Gutenslider.

See this video on how to navigate in Gutenslider and Gutenslide blocks and how to change the order of the slides:

As you see, you can also select the order of the media slides by selecting them in the order you want them to appear.

We will improve the process of changing the slide order in future versions of Gutenslider. We are currently considering two improvements:

1: to have a special block navigation toolbar item like in the latest version of the navigation block:

2: To have a Panel in the block settings that lets you reorder slides.

What do you think or like better? Until that please use the way outlined in the video above.

The post Changing the slide order appeared first on Gutenslider.

Gradient Overlays

Gradient Overlays

You have to go to the Block settings of the individual slides which you can either reach from the block outline from the top toolbar, or by changing Gutenslider to “edit” mode by clicking the pen icon.

Then on the block settings of the slide you want to change you can pick from 5 options in the slide

The post Adding Background Overlays appeared first on Gutenslider.

Live example of text only slides with no background media

The post Adding Text only Slides appeared first on Gutenslider.

We liked the idea of using existing fields for Gutenslider, which is especially useful for those of us, captioning each photos in their library, for example artists, photographs and other pro WordPress users. So look what we did in the latest Gutenslider release.

Gutenslider Free

1. Make sure your Media has captions ( titles, descriptions if you want to use them too).
2. Make sure the slider content mode is set to Changing Content
3. Click the Edit Content button in the block toolbar
4. For each individual slide, select the placement and the format of the automatic caption

Gutenslider Pro

In Gutenslider Pro and Expert you have the option to bulk edit slides. Especially the content placement and the captions can be edited by changing settings on the parent slider block instead of having to change each individual slide block.

1. Make sure your Media has captions ( titles, descriptions if you want to use them too.
2. Select the Gutenslider block
3. Set the Content Alignment to where you like it
4. In the block settings in the Advanced section. Find the Automatic Captions selector and set it to your desired format

Unsplash Automatic Captions

As Gutenslider works great with unsplash, and they encourage you to add attributions to the images you get from there, and we at Gutenslider love attributing free content creators, automatic attribution works too now.

undefined – – undefined

undefined – – undefined

undefined – – undefined

undefined – – undefined

undefined – – undefined

The Blog Photo is by Nathan Dumlao on Unsplash

The post Automatic Photo Captions appeared first on Gutenslider.