• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Elias Interactive

We Grow Beautiful Websites

  • Blog
  • Show Search
Hide Search

Luke Whitson

Sorting Data from Custom Fields in WordPress

Luke Whitson · Nov 17, 2009 · 9 Comments

With the redesign of the Ei Site, we wanted to take advantage of certain features native to WordPress, one of which was Custom Fields.

Having a custom web design based on the needs of your particular business and customers optimizes conversion rates of site visitors, a key aspect of growing your business and brand presence online

We wanted a simple way to display our client list using Custom Fields. Using built-in WordPress functions, it is pretty simple to pull information from Custom Fields. With Custom Field structure like this:

Name: client
Value: Name|Work_Done|Description|URL

You can use the get_post_meta() function to loop through all of the ‘client’ fields and pull the value for each and display to your page.

ORIGINAL CODE:

<?php
	$allOptions = get_post_meta($post->ID, 'client', false);
	if($allOptions) {

		foreach ($allOptions as $option) {
			$fullValue = explode ("|", $option);
			$name = $fullValue[0];
			$work = $fullValue[1];
			$text = $fullValue[2];
			$url = $fullValue[3];
		}

	}
?>

The problem comes if you want to control the way the output is displayed. The get_post_meta() function does not provide a SORT property. So in order to control the order of display, we simply added an additional component to the VALUE field, a ‘sort order’.

Name: client
Value: Sort|Name|Work_Done|Description|URL

Rather than just display the information in the initial foreach() loop, we stored the data into a new array, based on the SORT item for use later.

NEW CODE:

<?php
	$client_array = array();
	$allOptions = get_post_meta($post->ID, 'client', false);
	if($allOptions) {
		foreach ($allOptions as $option) {
			$fullValue = explode ("|", $option);
			$order = $fullValue[0];
			$client_array[$order] = $option;
		}
	}
	rsort($client_array, SORT_NUMERIC);
?>

With the data now stored in an sorted array, we can now loop through the new array and display the information in any order we want.

Integrate InLine Flash FLV Videos with JQuery "Lightbox" Plugin – FancyBox

Luke Whitson · Jul 12, 2009 · 24 Comments

I recently spend some time integrating an existing Flash FLV video, from a third party, into an existing application using the JQuery “Mac-Style Lighbox” plugin, FancyBox. Within FancyBox, the existing FLV/JavaScript code provided to us worked properly on all browsers that I tested, with the usual exception, IE6. Upon further investigation, I found that it not only did not work on IE6, but IE7 and IE8 as well. While IE6 is to be expected, 7 and 8 were not.

The easy solution would have been to require the third party to re-export the video into a more usable format for our purposes. But I wanted to see what it would take to get the current code to work within our implementation.

I looked over some old code where I had integrated FLV video and found a simple difference. The provided code used JavaScript to embed the Flash object, similar to the following:

<script type="text/javascript">
swfobject.embedSWF(
'player.swf',
{file:'/video.flv',width:'407',height:'320'}
);

</script>

While this code worked fine when embedding the video directly into a page, it did not work in our FancyBox window when viewing with IE.

I am sure there are other solutions, but the quick solution I found was to simply embed the code in the standard Object/Embed method used to embed other video formats, rather than using JavaScript to embed the video file:

<object ...>
<embed
src="player.swf"width="407"
height="320"
wmode="transparent"
flashvars="file=video.flv&autostart=true"/>
</embed>
</object>

FancyBox is a very nice “lightbox” plugin for those using the JQuery library. If your FLV video is not working in IE with your lightbox implementation, try changing the way it is embedded into the page, it may just be as simple as that.

UPDATE:

Here is a little more elaboration on the code I used to get the flash working.

First, make sure you have the “custom.js” file created that makes the function calls for each lightbox that you want to use. In that file you will want a line that looks something like:


$("a.myvideo").fancybox({ params here ]);

Then in the page you want to call the video from, you will have a link that launches the video. Something like

<a class="myvideo" href="#divcontainingvideo">Link</a>.

Below that you will place the hidden <div> layer containing the actual embed source for the flash video.


<div style="display:none" id="divcontainingvideo">
<embed
src="path/to/sourcefile.swf"
width="400"
height="300"
wmode="transparent"
flashvars="file=path/to/sourcfile.flv&autostart=true"
/>
</div>

Primary Sidebar

From the blog

Magento SVN Usage – Best Practices

How to Create Reusable Apple Mail Templates [video]

I’d rather buy from Harry Potter

The Ecommerce Solution You’ll Find Refreshing (drumroll)

Liberating Constraints

More Posts

Connect with us

  • Facebook
  • RSS
  • Twitter
Affiliate Disclaimer

© 2025 · Elias Interactive · Built on the Genesis Framework

  • Blog
  • Affiliate Disclaimer
  • Home