WordPress Gallery Shortcode in Theme Template

  • Resolved 83creative

    (@winnard)


    11 years, 1 month ago

    Hi

    I am hoping somebody has a solution to my problem and that I can resolve it as soon as possible. Driving me mad that I can’t seem to find a solution and I am hoping the wonderful WordPress community can help me out.

    I have created a theme for a client which has a custom post type “Projects” where the client adds there portfolio of work. I have created a filterable portfolio on the front end, and am now stuck on my last problem.

    The page which displays there project “single-project.php” displays the description of there work (added through the WordPress editor). No problem. This works the same as adding a wordpress post.

    They client adds a gallery to every project to display the images related to that project. No Problem there!

    What I want to achieve.

    What I want to do is this….

    “If a client adds a gallery in the editor, on the frontend it displays it in a column on the right of the description text.”

    Here is my single-project.php code

    <?php get_header(); ?>

<div class="row content top-padding">
<section class="container" id="page-content" role="main">
<main>
<div class="eightcol">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<article class="cf" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><?php the_title(); ?></h2>
<?php the_content();?>
<p><?php edit_post_link();?></p>	

</article>
<?php endwhile; ?>
<?php else: ?>

<article>
<h2><?php _e( 'Sorry, no project info to display.', 'rtd' ); ?></h2>
</article>

<?php endif; ?>
</div>

<div class="fourcol last" role="complementary">

<!--THIS IS WHERE I WANT TO DISPLAY THE GALLERY SHORTCODE-->

</div>

</main><!--End Role Main-->
</section><!--End Container-->
</div><!--End Main Content-->

<?php get_footer(); ?>

    I want to display the gallery shortcode when the client creates a gallery and as I am putting it in the template I won’t know what the id for that gallery will be.

    Surely somebody has had this issue before, or has come across something. I cannot find anything.

    I don’t want to use a plugin as I want to make it as simple for the client to add galleries within the editor. I do not want the client to worry about where they put that gallery or having to memorise any code.

    They simply use the ADD MEDIA -> Gallery and boom! it appears next to there text.

    PLEASE PLEASE PLEASE can somebody help? It will be much appreciated.

    To Summarise.

    If the post has a gallery, put it into the right column of my template. If it doesn’t then leave it blank.

    Thanks guys. Somebody save my bacon!!!

    Dan

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter 83creative

    (@winnard)

    11 years, 1 month ago

    Still haven’t been able to find a solution for this. Must be able to do this just need to drag the shortcode out of the loop.

    Thread Starter 83creative

    (@winnard)

    11 years, 1 month ago

    Ok as an update as I hadn’t heard from anyone regarding this, I managed to cobble together a perfect solution for me and thought I would add the code here in case anybody else ever needed to use the same issue.

    What the code does simply is remove the Gallery Shortcode from the loop, so that we can add it back into our theme template wherever we need to. In my case add the gallery into another column.

    The reason I have done it this way is for client usability. I want the client to just use the editor to add a gallery, anywhere they want to in the content without it breaking the layout.

    So here goes

    1st step — (Add this to your theme’s functions.php)

    // Deletes first gallery shortcode and returns content
function  strip_shortcode_gallery( $content ) {
    preg_match_all( '/'. get_shortcode_regex() .'/s', $content, $matches, PREG_SET_ORDER );
    if ( ! empty( $matches ) ) {
        foreach ( $matches as $shortcode ) {
            if ( 'gallery' === $shortcode[2] ) {
                $pos = strpos( $content, $shortcode[0] );
                if ($pos !== false)
                    return substr_replace( $content, '', $pos, strlen($shortcode[0]) );
            }
        }
    }
    return $content;
}

    This part strips the Gallery Shortcode from the content. We replace <?php the_content();?> in our theme with…

    <?php
$content = strip_shortcode_gallery( get_the_content() );
$content = str_replace( ']]>', ']]>', apply_filters( 'the_content', $content ) );
echo $content;
?>

    Step 2.

    We grab that Gallery shortcode and add it where we need too in the opposite column in my case.

    Add this to your functions.php file in your theme.

    // Return first gallery shortcode
function get_shortcode_gallery ( $post = 0 ) {
    if ( $post = get_post($post) ) {
        $post_gallery = get_post_gallery($post, false);
        if ( ! empty($post_gallery) ) {
            $shortcode = "[gallery";
            foreach ( $post_gallery as $att => $val ) {
                if ( $att !== 'src') {
                    if ( $att === 'size') $val = "thumbnail";        // Set custom attribute value
                    $shortcode .= " ". $att .'="'. $val .'"';   // Add attribute name and value ( attribute="value")
                }
            }
            $shortcode .= "]";
            return $shortcode;
        }
    }
}

    We then place the following code where we need it to go in our theme template file.

    <?php  if(shortcode_exists( 'gallery' )) {
	echo do_shortcode( get_shortcode_gallery() );
}  ?>

    Ok so whilst this probably isn’t the neatest solution, myself being low-level skill wise with PHP; it works as I need it too. Hope it can help somebody else or used for something to build upon.

    Cheers Dan

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘WordPress Gallery Shortcode in Theme Template’ is closed to new replies.