Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Michael 24 posts 137 karma points
    Jun 12, 2014 @ 21:25
    Michael
    0

    Show video block

    Hi

    I am currently playing around with the editor (awesome btw!). I can't seem find an example of how the video block is set up. All new to json and pretty new to razor :P

    Any pointers or links would be greatly appreciated :)

     

    /Michael

  • Amir Khan 1287 posts 2744 karma points
    Jun 12, 2014 @ 22:04
    Amir Khan
    0

    Hi Michael, here's what I use to grab the data from the Sir Trevor editor, I belive this was mostly from their docs. You can uncomment the top part to see what the datatype returns:

    Hope this helps!
    Amir

    @inherits umbraco.MacroEngines.DynamicNodeContext

    @using Newtonsoft.Json;

    @using MarkdownSharp;

    @if (Model.HasValue("SirTrevor")) {

    try {

    dynamic parsedJson = JsonConvert.DeserializeObject(Model.GetPropertyValue("SirTrevor"));
    <!--<pre style="font-size: 11px;">@JsonConvert.SerializeObject(parsedJson, Formatting.Indented)</pre>-->

    var markdown = new MarkdownSharp.Markdown();

    foreach (dynamic block in Model.SirTrevor.data){

    if (block.type == "heading") {
    <h3>@block.data.text</h3>
    }
    if (block.type == "text") {
    <p>@block.data.text</p>
    }
    if (block.type == "video"){
    if (block.data.source == "youtube"){
    <section class="rightColumnBlock">
    <a href="http://www.youtube.com/[email protected]_id" target="_blank"><div class="youtubePreview shadowBorder">
    <figure>
    <img src="http://img.youtube.com/vi/@block.data.remote_id/mqdefault.jpg">
    </figure>
    </div></a>
    </section>
    } else if (block.data.source == "vimeo"){
    <p style="font-size: 9px;">http://vimeo.com/@block.data.remote_id</p>;
    <iframe src="//player.vimeo.com/video/@block.data.remote_id" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    }
    } else if (block.type == "tweet") {

    <blockquote class="twitter-tweet"><p>@block.data.text</p>&mdash; @block.data.name (\@block.data.screen_name) <a href="https://twitter.com/umbraco/statuses/@block.data.id">October 26, 2013</a></blockquote>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

    }

    }

    } catch (Exception ex) { <div>@ex.Message</div> }

    }
  • Michael 24 posts 137 karma points
    Jun 12, 2014 @ 23:15
    Michael
    0

    Hi Amir

    Thank you for the reply. It got me some of the way :)

    I now get content rendered. The only problem is with the iframes, they don't work. The a tag with blank link works fine. You can see it on my umbraco 7 install here

    My code looks like this:

    foreach(dynamic block in CurrentPage.trevortekst.data)
        {
            @*<h2>@block.type</h2>
            <textarea cols="120" rows="8">@block.data</textarea><br />*@
       
            switch((string)block.type)
            {
                case "umbraco_image":
                    var image = Umbraco.Media((int)block.data.id);
                    <img src="@image.GetCropUrl("umbracoFile", "big")" alt="@image.name" />
                    break;
               
                case "ordered_list":
                case "list":
                case "text":
                    string text = block.data.text;
                    @SirTrevor.Markdown(text)
                    break;
               
                case "heading":
                    string heading = block.data.text;
                    string tag = (block.data.type==null) ? "h2" : block.data.type;
                    string formattedHeading = SirTrevor.Markdown(heading).ToString().Replace("p", tag);
                    @Html.Raw(formattedHeading)
                    break;
               
                case "video":
                    if (block.data.source == "youtube"){
                        <a href="http://www.youtube.com/[email protected]_id" target="_blank">
                             <img src="http://img.youtube.com/vi/@block.data.remote_id/mqdefault.jpg">
                        </a>
                        <iframe type="text/html" src="http://www.youtube.com/embed/[email protected]_id" width="640" height="390" frameborder="0"></iframe>

                      } else if (block.data.source == "vimeo"){
                         <p style="font-size: 9px;">http://vimeo.com/@block.data.remote_id</p>;
                         <iframe src="//player.vimeo.com/video/@block.data.remote_id" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                      }
                    break;
               
               
            }
        }

    I think it's something with the src attribute on the iframes?

  • Michael 24 posts 137 karma points
    Jun 18, 2014 @ 22:23
    Michael
    101

    Here is my final code. Now working with both Vimeo & Youtube.

        foreach(dynamic block in CurrentPage.trevortekst.data)
        {
            @*<h2>@block.type</h2>
            <textarea cols="120" rows="8">@block.data</textarea><br />*@
       
            switch((string)block.type)
            {
                case "umbraco_image":
                    var image = Umbraco.Media((int)block.data.id);
                    <img src="@image.GetCropUrl("umbracoFile", "big")" alt="@image.name" />
                    break;
               
                case "ordered_list":
                case "list":
                case "text":
                    string text = block.data.text;
                    @SirTrevor.Markdown(text)
                    break;
               
                case "heading":
                    string heading = block.data.text;
                    string tag = (block.data.type==null) ? "h2" : block.data.type;
                    string formattedHeading = SirTrevor.Markdown(heading).ToString().Replace("p", tag);
                    @Html.Raw(formattedHeading)
                    break;
               
                case "video":
                    if (block.data.source == "youtube"){
                        <iframe type="text/html" src="http://www.youtube.com/embed/@block.data.remote_id" width="640" height="390" frameborder="0"></iframe>
                      } else if (block.data.source == "vimeo"){
                         <iframe src="//player.vimeo.com/video/@block.data.remote_id" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                      }
                    break;
               
               
            }
        }

     

    The only thing that I don't understand is why there is no preview of the image when I insert it. It displays fine on the webpage but seems empty in umbraco.

    Thank you for the help Amir :)

  • Marc Stöcker 104 posts 560 karma points c-trib
    Jun 29, 2014 @ 21:23
    Marc Stöcker
    1

    Michael, if you (still) have trouble with Sir Trevor not showing images in the backoffice and you are using the Image Cropper datatype instead of the classic upload datatype, please try version 0.7.0-beta and see if this fixes it. Thanks!

  • Michael 24 posts 137 karma points
    Aug 27, 2014 @ 07:47
    Michael
    1

    Hi Marc

    Yes the 0.7.0 beta fixed the issue :)

    Thank you

     

    /Michael

  • Marc Stöcker 104 posts 560 karma points c-trib
    Aug 27, 2014 @ 08:55
    Marc Stöcker
    0

    Great. Thanks for the feedback, Michael!

Please Sign in or register to post replies

Write your reply to:

Draft