Amp-wp: Dynamically generate story bookend for next stories

[amanintech]

wonder if we can dynamically generate next stories in bookend using wordpress next post capability. I will be trying to create a PHP function in the single-amp_story.php that generates json string of next stories and is supplied instead of bookend.json. DO you think such thing can work

/* 
Generating bookend dynamically
*/

function gen_bookend_dynamic()
{
    $data = array(
        "bookendVersion" => "v1.0",
        "shareProviders" => array(
            "facebook",
            "twitter",
            "email"
        ),
        "components" => array(
            array(
                "type" => "heading",
                "text" => "More to read"
            ),
            array(
                "type" => "small",
                "title" => "Learn about cats",
                "url" => 'https://wikipedia.org/wiki/Cat',
                "image" => "assets/bookend_cats.jpg"
            ),
            array(
                "type" => "landscape",
                "title" => "Learn about border collies",
                "url" => "https://wikipedia.org/wiki/Border_Collie",
                "image" => "assets/bookend_dogs.jpg",
                "category" => "Dogs"
            ),
            array(
                "type" => "portrait",
                "title" => "Learn about macaws",
                "url" => "https://wikipedia.org/wiki/Macaw",
                "image" => "assets/bookend_birds.jpg",
                "category" => "birds"
            ),
            array(
                "type" => "cta-link",
                "links" => array(
                    array(
                        "text" => "Learn more",
                        "url" => "https://www.ampproject.org/stories/"
                    )
                )
            )
        )
    );

    $data['components'] += array(

        "type" => "heading new",
        "text" => "More to read new"

    );



    $json_string = json_encode($data, JSON_UNESCAPED_SLASHES);
    //print $json_string;

    $file = dirname(__FILE__) . '/assets/js/bookend.json';
    //$file = dirname(__FILE__) . '/test.json';
    //print $file;
    //echo `whoami`;
    file_put_contents($file, $json_string);
}

add_action('init', 'gen_bookend_dynamic');

[westonruter]

Yes, there needs to be an auto-generated bookend. It should use the WordPress REST API instead, however.

Also, I'm unsure why AMP Stories requires an external URL for the bookend. It would simplify things if the bookend could be specified inline with JSON script. It would be great if instead of:

<amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>

One could do:

<amp-story-bookend layout="nodisplay">
    <script type="application/json">
    {
        "bookendVersion": "v1.0",
        ...
    }
    </script>
</amp-story-bookend>

_HOLD ON_… This _is_ actually allowed: https://github.com/ampproject/amphtml/blob/fad19d92d7eff913e05ed9faef4ac076503a274a/extensions/amp-story/validator-amp-story.protoascii#L415-L430

So that will greatly simplify the generation of the amp-story-bookend in the WordPress context, as it can be generated as part of the single-amp_story.php template.

[amanintech]

That's great. I will try to create it by tomorrow

[westonruter]

The implementation here should look similar to what is proposed in #2430. Namely, the object that gets output as JSON should be filterable to give a site more control over the bookend, including what shareProviders to use.

[dhruva205]

I tried and made it this way, though i didn't tried the categories or tags!

<amp-story-bookend layout=nodisplay>
        <script type="application/json">
            {
                "bookendVersion": "v1.0",
                "shareProviders": [
                    "email",
                    "tumblr",
                    {
                        "provider": "twitter",
                        "text": "This is custom share text that I would like for the Twitter platform"
                    },
                    {
                        "provider": "facebook",
                        "app_id": "MY_FACEBOOK_APP_ID"
                    }
                ],
                "components": [
                    {
                        "type": "heading",
                        "text": "More to read"
                    }
<?php

            $loop_length=30;  //specify number of posts ahead you want to display
            $check_help=0;    //require as a checkpoint to follow different paths in loop
            global $post;
            $revert_post_content=$post;  //save current global post content to setback changes to current post after loop execution ends
            for($loop_start = 1; $loop_start <= $loop_length; $loop_start++)
            {
                if( $loop_start === 1)
                {
                    $nextPost = get_next_post();
                }
                else
                {
                    global $post;
                    $post = get_next_post();
                    setup_postdata( $post );

                    if($check_help===1)
                       {
                            $nextPost = $post;
                            $check_help=2;
                       }
                    else
                        {
                            $nextPost = get_next_post();
                            $check_help=0;
                        }
                }
            if(get_permalink($nextPost) != get_permalink($post))   // to check when last post arrives to loop back to first posts
                 {
                 }
            else
                {
                    global $post;
                    $post = get_boundary_post()[0];
                    setup_postdata( $post );
                    if($check_help!=0 )
                    {
                        $nextPost = get_next_post();
                    }
                    else
                    {
                        $nextPost = $post;
                        $check_help=1;
                    }

                }
                echo ',{';
                if( $loop_start === 1)
                {
                    echo ' "type": "landscape", ';
                }
                else
                {
                    echo ' "type": "small", ';
                }
                echo '"title": "'; echo $nextPost->post_title ; echo '",';
                echo '"url": "'; echo get_permalink($nextPost); echo '",';
                echo '"image": "'; echo get_the_post_thumbnail_url($nextPost->ID); echo '"';
                echo '}';
            if( $loop_start === $loop_length)
            { //wp_reset_postdata();
              $post=$revert_post_content;}
            }
            ?>
  ]
      }
     </script>
    </amp-story-bookend>

[westonruter]

Instead of manually constructing JSON, you should rather do something like this:

<?php
$bookend = array(
    'bookendVersion' => 'v1.0',
);
// Now add data to the $bookend using normal array methods.

/**
 * Filters AMP story bookend data.
 *
 * @param array   $bookend Bookend data.
 * @param WP_Post $post    Story post.
 */
$bookend = apply_filters( 'amp_story_bookend', $bookend, get_post() );
?>
<amp-story-bookend>
    <script type="application/json">
        <?php echo wp_json_encode( $bookend ); ?>
    </script>
</amp-story-bookend>

[amanintech]

does this seems good enough @dhruva205 ?

[dhruva205]

@westonruter , if currently a story is opened..... executing the "get_next_post()" method gives the next story details.... if its currently the last story, executing "get_next_post()" method starting giving post data now... is there any way to return back to stories again! because when global $post goes to the post section, it does not enters the stories again!

[westonruter]

I'm not sure I understand.

Let's step back and discuss what exactly we want the bookend to contain. Is it just the next post and previous post?

In other words, is it get_adjacent_post()? So yes, these are the functions that should be used:

• https://developer.wordpress.org/reference/functions/get_previous_post/
• https://developer.wordpress.org/reference/functions/get_next_post/

But we should confirm what exactly the bookend should contain before implementing a default bookend.

Assuming the current story is the last one and there is no next, then shouldn't the next just be omitted? Same for previous?

In addition to the next/previous, wouldn't it be good to also include other latest stories?

[amedina]

The bookend is in general intended to wrap up the story and provide social sharing and related links to the story. The main goals are enable users to share the story or dive further into other content on the site hosting the story.

I am not 100% convinced that automatically generating a bookend ready for publishing is possible or the way to go. The creator should have a strong say on the specific content of the bookend, and it may vary across stories.

In addition, bookends may be avoided all together in viewing experiences were stories are consumed back to back (a-la Instagram).

[dhruva205]

Is it just the next post and previous post?

next STORY and previous STORY...
The get_next/previous_post post does gives us the next story in sequence.. but when it is the last story , the get_next_post starts giving the posts section content. and from here we can't return back to stories using get_previous_post(if currently its the 1st post, executing get_previous_post() doesn't gives the story meta ) ,
i want to loop in stories only! but is there any method or query for that , which can set it , to choose if i want get_next_story(or)post !

[dhruva205]

stories are consumed back to back (a-la Instagram).

How stories are made to be displayed back to back??
As till now, i saw each next story is loaded from a different url , which needs some manual action to get to the next story!

[swissspidy]

How stories are made to be displayed back to back?

I think that's currently only possible in an AMP viewer. If you look at the "Top Stories" carousel on a Search Results Page for example, you can swipe from one AMP article to another. AMP Stories will offer the exact same behavior in the future.

[dhruva205]

i want to loop in stories only! but is there any method or query for that , which can set it , to choose if i want get_next_story(or)post !

Ok i got the way to do it.. using get_posts(), and passing the argument array as 'order' => 'DESC'/'ASC', and 'post_type' => 'amp_story', i can get the 1st/last story and a condition check will help me to get 1st story or last as whenever i require.... thanks for the help so far :)