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

Geofrey 40 posts 161 karma points

Nov 23, 2017 @ 08:16

Umbraco 7

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:

Copy Link

Alex Brown 129 posts 620 karma points

Nov 23, 2017 @ 15:42

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

Copy Link

Geofrey 40 posts 161 karma points

Nov 25, 2017 @ 23:25

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.

Copy Link

is working on a reply...

Flag this post as spam?

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