Timothy Griffith Timothy Griffith - 3 months ago 4
PHP Question

rewrite function to not use echo php for use with short_code

I am having a bit of trouble getting my shortcode to place my html of a function in the correct place on wordpress. After some research I have found that when using shortcodes you cannot have

echo
used in the function. I have been doing my best to write the function without any
echo
's but cant seem to get it to work. I have little actual experience with PHP as a language and am giving this my best shot.

The top code block is the functioning code with
echo
used throughout, and the second is the rewritten code without any
echo
but is not functioning. Anyone have an idea where my rewrite is going wrong? Or possibly have a better work around then rewriting the function?

First:

function na_get_gallery_image_urls( $post_id ) {

$post = get_post($post_id);

// Make sure the post has a gallery in it
if( ! has_shortcode( $post->post_content, 'gallery' ) )
return;

//initiate counter to be able to keep track of images
$count_img = 0;

// Retrieve all galleries of this post
$gallery = get_post_gallery_images( $post );


// Loop through each image in first gallery
foreach( $gallery as $image ) {

// Below here are the main containers and first large image; stuff we will only want to output one time.
if($count_img == 0) { ?>

<!-- Whole Gallery container (inludes thumbnails) -->
<div id="instant-gallery">

<!-- Main Display Area -->
<div id="ig-main">

<!-- Set the parameters for the image we are about to display. -->
<?php
$default_attr = "ig-hero";
?>

<!-- Display the first image attachment as the large image in the main gallery area -->
<img src="<?php print $image; ?>" id="<?php print $default_attr; ?>">

<a href="<?php print $image; ?>" download>Download</a>

<!-- Close the main display area -->
</div>

<!-- Open the Thumbnail navigation -->
<ul id="ig-thumbs">

<!-- End the block of stuff that we only do for the first image -->
<?php } ?>

<!-- Now, for each of the thumbnail images, label the LI with an ID of the appropriate thumbnail number -->
<li id="ig-thumb-<?php print $count_img+1; ?>">

<?php if ($count_img==0) {

// If this is the first thumbnail, add a class of 'selected' to it so it will be highlighted
$thumb_attr = "thumb selected";

} else {

// For all other thumbnails, just add the basic class of 'thumb'
$thumb_attr = "thumb";

} ?>

<!-- Output a thumbnail-sized version of the image that has the attributes defined above -->
<img src="<?php print $image; ?>" class="<?php print $thumb_attr; ?>">

</li>

<!-- Increment the counter so we can keep track of which thumbnail we are on -->
<?php $count_img = $count_img + 1; } ?>

<!-- Close the thumbnail navigation list -->
</ul>

<!-- Close the entire Gallery -->
</div>

<?php

}



function instant_gallery() {

global $post;

$args = array(
'post_parent' => '$post->ID', // For the current post
'post_type' => 'attachment', // Get all post attachments
'post_mime_type' => 'image', // Only grab images
'order' => 'ASC', // List in ascending order
'orderby' => 'menu_order', // List them in their menu order
'numberposts' => -1, // Show all attachments
'post_status' => null, // For any post status
);

// Retrieve the items that match our query; in this case, images attached to the current post.
na_get_gallery_image_urls($args[0]);

}

// Create the Shortcode
add_shortcode('instant_gallery', 'instant_gallery');

?>


last:

function na_get_gallery_image_urls( $post_id ) {

$post = get_post($post_id);

// Make sure the post has a gallery in it
if( ! has_shortcode( $post->post_content, 'gallery' ) )
return;

// initiate counter to be able to keep track of images
$count_img = 0;

// Retrieve all galleries of this post
$gallery = get_post_gallery_images( $post );

// Loop through each image in first gallery
foreach( $gallery as $image ) {

// Below here are the main containers and first large image; stuff we will only want to output one time.
if($count_img == 0) {

//<!-- Whole Gallery container (inludes thumbnails) -->
$hero_img = '<div id="instant-gallery">';

//<!-- Main Display Area -->
$hero_img .= '<div id="ig-main">';

//<!-- Set the parameters for the image we are about to display. -->

$default_attr = "ig-hero";

//<!-- Display the first image attachment as the large image in the main gallery area -->
$hero_img .= '<img src="' . $image . '" id="' . $default_attr . '">';

$hero_img .= '<a href="' . $image . '" download>Download</a>';

//close main display area
$hero_img .= '</div>';

//<!-- Open the Thumbnail navigation -->
$hero_img .= '<ul id="ig-thumbs">';

//<!-- End the block of stuff that we only do for the first image -->
}

//<!-- Now, for each of the thumbnail images, label the LI with an ID of the appropriate thumbnail number -->
$thumbs = '<li id="ig-thumb-' . ($count_img + 1) . '">';

if ($count_img==0) {

// If this is the first thumbnail, add a class of 'selected' to it so it will be highlighted
$thumb_attr = "thumb selected";

} else {

// For all other thumbnails, just add the basic class of 'thumb'
$thumb_attr = "thumb";

}

//<!-- Output a thumbnail-sized version of the image that has the attributes defined above -->
$thumbs .= '<img src="' . $image . '" class="' . $thumb_attr . '">' . '</li>';



//<!-- Increment the counter so we can keep track of which thumbnail we are on -->
$count_img = $count_img + 1;
}

//<!-- Close the thumbnail navigation list -->
$fin = '</ul>';

// <!-- Close the entire Gallery -->
$fin .= '</div>';

$content = "$hero_img" . "$thumbs" . "$fin";

return $content;

}


function instant_gallery() {

global $post;

$args = array(
'post_parent' => '$post->ID', // For the current post
'post_type' => 'attachment', // Get all post attachments
'post_mime_type' => 'image', // Only grab images
'order' => 'ASC', // List in ascending order
'orderby' => 'menu_order', // List them in their menu order
'numberposts' => -1, // Show all attachments
'post_status' => null, // For any post status
);

// Retrieve the items that match our query; in this case, images attached to the current post.
na_get_gallery_image_urls($post->ID);

}

// Create the Shortcode
add_shortcode('instant_gallery', 'instant_gallery');

?>

Answer

Hi Try below code with changing your parameters it will works.

function testgallery_shortcode( $atts , $content = null ) {
    extract( shortcode_atts(
    array(
    'title' =>'TEST GALLERY',
    'items' =>3,
    ), $atts )
    );

    $args = array(
            'post_type'      => 'testgallery',
            'posts_per_page' => $items,
            'post_status'    => 'publish',
    );

    $test_gallery = new WP_Query( $args );

    $html = '';

        global $post;
        if ( $test_gallery->have_posts() ) :while ( $test_gallery->have_posts() ) : $test_gallery->the_post();
        $html.='<div class="col-sm-4 col-xs-12">';
        $html.='<figure class="post">';
        $html.='<div class="image-wrap">';
        $html.='<a class="zoomtoplay" alt="gallery_image" href="'. esc_url( get_permalink() ).'"></a>';
        if (has_post_thumbnail() ) {
            $imgarray = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),'full');
            $imgURL = $imgarray[0];
            $html.='<img src="'.$imgURL.'" class="img-responsive"/>';
        }
        $html.='<a href="'.esc_url( get_permalink() ).'"></div><h3>'.get_the_title().'</h3></a>';
        $html.='</figure>';
        $html.='</div>';

        endwhile;
        endif;
        wp_reset_query();

    return $html;

}
add_shortcode( 'testgallery', 'testgallery_shortcode' );

-- Now you can use a [testgallery] shortcode in your post and page.

This is a standard way of creating shortcode.

Still if needed than For more details you can visit this link - https://www.sitepoint.com/custom-shortcodes-for-wordpress/

Comments