Hi all,

So I'm creating a tag system on my website. So far it's all working great. But now I wish to create a page that shows all my tags under their own tab like you have with a portfolio page.

Example: http://www.don-zalmrol.be/tags?tag=Electronics

My page already displays the tags for a specific tag under it's own tab (i.e. electronics), but as you might guess I wish to populate the other tags in their respective tab as well.

So in short you land a view that displays the tag you've selected, but on the same page you can see the others as well.

Anybody has any idea how I can do this? I don't think I'm far away from the solution as I can already load the projects for specific tags under it's own tab. Now I only need to populate the remaining tabs with the tags!

Thanks!

This is my code so far:

http://pastebin.com/jwGW0NKZ

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{ var portfolio = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text); var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text); string tag = Request.QueryString["tag"];

if (!tag.IsNullOrWhiteSpace())
{
    var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);

    if (publishedContent.Count() > 0)
    {
        @* Show title *@
        <div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
            <center>
                <div>
                    <i class="fa fa-tags"></i>
                </div>

                <br />

                <div class="media-body">
                    <h2>Tags</h2>
                    <p>Browse content by tag</p>
                </div>
            </center>

            <br />

        </div>


        @* Show tag titles in tabs *@
        <ul class="portfolio-filter text-center">

            <li><a class="btn btn-default" href="#" data-filter="*">All tags</a></li>

            @foreach (var tags in tagList)
            {
                <!-- Create a selected tag -->
                if(@tags.Text == @tag)
                {
                    <li><a class="btn btn-default active" href="#" data-filter=".@tag">@tag</a></li>
                }

                @* Show all other tags *@
                else
                {
                    <li><a class="btn btn-default" href="#" data-filter="[email protected]">@tags.Text</a></li>
                }
            }

        </ul>


        <div class="row">
            <div class="portfolio-items">

                @* Start picture content *@
                @foreach (var tags in tagList)
                {
                    @* Put selected tag in the right tag tab *@
                    if(@tags.Text == @tag)
                    {
                        @* Show tag content *@
                        foreach (var item in publishedContent.OrderByDescending(i => i.CreateDate))
                        {                   
                            <div class='portfolio-item @tag col-xs-12 col-sm-4 col-md-3'>
                                <div class="recent-work-wrap">

                                    @* IF the project has a picture *@
                                    @if(item.HasValue("pictureOfTheProject"))
                                    {
                                        var featureImage = Umbraco.TypedMedia((int)item.GetPropertyValue("pictureOfTheProject")); 
                                        <img class="img-responsive" src="@featureImage.GetCropUrl(250, 250)" alt='@item.GetPropertyValue("titleOfTheProject")' /> 

                                        <div class="overlay">
                                            <div class="recent-work-inner">

                                                <h3><a href="@item.Url">@item.GetPropertyValue("titleOfTheProject")</a></h3>

                                                <a class="preview" href="@featureImage.GetCropUrl(250, 250)" rel="prettyPhoto">
                                                    <i class="fa fa-eye"></i> View
                                                </a>
                                            </div>
                                        </div>
                                    }

                                    @* Else when the project doesnt have a picture, show default one *@
                                    else
                                    {
                                        var noImage = "http://www.don-zalmrol.be/media/1440/no_image_available.png";
                                        <img class="img-responsive" src="@noImage.GetCropUrl(250, 250)" alt="No image" />

                                        <div class="overlay">
                                            <div class="recent-work-inner">

                                                <h3><a href="@item.Url">@item.GetPropertyValue("titleOfTheProject")</a></h3>

                                                <a class="preview" href="@noImage.GetCropUrl(250, 250)" rel="prettyPhoto">
                                                    <i class="fa fa-eye"></i> View
                                                </a>

                                            </div>
                                        </div>
                                    }

                                </div>  
                            </div>
                        }
                    }

                    @* Put the other tags under there own tab *@
                    else
                    {

                    }
                }
                @* End dynamic tags *@

            </div>
        </div>
    }

    @* No content matching the tag? *@
    else
    {
        <p>There isn't any content matching that tag.</p>

        @Html.Partial("TagList")
    }
}

@* Show the tag list with amount *@
else
{
    @Html.Partial("TagList")
}

}