Copied to clipboard

Flag this post as spam?

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


  • Jason Espin 368 posts 1335 karma points
    Jan 02, 2015 @ 12:31
    Jason Espin
    0

    Slimsy and the HTML5 validator

    Hi,

    First can I start off by saying I absolutely love all that you have done with Slimsy and feel that it is a great addition to the Umbraco toolbox for responsive development and design.

    I have just noticed however when I run my site through the W3C validator, some of the code that Slimsy produces isn't quite valid when it comes to the HTML5 spec.

    I'm sorry to be really picky (and to be honest I'm probably one of the only people who still cares about their pages being 100% validator compliant) but where Slimsy outputs an & symbol it should really be using "& amp;" so that it is fully HTML compliant.

    At the moment my page is giving me a tonne of validator errors purely because of this.

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.axumtech.com%2Fwhy-choose-axum&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices#result

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Jan 02, 2015 @ 12:50
    Jeavon Leopold
    0

    Thanks Jason, glad you like the package.

    Slimsy shouldn't be causing those issues (you're not the only one that cares about validation) for example this is a site also using Slimsy which is valid.

    However it's actually Razor that does the encoding, could you post a code example of how you are rendering one of these images that isn't correctly encoding?

    Jeavon

  • Jason Espin 368 posts 1335 karma points
    Jan 02, 2015 @ 15:31
    Jason Espin
    0

    Hi Jeavon,

    Thanks for your quick response. Here is a code example of how I am rendering the images in question:

    do
        {
            image = null;
            copy = null;
    
            if (products[count].HasValue("image"))
            {
                IPublishedContent imageUrl = Umbraco.TypedMedia(products[count].GetPropertyValue("image"));
                image = "<img src=\"" + imageUrl.GetResponsiveImageUrl(200, 150) + "\" alt=\"" + products[count].Name + "\" class=\"img-responsive img-thumbnail\" />";
            }
            if (products[count].HasValue("title"))
            {
                copy = "<h2>" + products[count].GetPropertyValue<string>("title") + "</h2>";
            }
            if (products[count].HasValue("body"))
            {
                copy = copy + products[count].GetPropertyValue<string>("body");
            }
    
            if (count % 2 == 0)
            {
                if (Request.Browser.IsMobileDevice)
                {
                    left = image;
                    right = copy;
                    leftClass = "productImage";
                    rightClass = null;
                    bodyClass = "even";
                }
                else
                {
                    left = image;
                    leftClass = "productImage";
                    rightClass = null;
                    right = copy;
                    bodyClass = "even";    
                }
            }
            else
            {
                if (Request.Browser.IsMobileDevice)
                {
                    left = image;
                    right = copy;
                    leftClass = "productImage";
                    rightClass = null;
                    bodyClass = "odd";
                }
                else
                {
                    left = copy;
                    right = image;
                    rightClass = "productImage";
                    leftClass = null;
                    bodyClass = "odd";
                }
            }
            <section class="@bodyClass">
                <div class="container">
                    <div class="row product">
                        <div class="col-md-6 @leftClass">
                            @Html.Raw(left)
                        </div>
                        <div class="col-md-6 @rightClass">
                            @Html.Raw(right)
                        </div>
                    </div>
                </div>
            </section>
            count++;
        } while (count < products.Count());
    

    Cheers,

    Jason

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Jan 02, 2015 @ 22:12
    Jeavon Leopold
    100

    Ok, so because you are using @Html.Raw you are missing out on the standard Html Encoding that Razor takes care of.

    I think you should be able to use HttpUtility to do the same job.

    e.g.

            image = "<img src=\"" + HttpUtility.HtmlEncode(imageUrl.GetResponsiveImageUrl(200, 150)) + "\" alt=\"" + products[count].Name + "\" class=\"img-responsive img-thumbnail\" />";
    
Please Sign in or register to post replies

Write your reply to:

Draft