moving within Stories #2441
Comments
|
modified single-amp_story.php <?php
/**
* Template for amp_story post type.
*
* @package AMP
*/
the_post();
?>
<!DOCTYPE html>
<html amp <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title><?php echo esc_html( wp_get_document_title() ); ?></title>
<?php
wp_enqueue_scripts();
wp_scripts()->do_items( array( 'amp-runtime' ) ); // @todo Duplicate with AMP_Theme_Support::enqueue_assets().
wp_styles()->do_items();
?>
<?php rel_canonical(); ?>
<?php amp_add_generator_metadata(); ?>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- style for sidebar navigation -->
<!-- To load new story and remove previous history -->
<script type="text/javascript">
function change_post(url_toload)
{
location.replace(url_toload)
}
</script>
</head>
<body >
<!-- Get next and previous post url -->
<?php
$home_url = get_home_url( null,'/',null );
$next_post_url = get_permalink( get_adjacent_post(false,'',false)->ID );
$previous_post_url = get_permalink( get_adjacent_post(false,'',true)->ID );
?>
<!-- bottom navigation button -->
<div style="
position: fixed;
height: 25px;
z-index: 10;
bottom: 0;
padding-bottom: 20px;
width: 100%;
background: rgba(0, 0, 0, 0.28);
border-radius: 10px 10px 0px 0px;
/* background-image: inherit; */
box-shadow: 0px 3px 18px 2px rgba(0, 0, 0, 0.35);
"><a href="javascript:change_post(<?php echo $previous_post_url;?>)"
style=" background-image: url('<?php echo $home_url; ?>wp-content/plugins/amp-wp-1.2-beta1-built/assets/images/previous.png');
/* margin: 17px; */
left: 10px;
background-repeat: no-repeat;
z-index: 10;
/* padding: 10px; */
height: 20px;
width: 49%;
margin-top: 14px;
background-position: center;
background-size: contain;
display: inline-grid"
></a>
<a href="javascript:change_post(<?php echo $next_post_url;?>)"
style=" background-image: url('<?php echo $home_url; ?>wp-content/plugins/amp-wp-1.2-beta1-built/assets/images/next.png');
/* margin: 17px; */
left: 10px;
background-repeat: no-repeat;
z-index: 10;
/* padding: 10px; */
height: 20px;
width: 49%;
margin-top: 14px;
background-position: center;
background-size: contain;
display: inline-grid"
></a>
</div>
<?php
$metadata = amp_get_schemaorg_metadata();
if ( isset( $metadata['publisher']['logo']['url'] ) ) {
$publisher_logo_src = $metadata['publisher']['logo']['url']; // @todo Use amp-publisher-logo.
} else {
$publisher_logo_src = admin_url( 'images/wordpress-logo.png' );
}
$publisher = isset( $metadata['publisher']['name'] ) ? $metadata['publisher']['name'] : get_option( 'blogname' );
// There is a fallback poster-portrait image added via a filter, in case there's no featured image.
$thumbnail_id = get_post_thumbnail_id();
$poster_portrait = wp_get_attachment_image_url( $thumbnail_id, AMP_Story_Post_Type::STORY_CARD_IMAGE_SIZE );
$poster_square = wp_get_attachment_image_url( $thumbnail_id, AMP_Story_Post_Type::STORY_SQUARE_IMAGE_SIZE );
$poster_landscape = wp_get_attachment_image_url( $thumbnail_id, AMP_Story_Post_Type::STORY_LANDSCAPE_IMAGE_SIZE );
?>
<amp-story
standalone
publisher-logo-src="<?php echo esc_url( $publisher_logo_src ); ?>"
publisher="<?php echo esc_attr( $publisher ); ?>"
title="<?php the_title_attribute(); ?>"
poster-portrait-src="<?php echo esc_url( $poster_portrait ); ?>"
<?php if ( $poster_square ) : ?>
poster-square-src="<?php echo esc_url( $poster_square ); ?>"
<?php endif; ?>
<?php if ( $poster_landscape ) : ?>
poster-landscape-src="<?php echo esc_url( $poster_landscape ); ?>"
<?php endif; ?>
>
<?php
echo the_content();
?>
</amp-story>
<?php
// Note that \AMP_Story_Post_Type::filter_frontend_print_styles_array() will limit which styles are printed.
print_late_styles();
?>
</body>
</html> |
|
Thanks for the suggestion. Is this valid AMP? Custom JavaScript is not allowed. I think your suggestion should actually be submitted to the AMP project itself to be made part of the format. It may already be planned: https://github.com/ampproject/amphtml Otherwise, the current supported ways of navigating between stories would be:
The first one is supported in the plugin presently. |
|
Hmm but all these mode of navigation doesn't seem to be intuative and the biggest problem is back functionality. The WordPress cms I am trying to create for now can handle it so until there is feature from amp end I will continue using this which works without any issue |
|
hmm now i got what you were saying. I found how we can add custom js using amp-script but how do we declare inline ex - href="javascript:location.replace("https://amp.dev"); |
You cannot do this in AMP. Your page will be invalid AMP. Custom JavaScript is not allowed. What you are proposing must be proposed for the AMP component itself. Please submit the suggestion to: https://github.com/ampproject/amphtml/issues?q=is%3Aopen+is%3Aissue+label%3A%22Category%3A+AMP+Story%22 |
|
Yes you were right |
To make it seamless for the reader to jump between various stories and read all stories at once I created this minimal UI with previous and next post option that load concurrent stories without going out. Also the back button of browser takes him to the home page and not loops him within all stories.
sample result can be seen here
https://app.twimbit.com/posts/future-of-telecom/
The changes were done to single-amp_story.php and 2 images were added. Not to confuse I have also changed post slug of amp stories to post. Which give it full capabilities of post.
I am new to opensource so don't know much on how to contribute. But hope to see these changes in the next release.
Also if we can add swipe left and right like instagram stories to move within stories.
The text was updated successfully, but these errors were encountered: