Code Food Travel repeat!

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)

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

2 Comments

  1. coastweb · April 7, 2014 Reply

    Thanks for posting this! I am in the same boat. Redux is great, except for the minimal documentation.

  2. coastweb · April 7, 2014 Reply

    Great post, Redux is great except for the miniaml documentation

Leave a Reply

%d bloggers like this:
Read previous post:
How to Load & Use Photoshop Actions to Automate Photo Resizing

I'm currently writing an email to a client to explain how to use the photoshop action I just created for...

Close