DeLight turns a standard WordPress gallery into a slider. You create the gallery in the usual way, then choose one of the three DeLight gallery types in the gallery settings. Visitors browse the images by clicking or swiping, or the images play by themselves.
DeLight only works with the classic WordPress gallery. The ‘Gallery’ block in the block editor does not become a slider, so use the ‘Classic’ block as described below.
How do you add a slider to a page?
- Click the plus icon in the top left corner of the editor and select ‘Classic’.
- Click ‘Edit contents’.
- In the ‘Classic Editor’ window, click the ‘Add Media’ icon in the toolbar.
- Select ‘Create gallery’ on the left.
- Open the ‘Media Library’ tab and click each image that you want in the slider. New images can be added under ‘Upload files’.
- Click ‘Create a new gallery’.
- Under ‘Gallery Settings’, select one of the DeLight types in ‘Gallery type’.
- Click ‘Insert gallery’.
- Click ‘Save’ in the ‘Classic Editor’ window, then click ‘Publish’, or ‘Save’ if the page has already been published.
If your website uses the classic editor instead of the block editor, click the ‘Add Media’ button above the editor and continue with step 4.
Which DeLight gallery type should you choose?
‘DeLight on-page slide’ moves the images sideways. Visitors click the right half of an image to see the next one and the left half to go back, and on a phone they swipe.
‘DeLight on-page fade’ works in the same way, however each image fades into the next one instead of sliding.
‘DeLight automatic fade’ plays by itself, without arrows, as each image fades in on top of the previous one. This type suits a calm series of photographs at the top of a page better than a portfolio that visitors want to study one image at a time.
How do you change the order of the images in a slider?
The slider shows the images in the order of the ‘Edit gallery’ screen. Drag an image to a new position there, or click ‘Reverse order’ to turn the whole series around.
What do the settings of a slider do?
Each slider has its own settings in ‘Edit gallery’, below ‘Gallery type’:
- ‘Slide numbers’ shows numbers above or below the images, or small thumbnails below the images, or nothing at all. Arrows to go back and forward appear next to the slide numbers.
- ‘Image captions’ shows the caption of each image below the image. You can type or change a caption below each image in ‘Edit gallery’.
- ‘Loop’ set to ‘Yes’ continues with the first image after the last one. Set to ‘No’, the slider stops at the first and the last image.
- ‘Transition speed’ sets how quickly one image changes into the next, from ‘Fast (500ms)’ to ‘Slowest (3000ms)’. ‘Off (use speed from DeLight settings)’ uses the default speed of your website. In an automatic fade, a slower speed makes each image fade in more slowly.
To change the settings of an existing slider, select the ‘Classic’ block that contains the slider and click ‘Edit’ in the block toolbar. Then click the gallery, click the pencil icon and make your changes in ‘Edit gallery’.
Where are the default settings for new sliders?
Go to Settings → DeLight Image Slider. The settings on this page are used for every new slider: ‘Slide numbers’, ‘Show image captions’, ‘Slide loop’, ‘Transition speed’ and ‘Image width’. Click ‘Update DeLight Settings’ to save your changes.
Set ‘Image width’ to the width of the content column of your theme, so that the images are sharp without being larger than necessary. ‘Full Width’ uses the original images.
A slider keeps the settings it was created with. Changing the default settings later does not change existing sliders, with one exception: a slider set to ‘Off (use speed from DeLight settings)’ always follows the current default speed.
Why are the thumbnails below a slider cropped to squares?
DeLight creates its own image sizes when an image is uploaded. Images that were uploaded before DeLight was installed or updated do not have these sizes yet, so the thumbnails fall back to the square thumbnails of WordPress, and the slider loads the full-size originals, which makes the page slower.
Go to Settings → DeLight Image Slider and click ‘Regenerate thumbnails’ once. On a large Media Library this can take several minutes. The message ‘All thumbnails regenerated successfully.’ appears when WordPress has finished.
If a slider on your website does not behave as described here, send us an email at hello@fourteenrockets.com with the address of the page.
