The post awd appeared first on Gutenslider.

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.

Slider Example

Different Arrow Styles

You can use any of the the 11 available arrow styles Gutenslider offers or even use your own svg as described in this post. This applies not only to the shape of the arrows that follow the mouse, but also arrow color, arrow background color and arrow size. The first example just displays another arrow style and arrow size.

The second example shows a different slider mode with automatic slides per view and a black and white theme, where the arrows also have the mix blend mode set to “difference”.

The post Arrows Follow Mouse WordPress Slider (Pro) 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.

See lightGallery and Gutenslider in action

Different slider, different lightgallery transition / color. See below for all available settings.

All available settings in Gutenslider Pro

• Lightgallery Background Color
• Lightgallery Font / Icon Color
• Thumbnails
• Zoom Icon
• Show Counter
• Lightgallery Transition (pick from >20)
• Lightgallery Media Title (which title should be displayed below the image)
• Lightgallery Media Caption (which caption should be displayed below the image)

More Info about Gutenslider Pro

Gutenslider Free Lightgallery Settings

You also get a full working lightgallery implementation on all your slider images starting from Gutenslider 5.4.0. If you want more controls over the lightgallery. Pick the Pro version.

And onle last example showing image titles from the media library (Pro)

Portraits

Portraits

Get started by creating your sliders now with Gutenslider free from the WordPress plugin directory or with advanced features and Gutenslider Pro

The post Gutenslider x lightGallery 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.

WordPress 5.8 offers native webp support out of the box when your webserver has the imagemagick plugin installed.

We checked that everything is also working fine with Gutenslider. All you have to do is upload your .webp images in the Media Library or directly in Gutenslider to get you started saving lots of KB. The below image slider uses WordPress and Gutenslider to serve beautiful compressed webp images.

The post Gutenslider supports webp images 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.