Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamically generate story bookend for next stories #2442

Closed
amanintech opened this issue May 28, 2019 · 13 comments

Comments

@amanintech
Copy link

@amanintech amanintech commented May 28, 2019

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');
@amanintech amanintech changed the title Dynamically generate story bookend from next stories Dynamically generate story bookend for next stories May 28, 2019
@westonruter

This comment has been minimized.

Copy link
Member

@westonruter westonruter commented May 28, 2019

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

This comment has been minimized.

Copy link
Author

@amanintech amanintech commented May 28, 2019

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

@westonruter

This comment has been minimized.

Copy link
Member

@westonruter westonruter commented May 28, 2019

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

This comment has been minimized.

Copy link

@dhruva205 dhruva205 commented May 29, 2019

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

This comment has been minimized.

Copy link
Member

@westonruter westonruter commented May 29, 2019

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

This comment has been minimized.

Copy link
Author

@amanintech amanintech commented May 29, 2019

does this seems good enough @dhruva205 ?

@dhruva205

This comment has been minimized.

Copy link

@dhruva205 dhruva205 commented Jun 1, 2019

@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

This comment has been minimized.

Copy link
Member

@westonruter westonruter commented Jun 1, 2019

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:

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

This comment has been minimized.

Copy link
Member

@amedina amedina commented Jun 1, 2019

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

This comment has been minimized.

Copy link

@dhruva205 dhruva205 commented Jun 2, 2019

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

This comment has been minimized.

Copy link

@dhruva205 dhruva205 commented Jun 2, 2019

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

This comment has been minimized.

Copy link
Collaborator

@swissspidy swissspidy commented Jun 3, 2019

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

This comment has been minimized.

Copy link

@dhruva205 dhruva205 commented Jun 3, 2019

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 :)

@ThierryA ThierryA closed this Nov 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
7 participants
You can’t perform that action at this time.