How to display image slides / slider in Redux Framework on WordPress

I like Redux Framework (formerly NHP Options) for easily building an interface for theme customization options, however I think they are super mean in providing no documentation (and no very clear documentation) on displaying / rendering the values on your webpage. It’s great that they are all experts in PHP codes and arrays, but not all of us are… so why keep it elitist when these questions are being asked multiple times already in their support forums.

Anyhow, it comes with a neato image slider option – so you can make like an intro slideshow for your website pretty easily. I combined the slider with Fotorama.io (my image gallery of choice).

By default your options are called $redux_demo, but i changed mine for a client site i’m working on so mine is called spafiesta_options. In the Redux Framework plugin folder, there’s a sample_config.php file which you can customize. Do a search for the ‘slides’ section, and you’ll find by default the ID for that feature is called ‘slides’.

Below, I’m saying for each slide in the ‘slides’, to display it inside an img tag. Wrap it in your image gallery of choice, and voila! done!

			<!-- Fotorama -->
			<div class="fotorama" data-width="100%" data-fit="cover" data-autoplay="5000" data-height="400" data-max-width="100%" data-ratio="500/333" data-trackpad="false">
				
				<?php  global $spafiesta_options;
				foreach($spafiesta_options['slides'] as $slide) {
				  echo '<img src="' . $slide['image'] . '">'; 
				}
				 ?>
		
			</div>

 

(Hint for the solution after 1 hr of looking was here: https://github.com/ReduxFramework/redux-framework/issues/352)

2 thoughts on “How to display image slides / slider in Redux Framework on WordPress”

Leave a Reply