Copied to clipboard

Flag this post as spam?

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


  • Geofrey 40 posts 161 karma points
    Nov 23, 2017 @ 08:16
    Geofrey
    0

    Insert different images using foreach in different divs using asp net razor

    I am creating a simple app for news, I want at the top of my page to display 5 different images something similar to this page here: http://webdesign-finder.com/tm-socialgeek/

    Here is what I have done so far :

    Static HTML Markup

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
    
      <div class="row">
    
        <div class="col-sm-4" style="background-color:yellow;">
          <div class="Top-News-right">CNN</div>
          <img src="http://static4.businessinsider.com/image/590c551369e69a1e008b4811-480/kim-jong-un.jpg" width="200" height="150" alt="">
          <div class="Top-News-right">BBC</div>
          <img src="http://static4.businessinsider.com/image/590c551369e69a1e008b4811-480/kim-jong-un.jpg" width="200" height="150" alt="">
        </div>
    
        <div class="col-sm-4" style="background-color:pink;">
          <img src="https://pics.me.me/robert-mugabe-quotes-3-jul-at-8-14pm-my-sister-25630967.png" width="200" height="150" alt="">
        </div>
    
        <div class="col-sm-4" style="background-color:green;">
          <div class="Top-News-Left">Aljazeera</div>
          <img src="https://timedotcom.files.wordpress.com/2017/02/trump8.jpg?quality=85" width="200" height="150" alt="">
          <div class="Top-News-Left">NBC</div>
          <img src="https://timedotcom.files.wordpress.com/2017/02/trump8.jpg?quality=85" width="200" height="150" alt="">
        </div>
    
      </div>
    </div>
    
    </body>
    </html>
    

    Partials View for rendering :

    @if (Model.Content.HasValue("caseStudyImages"))
            {
                var caseStudyImagesList = Model.Content.GetPropertyValue<string>("caseStudyImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
                var caseStudyImagesCollection = Umbraco.TypedMedia(caseStudyImagesList).Where(x => x != null);
    
                foreach (var caseStudyImage in caseStudyImagesCollection)
                {  
    
        <div class="row">
    
                <div class="col-sm-4">
                    <img src="@caseStudyImage.Url" style="width:300px;height:300px" />  
                 </div>
    </div>    
                }                                                               
            }
    

    Dynamic HTML Markup

        <!DOCTYPE html>
            <html lang="en">
            <head>
              <title>Bootstrap Example</title>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            </head>
    
    
            <div class="container">
    
            @Html.Partial("../Controller/View", model)
            </div>
      </body>
            </body>
            </html>
    

    The above snippet codes work just fine displays uploaded images to the div created on top of home page, my problem is I want to display specific images to a specific div, I can't figure out how to achieve that, what am I missing in my code or what should I do to get it done?

    The Final Results should look like this: enter image description here

  • Alex Brown 129 posts 620 karma points
    Nov 23, 2017 @ 15:42
    Alex Brown
    100

    There's a couple of ways you could do this.

    You could have three media pickers. One for the right column, one for the centre column and one for the left column. Then something along the lines of:

    var caseStudyImagesCollection1 = Model.Content.GetPropertyValue<string>("caseStudyImages1").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var caseStudyImage2 = Model.Content.GetPropertyValue<int>("caseStudyImage2");
    var caseStudyImagesCollection3 = Model.Content.GetPropertyValue<string>("caseStudyImages3").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    
    <div class="col-sm-4" style="background-color:yellow;">
        @foreach (var caseStudyImage in caseStudyImagesCollection1)
        {
            <div class="Top-News-right">@caseStudyImage.Name</div>
            <img src="@caseStudyImage.Url" width="200" height="150" alt="">
        }
    </div>
    
    <div class="col-sm-4" style="background-color:pink;">
        <img src="@caseStudyImage2.Url" width="200" height="150" alt="">
    </div>
    
    <div class="col-sm-4" style="background-color:green;">
        @foreach (var caseStudyImage in caseStudyImagesCollection3)
        {
            <div class="Top-News-Left">@caseStudyImage.Name</div>
            <img src="@caseStudyImage.Url" width="200" height="150" alt="">
        }
    </div>
    

    Otherwise you could mess around with a grid editor. If you haven't taken a look at these then take a look at this: https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout

  • Geofrey 40 posts 161 karma points
    Nov 25, 2017 @ 23:25
    Geofrey
    0

    Hii, Your method is okay, I created classes in c# for recognizing which image is uploaded eg Big, Small, Medium, and in which column should be inserted dynamically, thanks for your help.

Please Sign in or register to post replies

Write your reply to:

Draft