Hi Clickfarm,

If you are pull out your data using Razor then you can use this method.

@Html.Raw()

Then you should get the HTML outputtet as well.

https://umbraco.tv/videos/umbraco-v7/implementor/working-with-umbraco-data/razor-syntax/htmlraw/

Hope this helps,

/Dennis

Negative, that did not work. I see the following error:

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0103: The name 'project' does not exist in the current context

Source Error:

Line 158:

Below is my code. Line 160 is causing the issue.

@using Umbraco.Web;
@using System.Linq;
@using PROSOCO.Library;
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Layout.cshtml";

    var ctrl = new PROSOCO.UmbracoCMS.Core.API.PersonController();

    var articles = Model.Content.Parent.Children
        .Where(p => p.IsVisible())
        .Where(p => p.ContentType.Alias == "ProjectArticle" || p.ContentType.Alias == "GeneralArticle" || p.ContentType.Alias == "TestimonialArticle")
        .OrderByDescending(p => p.CreateDate)
    ;

    var newsArticles = new List<NewsArticle>();
    var dates = new List<string>();
    var tags = new List<string>();

    foreach (var item in articles)
    {
        var article = new NewsArticle()
        {
            //Body = item.GetPropertyValue("body") != null ? Html.Raw(item.GetPropertyValue("body").ToString()).ToString() : null,
            CreateDate = item.CreateDate.ToString("MMMM dd yyyy"),
            Month = item.CreateDate.ToString("MMMM"),
            Year = item.CreateDate.Year.ToString(),
            PageID = item.Id,
            Summary = item.GetPropertyValue("body") != null ? item.GetPropertyValue("body").ToString() : null,
            Tags = item.GetPropertyValue("tags") != null ? item.GetPropertyValue("tags").ToString().ToLower().Split(',').ToList() : null,
            ThumbnailImageURL = item.GetPropertyValue("thumbnailImage") != null ? Umbraco.Media(item.GetProperty("thumbnailImage").DataValue.ToString()).Url : null,
            Title = item.Name,
            Subheading = item.GetPropertyValue("subheading") != null ? item.GetPropertyValue("subheading").ToString() : null,
            URL = item.Url,
            YoutubeVideoID = item.GetPropertyValue("youtubeVideoID") != null ? item.GetPropertyValue("youtubeVideoID").ToString() : null,
        };

        newsArticles.Add(article);

        var date = string.Format("{0} {1}", article.Month, article.Year);

        if (!dates.Contains(date))
        { 
            dates.Add(date);
        }

        foreach (var tag in article.Tags)
        {
            if (!tags.Contains(tag))
            {
                tags.Add(tag);
            }
        }


    }


}

@section Head {


    <script type="text/javascript" src="/Scripts/directives/angular-youtube-embed.js"></script>




    <script type="text/javascript" src="/Scripts/truncate.js"></script>




    <script type="text/javascript">
        var app = angular.module('app', ['prosocoHeader', 'search-filter', 'ui.bootstrap', 'ngSanitize', 'truncate', 'youtube-embed', 'youtube-bg-img', 'youtube-bg-image-full', 'background-img', 'project-filter', 'ui.utils', 'infinite-scroll'])
            .controller('appCtrl', ['$scope', '$http', '$sce', '$modal', '$filter', '$anchorScroll', '$location', function ($scope, $http, $sce, $modal, $filter, $anchorScroll, $location) {

                $scope.allArticles = @Html.Raw(Json.Encode(newsArticles));
                $scope.dates = @Html.Raw(Json.Encode(dates));
                $scope.tags = @Html.Raw(Json.Encode(tags));

//              console.log($scope.allArticles);
//              console.log($scope.dates);      

                $scope.queProjects = $scope.allArticles;
                $scope.projects = $scope.queProjects.slice(0,2);
//              console.log($scope.projects);

                // infinite scroll, ajax call available with an api is update: https://github.com/sroze/ngInfiniteScroll
                $scope.loadMore = function() {
                    if ($scope.projects.length < ($scope.queProjects.length)) {
                        var last = $scope.queProjects[$scope.projects.length];
//                      console.log(last);
                        if (last != null) {$scope.projects.push(last)}
                    }
                };

                //search categories
                $scope.matchTag = function(category) {
//                  console.log(category);
                    $scope.projects = [];
                    $scope.queProjects = [];
                    angular.forEach($scope.allArticles, function (article) {
                        angular.forEach(article.Tags, function (tag) {
                            if (category == tag) {
//                              console.log(article);
                                $scope.queProjects.push(article);
                            }
                        });                                     
                    });
                    $scope.projects = $scope.queProjects.slice(0,2);
                    $anchorScroll('top');
                    $location.url($location.path());
                    $location.search('category', category);
                }

                //search archive dates
                $scope.matchDate = function(date) {
//                  console.log(date);
                    var thisMonth = date.split(/\b/)[0];
                    var thisYear =  date.split(/\s+/).slice(1,3)[0];
//                  console.log(thisMonth);
//                  console.log(thisYear);

                    $scope.projects = [];
                    $scope.queProjects = [];                    
                    angular.forEach($scope.allArticles, function (article) {
                        if (article.Year == thisYear) {
                                if (article.Month == thisMonth) {
//                                  console.log(article);
                                    $scope.queProjects.push(article);
                                }
                        }
                    }); 
                    $scope.projects = $scope.queProjects.slice(0,2);    
                    $anchorScroll('top');
                    $location.url($location.path());
                    $location.search('date', date);
                }

                //check url
                var checkUrl = $location.search();
                if (checkUrl.category) { $scope.matchTag(checkUrl.category) };
                if (checkUrl.date) { $scope.matchDate(checkUrl.date) };     

            }]);
    </script>


}

<div id="top" class="container-fluid product-line-container">
    <div class="row your-projects news">
        <div class="col-sm-9" infinite-scroll='loadMore()'>
            <div ng-repeat="project in projects" class="project">
              <a ng-href="{{project.URL}}">
                  <h2 ng-bind-html="project.Title"></h2>
                  <div class="summary" ng-bind-html="project.Subheading"></div>
              </a>
              <div class="height-row">
                  <div class="height-fix with-padding">
                      <div ng-if="project.YoutubeVideoID" class="embed-responsive embed-responsive-16by9 video-hover" youtube-background-image-full="{{project.ThumbnailImageURL}}" style="background-size:cover" trigger="project.videoActive" ng-click="project.videoActive = true;">
                          <youtube-video class="embed-responsive-item" video-id="project.YoutubeVideoID" player-vars="{autoplay:1, rel:0}" ng-if="project.videoActive"></youtube-video>
                      </div>
                      <a ng-if="!project.YoutubeVideoID" ng-href="{{project.URL}}">
                        <div class="embed-responsive embed-responsive-16by9" background-image="{{project.ThumbnailImageURL}}"></div>
                    </a>
                  </div>
                  <a class="height-fix body-content-mobile" ng-href="{{project.URL}}">
                      <div class="body-content">
                          <time>{{project.CreateDate}}</time>
                            @Html.Raw(project.Summary)
                      </div>
                      <span class="prosoco-arrow-sml prosoco-arrow-right-right prosoco-arrow-orange">Read More</span>
                  </a>
              </div>
            </div>
        </div>
        <aside class="col-sm-3 article-categories hidden-xs">
            <h4>Categories</h4>
            <ul>
                <li ng-repeat="tag in tags | orderBy:tag">
                    <a ng-click="matchTag(tag)">{{tag}}</a>
                </li>
            </ul>
            <h4>Archive</h4>
            <ul>
                <li ng-repeat="date in dates">
                    <a ng-click="matchDate(date)">{{date}}</a>
                </li>
            </ul>
        </aside>
    </div>
</div>

Hi Clickfarm,

you are not using razor, you are using angular.

Have a look at https://docs.angularjs.org/api/ng/directive/ngBindHtml To render HTML with angular.

Regards David

is working on a reply...