Skip to content

Instantly share code, notes, and snippets.

@thomasgriffin
Created June 10, 2014 16:03
Show Gist options
  • Save thomasgriffin/018eb3183e83d265c4ee to your computer and use it in GitHub Desktop.
Save thomasgriffin/018eb3183e83d265c4ee to your computer and use it in GitHub Desktop.
Use Soliloquy image as a background slide instead of regular image.
<?php
add_filter( 'soliloquy_output_item_style', 'add_soliloquy_bg_image', 10, 4 );
function add_soliloquy_bg_image( $style, $id, $image, $idata ) {
$style = 'background-image:url(' . $image['src'] . ');';
return $style;
}
add_filter( 'soliloquy_output_image_slide', 'remove_soliloquy_slide_image' );
function remove_soliloquy_slide_image( $imagehtml ) {
$imagehtml = '';
return $imagehtml;
}
@akyusa01
Copy link

Hey :) Please remember, by removing the images from the slider, the main container (the list item) may not be able to calculate the height so you may have to add some custom CSS to add a height to your list items like this:

ul.soliloquy-slider li.soliloquy-item { height: 400px !important; background-size: cover; }

By using the background-size: cover; you're automatically telling Solioquy to have the background image stretch to fit the width and height of the container! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment