Custom Fields/Values displaying out of order

Question

I'm using the Types Wordpress plugin to enable custom fields. The plugin allows you to rearrange the order of the images in the admin page editor. Here's my code in my single.php to display multiple images in the custom field and have a link to itself to also use Fancybox:

<?php   
    $mykey_values_img = get_post_custom_values('wpcf-image');
    if ($mykey_values_img != null) {
        foreach ( $mykey_values_img as $key => $value ) {
?>  
        <a href="<?php echo $value; ?>" class="fancybox" rel="gallery"><img src="<?php echo $value; ?>" /></a>

<?php
        } //foreach
    } //if
?>

Problem:

Right now this code works perfectly on my local copy running on MAMP. However, when I put it online hosted on iPage, the images are out of order. I don't know what's causing this discrepancy. When I use the shortcode from Types to display the images instead of the php above they are in order, but I don't have the option of using Fancybox. I was also wondering if there is a better way to display an image from Wordpress that will insert the alt tag for the image.

Answer 1

I just encountered this problem too, and your first answer led me to a tighter solution.

I also used types_render_field(), but if you include a 'raw' parameter, you can avoid the string manipulation.

$images_raw = types_render_field('image', array('raw'=>'true','separator'=>';'));
$images = explode(';', $images_raw);
foreach ($images as $link) {
     echo '<a href="' . $link . '" class="fancybox" rel="gallery">' . $link . '"></a>"';
}

Then, if you're nasty, you can get the ID of the attachment from its SRC. Using that ID, you can get all the info you need about that attachment, like a caption, or whatnot.

Answer 2

I figured out a work around to get it working. Its not ideal but it works.

The Types plugin came with its own php function to display the custom field called types_render_field. It displayed my images in order. To get fancybox working I had to do sort of a hack on the string. Here's the code:

$images = ( types_render_field( "image", array( 'size' => 'full', 'alt' => get_the_title(), 'title' => get_the_title() ) ) );
$imgArray = explode(">", $images);

foreach ( $imgArray as $value ) {

    $pos1 = strpos($value, 'src="', 0)+5;
    $pos2 = strpos($value, '" ', $pos1);
    $link = substr($value, $pos1, $pos2 - $pos1);

    echo '<a href="'.$link.'" class="fancybox" rel="gallery">'.$value."></a>";
}