The Stack Overflow podcast is back! Listen to an interview with our new CEO.
3 deleted 39 characters in body
source | link

I've been trying to create the formatting through modifying snippets I got from [here] and [here], but it gets very messy because I don't know how to remove unncessary stuff. 

For example, I don't need the <a> to link to the attachment page (something like http :// mydomain.com/?attachment=20). I only need it to link directly to the image URL.

Using filter and adding it to functions.php, here is what I have done so far (it's very messy): http: // pastebin.com/Q51W1BVr 

I put it into pastebin because it's a bit too long (I'm sorry I can't make it a link because I don't have enough reputation point here :/ )

But I included the whole filter in case it is needed.

 

I've been trying to create the formatting through modifying snippets I got from [here] and [here], but it gets very messy because I don't know how to remove unncessary stuff. For example, I don't need the <a> to link to the attachment page (something like http :// mydomain.com/?attachment=20). I only need it to link directly to the image URL.

Using filter and adding it to functions.php, here is what I have done so far (it's very messy): http: // pastebin.com/Q51W1BVr I put it into pastebin because it's a bit too long (I'm sorry I can't make it a link because I don't have enough reputation point here :/ )

But I included the whole filter in case it is needed.

I've been trying to create the formatting through modifying snippets I got from [here] and [here], but it gets very messy because I don't know how to remove unncessary stuff. 

For example, I don't need the <a> to link to the attachment page (something like http :// mydomain.com/?attachment=20). I only need it to link directly to the image URL.

Using filter and adding it to functions.php, here is what I have done so far (it's very messy): http: // pastebin.com/Q51W1BVr 

I put it into pastebin because it's a bit too long (I'm sorry I can't make it a link because I don't have enough reputation point here :/ )

 
2 added 20 characters in body; edited title
source | link

Customize the Wordpress Default Gallery Output Link

I want to customize the Wordpress default gallery link so that it would format as something like this for each item:

Basically I want the link (<a>) to have:

Using filter and adding it to functions.php, here is what I have done so far (it's very messy): http: // pastebin.com/Q51W1BVr I put it into pastebin because it's a bit too long (I'm sorry I can't make it a link because I don't have enough reputation point here :/ )

add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
function my_post_gallery( $output, $attr) {
global $post, $wp_locale;

static $instance = 0;
$instance++;

// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
    $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    if ( !$attr['orderby'] )
        unset( $attr['orderby'] );
}

extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'rel'        => '', // !!! Add attribute
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => ''
), $attr));

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $include = preg_replace( '/[^0-9,]+/', '', $include );
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
        $attachments[$val->ID] = $_attachments[$key];
    }
} elseif ( !empty($exclude) ) {
    $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}

if ( empty($attachments) )
    return '';

if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
        $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";

$output = apply_filters('gallery_style', "
    <style type='text/css'>
        #{$selector} {
            margin: auto;
            padding: 0 6%;
            margin-bottom:1.25em;
        }
        #{$selector} .gallery-item {
            float: {$float};
            margin: 10px 2%;
            text-align: center;           }
    </style>
    <div id='$selector' class='gallery galleryid-{$id}'>");


$i = 0; // Modified output from here
foreach ( $attachments as $id => $attachment ) {

    $link = wp_get_attachment_link($id, $size, true, false);
    if( ! empty($rel) ) { !!! // Add rel injection
        $link = str_replace('<a href=', "<a rel='$rel' href=" .wp_get_attachment_url( $attachment->ID ). " alt=", $link);
    } else {
        $link = str_replace('<a href=', "<a rel='$rel' href=", $link);
    }

    $link = str_replace("title='", "title='" . wptexturize($attachment->post_excerpt) . "' name='", $link);

    $output .= "<{$itemtag} class='gallery-item imgteaser'>
    ";
    $output .= $link;
    $output .= "</{$itemtag}>
    ";

    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br style="clear: both" />';
}

$output .= "
        <br style='clear: both;' />
    </div>\n";

return $output;
}

Though I believe the parts which I need to modifymodifies the output is only from here:

Customize the Gallery Output Link

I want to customize the gallery link so that it would format as something like this for each item:

Basically I want the <a> to have:

Using filter and adding it to functions.php, here is what I have done so far (it's very messy):

add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
function my_post_gallery( $output, $attr) {
global $post, $wp_locale;

static $instance = 0;
$instance++;

// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
    $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    if ( !$attr['orderby'] )
        unset( $attr['orderby'] );
}

extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'rel'        => '', // !!! Add attribute
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => ''
), $attr));

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $include = preg_replace( '/[^0-9,]+/', '', $include );
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
        $attachments[$val->ID] = $_attachments[$key];
    }
} elseif ( !empty($exclude) ) {
    $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}

if ( empty($attachments) )
    return '';

if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
        $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";

$output = apply_filters('gallery_style', "
    <style type='text/css'>
        #{$selector} {
            margin: auto;
            padding: 0 6%;
            margin-bottom:1.25em;
        }
        #{$selector} .gallery-item {
            float: {$float};
            margin: 10px 2%;
            text-align: center;           }
    </style>
    <div id='$selector' class='gallery galleryid-{$id}'>");


$i = 0; // Modified output from here
foreach ( $attachments as $id => $attachment ) {

    $link = wp_get_attachment_link($id, $size, true, false);
    if( ! empty($rel) ) { !!! // Add rel injection
        $link = str_replace('<a href=', "<a rel='$rel' href=" .wp_get_attachment_url( $attachment->ID ). " alt=", $link);
    } else {
        $link = str_replace('<a href=', "<a rel='$rel' href=", $link);
    }

    $link = str_replace("title='", "title='" . wptexturize($attachment->post_excerpt) . "' name='", $link);

    $output .= "<{$itemtag} class='gallery-item imgteaser'>
    ";
    $output .= $link;
    $output .= "</{$itemtag}>
    ";

    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br style="clear: both" />';
}

$output .= "
        <br style='clear: both;' />
    </div>\n";

return $output;
}

I believe the parts which I need to modify is only from here:

Customize the Wordpress Default Gallery Output

I want to customize the Wordpress default gallery so that it would format as something like this for each item:

Basically I want the link (<a>) to have:

Using filter and adding it to functions.php, here is what I have done so far (it's very messy): http: // pastebin.com/Q51W1BVr I put it into pastebin because it's a bit too long (I'm sorry I can't make it a link because I don't have enough reputation point here :/ )

Though I believe the parts which modifies the output is only from here:

1
source | link

Customize the Gallery Output Link

I want to customize the gallery link so that it would format as something like this for each item:

<dl class="gallery-item imgteaser">
  <a rel="lightbox-cats" href="http://mydomain.com/link/to/image.jpg" title="Image caption (if any)" name="image.jpg (image file name)">
    <img width="150" height="150" src="http://mydomain.com/link/to/image-150x150.jpg" class="attachment-thumbnail" alt="002" title="002">
  </a>
</dl>

Basically I want the <a> to have:

  • rel for activating lightbox script (defined as "lightbox-cats" by user manually in each gallery)
  • href that links to direct URL of the image (e.g.: http: // mydomain.com/link/to/image.jpg)
  • title that is for Wordpress image caption
  • name which is the image file name (e.g.: image.jpg)

I've been trying to create the formatting through modifying snippets I got from [here] and [here], but it gets very messy because I don't know how to remove unncessary stuff. For example, I don't need the <a> to link to the attachment page (something like http :// mydomain.com/?attachment=20). I only need it to link directly to the image URL.

Using filter and adding it to functions.php, here is what I have done so far (it's very messy):

add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
function my_post_gallery( $output, $attr) {
global $post, $wp_locale;

static $instance = 0;
$instance++;

// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
    $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    if ( !$attr['orderby'] )
        unset( $attr['orderby'] );
}

extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'rel'        => '', // !!! Add attribute
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => ''
), $attr));

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $include = preg_replace( '/[^0-9,]+/', '', $include );
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
        $attachments[$val->ID] = $_attachments[$key];
    }
} elseif ( !empty($exclude) ) {
    $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}

if ( empty($attachments) )
    return '';

if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
        $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";

$output = apply_filters('gallery_style', "
    <style type='text/css'>
        #{$selector} {
            margin: auto;
            padding: 0 6%;
            margin-bottom:1.25em;
        }
        #{$selector} .gallery-item {
            float: {$float};
            margin: 10px 2%;
            text-align: center;           }
    </style>
    <div id='$selector' class='gallery galleryid-{$id}'>");


$i = 0; // Modified output from here
foreach ( $attachments as $id => $attachment ) {

    $link = wp_get_attachment_link($id, $size, true, false);
    if( ! empty($rel) ) { !!! // Add rel injection
        $link = str_replace('<a href=', "<a rel='$rel' href=" .wp_get_attachment_url( $attachment->ID ). " alt=", $link);
    } else {
        $link = str_replace('<a href=', "<a rel='$rel' href=", $link);
    }

    $link = str_replace("title='", "title='" . wptexturize($attachment->post_excerpt) . "' name='", $link);

    $output .= "<{$itemtag} class='gallery-item imgteaser'>
    ";
    $output .= $link;
    $output .= "</{$itemtag}>
    ";

    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br style="clear: both" />';
}

$output .= "
        <br style='clear: both;' />
    </div>\n";

return $output;
}

I believe the parts which I need to modify is only from here:

$i = 0; // Modified output from here
foreach ( $attachments as $id => $attachment ) {

    $link = wp_get_attachment_link($id, $size, true, false);
    if( ! empty($rel) ) { !!! // Add rel injection
        $link = str_replace('<a href=', "<a rel='$rel' href=" .wp_get_attachment_url( $attachment->ID ). " alt=", $link);
    } else {
        $link = str_replace('<a href=', "<a rel='$rel' href=", $link);
    }

    $link = str_replace("title='", "title='" . wptexturize($attachment->post_excerpt) . "' name='", $link);

    $output .= "<{$itemtag} class='gallery-item imgteaser'>
    ";
    $output .= $link;
    $output .= "</{$itemtag}>
    ";

    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br style="clear: both" />';
}

$output .= "
        <br style='clear: both;' />
    </div>\n";

return $output;
}

But I included the whole filter in case it is needed.

Here is how messy the output result is:

<dl class="gallery-item imgteaser">
    <a rel="lightbox-cats" href="http://localhost/test/wp-content/uploads/2012/09/002.jpg" alt="http://localhost/test/?attachment_id=36" title="" name="002">
    <img width="150" height="150" src="http://localhost/test/wp-content/uploads/2012/09/002-150x150.jpg" class="attachment-thumbnail" alt="002" title="002"
    </a>
</dl>

It works, but it has the unnecessary alt="http://localhost/test/?attachment_id=36" because I don't know to remove it. And I feel my code is really unefficient/unclean. :/