Appending Markup to Slides in Soliloquy

This is a simple little snippet. On a project I’m working I had a need to include social share buttons with each item in a carousel slider.

Anyone who asks me knows that I’m a big fan of Soliloquy, from Thomas Griffin Media. I’m a fan because it’s a simple solution with some nifty add-ons and does what I need it to without too much fuss.

With the 2.x update Soliloquy added some filters to their plugin, making adding your own markup to your slides easier.

/* Filter to Append HTML to Slides
============================================= */
add_filter( 'soliloquy_output_slide', 'tgm_soliloquy_custom_html', 10, 4 );
function tgm_soliloquy_custom_html( $html, $id, $image, $data ) {
 
 $slider_id = $data['id']; // Get Slider ID
 $slider_img= $image['src']; // Optional; Getting Image URL from slider object
 
 if ( '1937' != $slider_id ) return $html;  // If the ID doesn't match the one we want to modify, return the default HTML output. Change 1937 to your slider ID.
 
 ob_start(); ?>
 
 // Your Custom Markup to append goes here.
 
 

$data[‘id’] grabs the value of the ID slider you wish to target. You don’t need to do anything with this if you plan on appending custom markup to all of your slides.

Since I’m targeting only one slide I’ll be using the conditional statement below.

if ( ‘1937’ = $slider_id ) return $html;

Plugin your own slide ID in place of 1937.

We’re using an output buffer to hold our markup, clean it up/sanitize it and then appending it to each slider object.

Give it a spin on your next project.

My Review of Thrive Content Builder

Thrive Content Builder is a front end editor for WordPress. A tool like this is something valuable for all users. Why? For me, I want to build a decent looking landing page that doesn’t take a lot of time to set up. For less experienced users, it’s a great way to feel empowered over their content. So I saw this mentioned in the Orange County WordPress Facebook Group. I jumped-in and figured it couldn’t be any worse than what’s already out there.

So what was I going to try to build? Something of a landing page like what we see below.

Screenshot 2014-04-28 16.54.18

So what’s the problem?

If you watch the video that Thrive Themes put out for their Content Builder, they hit on the reasons why existing page-builder plugins suck. Specifically they show the awesome content screen with all the shortcodes on it, like this one here:

Screenshot 2014-05-04 23.05.01

Change the color of the borders now… Which is an over simplification of a general problem many have with builders such as Visual Composer. Layouts are achieved via an absurd number of shortcodes. Don’t get me wrong, I think Visual Composer is a good tool and my clients that use it regularly are just fine with it… When it doesn’t break after an update, which has been my frustration with that tool.

How is Thrive Content Builder Different?

Thrive Content Builder says that’s not a problem with their tool. And I guess that’s mostly true. But they still use shortcodes, too. They just present the edited content differently.

Screenshot 2014-04-28 16.30.01

The editing happens on the front end only, so you can’t use the standard editor AND this plugin. When you go to edit that page, there’s no content in the editor at all. It’s like Velocity Page in that regard.

What Does it Look Like?

Screenshot 2014-05-04 23.15.26

Nothing too crazy here. Just a palette/panel, which you can set to the right, if you want. From that palette is how you will build your pages.

You can click an element for it to pop on the screen, alternatively you may drag and drop that element where you need to.

 

How Well Does it Work?

My first impression is positive. It works pretty well, really well, really. I like how easy it is to set a page up. Clicking and dragging/dropping elements as-needed is a snap. It’s fairly easy to change an element’s attributes when you need to…

A few quick hits

  1. Works on any Post Type
  2. Set up simple landing pages easily.
  3. Only affects the Content Area, not the header or footer, of a given page.
  4. Page elements are responsive out of the box
  5. You may use your own classes and IDs on the page elements you create, to better integrate with your site’s design scheme.
  6. You can grab the HTML generated by Thrive Content Builder and paste it into the classic back-end editor if you’d rather not continue editing in the builder. That’s nifty!

 

Clicking any on-page element within the Content Builder pops-up an editor like below…

Screenshot 2014-05-04 23.28.55

That’s all well and good and is about what I’d expect. It’s a positive enough user experience.

Quickly build popular page elements, like Pricing Boxes.

Screenshot 2014-04-28 16.33.13

Yep, I hate the shit out of pricing boxes, but this thing handles them well and changing colors is possible with a single click, or entering the actual hex value. So that’s nice. There’s some other pre-built page elements in there too, such as feature grids, tabs, accordions and a couple other items. Yay!

A couple of things that I see as issues:

  1. The standard Youtube and Video share URLs do not work in Thrive’s content builder at this time. You need to grab the actual embed code, instead. They have mentioned they are working that issue out.
  2. Their editor doesn’t seem to handle existing content. You can design and build elements around existing content, but you can’t otherwise interact with it within Thrive Content Builder. You need to go to the edit screen for that to work.
  3. You will run into issues where certain page elements can’t be clicked on to change. In particular bulleted lists are problematic. You’ll notice that the check mark bullets on the right are blue. I couldn’t change their colors because I simply couldn’t click that element (and they are clickable).

How Did My Landing Page Build Go?

You tell me! http://alexvasquez.wpengine.com/test-landing-page/ — That page took just a shade under 5 minutes to build. If I was building something using real content, I could build this page out in 5 to 10 minutes, just in placing page and text elements. I think that’s pretty good!

All in all, I think Thrive’s a good solution for front-end editing; it’s still got a ways to go, but I think it’s ready for use now and support has been responsive thus far.

Check it out for yourself and let me know what you think. Thrive Content Builder Link.

 

Soliloquy Dynamic Slider for Current Post and Exclude an ACF Image ID

It’s not as though it was “really” a problem. But that I couldn’t figure it out caused me to lose sleep. I hate that shit.

So what was going on?
I am using Soliloquy along with the Dynamic Addon to automagically create sliders from attached images to the current post.

function digisavvy_dynamic_slider() {
	global $post;
 
	$dg_post_id = $post->ID;
	if ( function_exists( 'soliloquy_dynamic' ) ) soliloquy_dynamic( array( 'id' => "$dg_post_id" ) );
 
}

This snippet grabs the current post ID and stores it in the $dg_post_id variable. Nice.

The problem:
This pulled all the attached images for the current post, as expected. What I didn’t expect was that it pulled an image from an ACF (Advanced Custom Fields) image field I’d set up. Not cool. So I needed to exclude that image from getting pulled into the slider.

function digisavvy_dynamic_slider() {
	global $post;
 
	$imageArray = get_field('project_cover_image'); // Array returned by Advanced Custom Fields
 	$imageID = $imageArray['id']; // Grab the field's 'ID' from the array
 
	$dg_post_id = $post->ID; // Grab the current post's 'ID'
	if ( function_exists( 'soliloquy_dynamic' ) ) soliloquy_dynamic( array( 'id' => "$dg_post_id", 'exclude' => "$imageID" ) );
 
}

Same code as the previous snippet, except now we’re grabbing data out of the ACF field’s array. First, the field had to be set to ‘Image Object’ as it stores all the gooey meta-data we need.

Next we set the field and store it to the $imageArray variable. And, then, using setting the $imageID variable, we simply pull the ‘ID’ from the image object array and then set the variable inside Soliloquy function for the exclude parameter.

Special props: http://www.aliciaramirez.com/2014/03/advanced-custom-fields-image-object-tutorial

Justin Tadlock’s ‘Whistle’ Plugin…

I thought I’d share this useful little nugget of plugin wizardry, from Justin Tadlock called “Whistles,” which you can download here. What is/are Whistles? Whistles is a plugin that provides simple management and creation of Accordions, Tabs and Toggles. Most people like these features and make use of them on their WordPress sites. A lot of people (myself included at several points) have used plugins like “Styles with Shortcodes” or “All-in-One Shortcodes” to handle this. The problem with these plugins is that they tend to include a bazillion other shortcodes beyond what you actually need. Bah-hooey, I say!

## Is it any good? I think so. Instead of placing a bunch of content into your shortcodes…

Whistles you simply add ‘Whistles.’ And, really, Whistles are a kind of like a Custom Post Type and each Post can represent a single tab, accordion or toggle. A single Whistle is just like any standard Page/Post; you can insert any type of content from video embeds, to images and just plain ol’ text. Definitely worth checking out. In fact, I may add this plugin to ‘Some Like it Neat.’ We’ll see…

I think this is a really clever solution to the issue of an ‘all in one’ shortcode plugin solution. I think it’s clever because it doesn’t follow the route of other plugins before it that provide a thickbox with dropdowns and text areas to allow for input of content which is then output into the editor as a mixed bag of shortcodes and content; it’s kind of a mess and sucks to maintain. Tadlock’s approach is, to me, more intuitive in that it “feels” more like Core WP. You have a post type, add a whistle, assign a group and then add said Whistle to your posts or pages. It’s so gosh darn clever! Love it!!

Have you checked it out? What are you thoughts?