Ok, how's this?

// Get all child items based on the document type 'CWS_NewsItem' and group them is 4
<div class="photoGrid clearfix">
@foreach (var group in  Model.Content.Descendants("CWS_NewsItem").InGroupsOf(4))
{
    foreach(var item in group)
    {
        // find you whether is the first item of the group and set trhe css class
        var itemClass = item.IsFirst("first item left", "item left");

        string imageUrl;

        if (Model.Content.HasValue("photo"))
        {
            var mediaItemPath = "~" + Umbraco.TypedMedia(Model.Content.GetPropertyValue("photo")).GetPropertyValue<string>("umbracoFile");
            imageUrl = CropUp.GetUrl(mediaItemPath, new ImageSizeArguments() { CropAlias = "thumbnail" });            
        }
        else
        {
            // If there is not photo, fallback to the placeholder
            imageUrl = "~/img/pathtoplaceholder.jpg";
        }

        <div class="@itemClass">
            <a id="gallery" rel="gal" href="@imageUrl"><img src="@imageUrl" alt="@item.Name"/>@item.Name</a>
            <span>@item.PhotoText</span>
        </div>
    }

    // Clear after each group of 4
    <div class="clearBoth"> </div>
}
</div>

I have made a couple of assumptions, "photo" is the alias of the property using a media picker on your document type and that you want the images from every node of type CWS_NewsItem

I am now wondering if actually you don't have a media picker and perhaps the upload data type is on the document type?

as you can see on the picture.  this is a datatype named cropUp and is on a documenttype.  I need the gallery to show the thumbnails and then for the the target to be the photo. 

Ok, so assuming that your upload data type property alias is "uploadImage" (name is Upload Image in screenshot) and you want the full original image path for the anchor:

@{
    // Get all child items based on the document type 'CWS_NewsItem' and group them is 4
    <div class="photoGrid clearfix">
        @foreach (var group in Model.Content.Descendants("CWS_NewsItem").InGroupsOf(4))
        {
            foreach (var item in group)
            {
                // find you whether is the first item of the group and set trhe css class
                var itemClass = item.IsFirst("first item left", "item left");

                string imageUrl;
                string imageThumbUrl;


                if (Model.Content.HasValue("uploadImage"))
                {
                    imageUrl = "~" + Model.Content.GetPropertyValue<string>("uploadImage");
                    imageThumbUrl = CropUp.GetUrl(imageUrl, new ImageSizeArguments() { CropAlias = "thumbnail" });
                }
                else
                {
                    // If there is no photo, fallback to the placeholder                
                    imageUrl = "~/img/pathtoplaceholder.jpg";
                    imageThumbUrl = "~/img/pathtothumbplaceholder.jpg";
                }

                <div class="@itemClass">
                    <a id="gallery" rel="gal" href="@imageUrl"><img src="@imageThumbUrl" alt="@item.Name"/>@item.Name</a>
                    <span>@item.GetPropertyValue("PhotoText")</span>
                </div>
            }

            // Clear after each group of 4
            <div class="clearBoth"> </div>
        }
    </div>
}

Just edited the above code to remove the .Where as I think you do want to display placeholders if no value is set

I think we are getting close.  I was hoping I could just pull both crops from CropUp.  in V4 i was able to have two datatypes using the imageresizer http://our.umbraco.org/projects/developer-tools/image-resizer. ; one that was called thumbnail and one datatype called photo.  I would upload the image and it generate the thumbnail and the photo.If you look at the picture again you will see the manual croppings.  I need to query one for the thumbnail and one for the photo.   

I see, you can do that:

@{
    // Get all child items based on the document type 'CWS_NewsItem' and group them is 4
    <div class="photoGrid clearfix">
        @foreach (var group in Model.Content.Descendants("CWS_NewsItem").InGroupsOf(4))
        {
            foreach (var item in group)
            {
                // find you whether is the first item of the group and set trhe css class
                var itemClass = item.IsFirst("first item left", "item left");

                string imageThumbUrl;
                string imagePhotoUrl;

                if (Model.Content.HasValue("uploadImage"))
                {
                    var imageUrl = "~" + Model.Content.GetPropertyValue<string>("uploadImage");
                    imagePhotoUrl = CropUp.GetUrl(imageUrl, new ImageSizeArguments() { CropAlias = "photo" });
                    imageThumbUrl = CropUp.GetUrl(imageUrl, new ImageSizeArguments() { CropAlias = "thumbnail" });
                }
                else
                {
                    // If there is no photo, fallback to the placeholder                
                    imagePhotoUrl = "/img/pathtoplaceholder.jpg";
                    imageThumbUrl = "/img/pathtothumbplaceholder.jpg";
                }

                <div class="@itemClass">
                    <a id="gallery" rel="gal" href="@imagePhotoUrl"><img src="@imageThumbUrl" alt="@item.Name"/>@item.Name</a>
                    <span>@item.GetPropertyValue("PhotoText")</span>
                </div>
            }           

            // Clear after each group of 4
            <div class="clearBoth"> </div>
        }
    </div>
}

I think the CropAlias need to be switched

Yes Indeed, updated above :-)

I do not think that umbraco is seeing

Model.Content.Descendants("CWS_NewsItem").InGroupsOf(4)


when i view page source i get 



<div class="Photo"><div class="photoGrid clearfix"></div></div>

I just removed some tildas from the above code that we don't need anymore.

Are all of the pages of type Cws_NewsItem descendants of the page that you are executing this code on?

that was actually a forgotten comment i need to remove.  the structure is actually.

gallery list page ( list gallery thumbnails)

  gallery  ( list photos that are children)

      photo ( the actually photo)

With Crop up i may be able to eliminate some of the pages. 

    <div class="Photo">
@{
    // Get all child items based on the document type 'Gallery' and group them is 4
    <div class="photoGrid clearfix">
        @foreach (var group in Model.Content.Descendants("Gallery").InGroupsOf(4))

        {
            foreach (var item in group)
            {
                // find you whether is the first item of the group and set trhe css class
                var itemClass = item.IsFirst("first item left", "item left");

                string imageThumbUrl;
                string imagePhotoUrl;

                if (Model.Content.HasValue("uploadImage"))
                {
                    var imageUrl = "~" + Model.Content.GetPropertyValue<string>("uploadImage");
                    imagePhotoUrl = "~" + CropUp.GetUrl(imageUrl, new ImageSizeArguments() { CropAlias = "photo" });
                    imageThumbUrl = "~" + CropUp.GetUrl(imageUrl, new ImageSizeArguments() { CropAlias = "thumbnail" });
                }
                else
                {
                    // If there is no photo, fallback to the placeholder                
                    imagePhotoUrl = "~/img/pathtoplaceholder.jpg";
                    imageThumbUrl = "~/img/pathtothumbplaceholder.jpg";
                }

                <div class="@itemClass">
                    <a id="gallery" rel="gal" href="@imagePhotoUrl"><img src="@imageThumbUrl" alt="@item.Name"/>@item.Name</a>
                    <span>@item.GetPropertyValue("PhotoText")</span>
                </div>
            }           

            // Clear after each group of 4
            <div class="clearBoth"> </div>
        }
    </div>
}

    </div>

Ok, so if you know the document type you need to select then to get a collection containing all pages of that document type in the whole website regardless of which node this is code is being executed on, try:

    @foreach (var group in Model.Content.AncestorOrSelf(1).Descendants("CWS_NewsItem").InGroupsOf(4))

Looks good, you don't need those tildas on imagePhotoUrl and imageThumbUrl, have a look back at my edited snippet

still no luck.  not seeing CropAlias.  it is passing over and finding the placeholder

Ok, so does the Gallery doc type have the uploadImage propertyalias of data type upload or is that another level down on doc type photo?

The upload Image is just a upload.  all the images are in the cropUp datatype in the photo documentType. 

What is the alias of the property shown above as "Upload Image"?

cropUp

Not the CropUp property, we don't use that, we only need the alias of the property of data type Upload

cropUp I appreciate all you help and just want to figure this out. 

No worries, really close now, I see it, the property is called umbracoFile, so:

   <div class="Photo">
@{
    // Get all child items based on the document type 'Gallery' and group them is 4
    <div class="photoGrid clearfix">
        @foreach (var group in Model.Content.Descendants("Gallery").InGroupsOf(4))

        {
            foreach (var item in group)
            {
                // find you whether is the first item of the group and set trhe css class
                var itemClass = item.IsFirst("first item left", "item left");

                string imageThumbUrl;
                string imagePhotoUrl;

                if (Model.Content.HasValue("umbracoFile"))
                {
                    var imageUrl = "~" + Model.Content.GetPropertyValue<string>("umbracoFile");
                    imagePhotoUrl = CropUp.GetUrl(imageUrl, new ImageSizeArguments() { CropAlias = "photo" });
                    imageThumbUrl = CropUp.GetUrl(imageUrl, new ImageSizeArguments() { CropAlias = "thumbnail" });
                }
                else
                {
                    // If there is no photo, fallback to the placeholder                
                    imagePhotoUrl = "/img/pathtoplaceholder.jpg";
                    imageThumbUrl = "/img/pathtothumbplaceholder.jpg";
                }

                <div class="@itemClass">
                    <a id="gallery" rel="gal" href="@imagePhotoUrl"><img src="@imageThumbUrl" alt="@item.Name"/>@item.Name</a>
                    <span>@item.GetPropertyValue("PhotoText")</span>
                </div>
            }           

            // Clear after each group of 4
            <div class="clearBoth"> </div>
        }
    </div>
}

    </div>

Something must be missing.  I still have a blank gallery.  Krazy. 

Ok, I see this is on doc type Photo, is there one of these under each Gallery type item? Could you screenshot your content tree?

here is the content tree.  you can right click the gallery and add a photo. 

Ok, and we want to list every photo then?

That would be @foreach (var group in Model.Content.Descendants("Photo").InGroupsOf(4))

Just to check, are you executing this code on the Gallery node as shown in the content tree?

Yes I am trying to get the children ( photo) of the gallery node.

Good, working now?

I have an empty DIV

<div class="Photo">

no Sir not working

is working on a reply...