CODEWITHSUNDEEP
phpwordpressgallery
ppp
ppp

Reputation: 2055

How to separate gallery from content in wordpress?

What I want to do

I have a website that uses a CMS I wrote some time ago, and now I am trying to migrate it to wordpress.

At the existing implementation, when someone writes a post, they can add some extra images that are shown as a gallery at the end of the post, as you can see in this page for example (sorry for non english page): http://apollonpatras.gr/news/562/i-bradia-ton-xorigon-parousiasi-xorigikou-programmatos-kai-eisitirion-diarkeias/.

How I think I can do it

I am thinking about letting the users create wordpress galleries and at post save time intercept the post contents and store the gallery image ids in a postmeta field so I can show them however I want.

Also, I will have to strip the galleries from the content before they are shown, since I will show them in my own way later.

What I am trying so far

add_filter('content_save_pre', 'intercept_galleries', 99);    
function intercept_galleries($content) {
    if (get_post_type() !== 'post') {
        return $content;
    }

    if (has_shortcode($content, 'gallery')) {
        // The [gallery] short code exists.
        $a = get_post_gallery(0, false);
        update_post_meta(get_the_ID(), 'has_gallery', 1);
        update_post_meta(get_the_ID(), 'gallery_items', $a['ids']);
    } else {
        update_post_meta(get_the_ID(), 'has_gallery', 0);
        update_post_meta(get_the_ID(), 'gallery_items', "");
    }
    return $content;
}

add_filter('the_content', 'remove_shortcodes_from_content');    
function remove_shortcodes_from_content($content) {
    return strip_shortcodes($content);
}

Where it goes wrong

Looks like when the post is originally saved, the postmeta field "has_gallery" is set to 1, but the field "gallery_items" is empty.

When I go to the wordpress editor and just hit update, the fields are absolutely correct.

Also the hook to remove shortcodes from the content is working.

What am I looking for

How can I fix this problem? Also, is there something wrong/stupid with the way I decided to do this? Would some other way be cleaner/easier/faster etc?

Thank you for your time

Upvotes: 1

Views: 997

Answers (1)

MrCarrot
MrCarrot

Reputation: 2768

I've done this a few times and here's how I do it.

First I create a function that will display the gallery in the way that I want. You can modify this according to how you require you gallery markup to be:

function my_gallery_shortcode( $attr ) {

    $post = get_post();
    if ( ! empty( $attr['ids'] ) ) {
        $attr['include'] = $attr['ids'];
    }

    extract( shortcode_atts( array(
        'order'      => 'ASC',
        'orderby'    => 'post__in',
        'id'         => $post->ID,
        'columns'    => 3,
        'size'       => 'large',
        'include'    => '',
    ), $attr));

    $id = (int) $id;
    $columns = (int) $columns;

    if ( 'RAND' == $order ) {
        $orderby = 'none';
    }

    if ( ! empty( $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];
        }
    }

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

    $output = '<div class="slideshow"><ul>';

    foreach ( $attachments as $id => $attachment ) {
        $thumb = wp_get_attachment_image_src( $id, 'large', false );

        $output .= '<li><img src="' . $thumb[0] . '" width="' . $thumb[1] . '" height="' . $thumb[2] . '" alt="' . get_post_meta( $id, '_wp_attachment_image_alt', true ) . '" /></li>';
    }

    $output .= '</ul></div>';
    return $output;
}

You can complicate or simply the function above according to your requirements.

Then in your theme's functions.php add this:

add_shortcode( 'gallery', 'my_gallery_shortcode' );

Now you have two choices:

1) You can allow your user to add a gallery to the main page content by way of them editing the page in question and going to Media > Create Gallery

This will insert the gallery short code which will be formatted according to your function my_gallery_shortcode(), however the gallery can be managed via WordPress's gallery functionality in the admin area and is stored in the database by WordPress in the conventional way.

or

2) You could create a separate WYSIWYG field either through additional code in your functions.php file, or by using a plugin such as Advanced Custom Fields. You would then use this additional WYSIWYG field to allow the user to insert the gallery shortcode in the same way as above. This is virtually the same as option 1 above but you'd have more flexibility as to where you output and position the gallery on the page.

I hope this helps anyone looking to do the same thing.

Upvotes: 1

Related Questions