Display Selected Web Story: Using HTML Code

  • Resolved indiatrotter

    (@indiatrotter)


    3 years, 2 months ago

    Dear Team,

    This is in continuation of a previous post I raised a month back with the same issue/topic. After your replies, we didnt get the time to check as we were working on something else. Now, we see that the issue remains.

    Here is the thing:

    1. as you see this test Web Story has the post id 2521
    https://snipboard.io/DqO0Lw.jpg

    2. I have used the post id of this web story (and another) in this page:
    https://indiawelcomesyou.com/golden-triangle-taj-mahal-agra/

    This is the code:
    [web_stories title=”true” excerpt=”false” author=”false” date=”false” archive_link=”false” circle_size=”150″ sharp_corners=”false” image_alignment=”right” number_of_columns=”1″ number_of_stories=”2″ order=”DESC” orderby=”post_title” view=”carousel” selected_stories=”2521,2264″/]

    You can see the screenshot below:
    https://snipboard.io/b37PcU.jpg

    3. But, when I go to the page https://indiawelcomesyou.com/golden-triangle-taj-mahal-agra/ I dont see those web stories (Test2 WS and the other one).
    I see two completely different web stories instead(they have different post ids).

    Am I missing something?
    Thank you for all your help and support

    Regards,
    Amitava

    The page I need help with: [log in to see the link]

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

  • Hello @indiatrotter and thanks for getting back in touch. I can see what you are referring to and we are able to recreate this.

    We are now actively looking into this and will provide you with an update as soon as we can. If you have any questions in the meantime please let me know.

    Thread Starter indiatrotter

    (@indiatrotter)

    Thank you for looking into it @adamdunnage
    I will wait for the updates

    Regards,
    Amitava

    @indiatrotter It appears that ‘selected_stories‘ is not currently a supported argument. We do not currently support displaying selected stories with this shortcode. It only supports displaying the latest stories.

    This has been logged in GitHub as a feature request and you can find and follow for updates here: https://github.com/google/web-stories-wp/issues/10185.

    There is currently no timeline for when this will be added so you will not currently be able to use selected stories using this shortcode.

    You can use the Web Stories block if using the Gutenberg editor within WordPress which allows you to select stories if this is an option to you.

    Please let me know if you have any further questions.

    Thread Starter indiatrotter

    (@indiatrotter)

    Thats really unfortunate. ??
    Based on your (team) assurance about this function a month back (in another thread) we went ahead and generated a lot of web stories in the last 1 month. So, if we cant add them to the desired pages now, that is such a huge loss of effort.

    Our WP theme is based on WP Bakery Page Builder, so switching to the Gutenberg editor for those pages would mean loss of other functionalities provided by the theme and it doesn’t help

    So, I can think of 2 alternate ways:

    1. Can we use other parameters like tags or categories to display the relevant web stories. Eg I can tag all Taj Mahal-related web stories one way (say Taj_Mahal) and then have the code written so that all web stories with the tag Taj_Mahal gets displayed? So, instead of selected_stories, please let me know the exact parameter syntax for categories and tags.

    2. I was looking for the HTML options (https://amp.dev/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/?format=stories#display-a-web-story). My interest was the section called “Specify multiple Web Stories”. So, I copied that code and pasted in the HTML section of the page (https://indiawelcomesyou.com/sample-web-story-display/).

    Issues:
    1. My aim is to display one web story, after another…using multiple Web Stories code, still displays one story at a time
    2. while in playground.amp.dev I can see the single/first web story, in my site, it doesnt display anything.

    Please help
    Regards,
    Amitava

    Here is the piece of code:

    `<!DOCTYPE html>
    <html>
    <head>
    <script
    async
    src=”https://cdn.ampproject.org/amp-story-player-v0.js&#8221;
    ></script>
    <link
    href=”https://cdn.ampproject.org/amp-story-player-v0.css&#8221;
    rel=”stylesheet”
    type=”text/css”
    />
    <style>
    header {
    height: 8vh;
    color: #ffe800;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    amp-story-player {
    margin: 1rem auto;
    }
    </style>
    </head>
    <body>
    <header>
    <h1>
    Using HTML Code
    </h1>
    </header>
    <amp-story-player style=”width: 370px; height: 622px;”>



    </amp-story-player>
    </body>
    </html>

    Hi Amitava,

    Wanted to chime in here as I was the person that you spoke with on your other topic. The confusion surrounding selected_stories was 100% an error on my part and I’m so sorry for any lost effort that it may have caused you.

    Our WP theme is based on WP Bakery Page Builder, so switching to the Gutenberg editor for those pages would mean loss of other functionalities provided by the theme and it doesn’t help.

    Good news! You actually can use Gutenberg blocks within WP Bakery Page Builder (aka Visual Composer). More details are available in their guide here: https://kb.wpbakery.com/docs/faq/does-wpbakery-page-builder-works-with-the-gutenberg/. Once you add a Gutenberg Editor element to your page, edit it and then select the Open Editor button under Text at the top of the modal. This will take you to the Gutenberg editor in WP and allow you to add new Gutenberg blocks, including the Web Stories block.

    To your other questions:

    1. Can we use other parameters like tags or categories to display the relevant web stories. Eg I can tag all Taj Mahal-related web stories one way (say Taj_Mahal) and then have the code written so that all web stories with the tag Taj_Mahal gets displayed? So, instead of selected_stories, please let me know the exact parameter syntax for categories and tags.

    While we added the ability to add Tags and Categories to Web Stories late last year, there isn’t any way to use these for filtering stories for front-end display right now. However, this is on our list for a future improvement.

    One thing to note: While we plan to continue to maintain the shortcode functionality to embed Web Stories, our priority moving forward will be making enhancements to the Web Stories Gutenberg block, since Gutenberg is the focus in WordPress more broadly moving forward.

    2. I was looking for the HTML options (https://amp.dev/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/?format=stories#display-a-web-story). My interest was the section called “Specify multiple Web Stories”. So, I copied that code and pasted in the HTML section of the page (https://indiawelcomesyou.com/sample-web-story-display/).

    Unfortunately as this is broader Web Stories HTML as opposed to something from the Web Stories plugin, this isn’t something that we can assist with in terms of troubleshooting. If you still wanted to experiment with this approach, I’d recommend reaching out to the Google AMP forum for assistance.

    Bethany

    Thread Starter indiatrotter

    (@indiatrotter)

    Thanks a lot @shetheliving and @adamdunnage …we have the solution now…I tried with the Gutenberg editor and its all perfect!
    We have the web stories displayed as desired.
    Thanks a lot for your help.

    Regards,
    Amitava

    So glad to hear that, Amitava! I’ll mark this topic as resolved but as always, do create a new topic if you have any other questions.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Display Selected Web Story: Using HTML Code’ is closed to new replies.