Projection

Topics: Core, General, Localization
Sep 26, 2012 at 1:41 PM

Hi everybody,

I made a projection page with some Bio areas in the projection page. It looks like this:

titel: Waaier

Omschrijving: Mooie waarier , ja dat is zo

plaatje: ~/Media/Default/images/image86.JPG

titel: hoi

Omschrijving: hoi

plaatje:

titel: hoiTest

Omschrijving: ok

plaatje: ~/Media/Default/images/_MG_1024.JPG

titel: hohoiTest

Omschrijving: Dit is een derde zilver

plaatje: ~/Media/Default/images/_MG_1024.JPG

titel: zilver4

Omschrijving: zilver4

plaatje:

titel: Zilveren lepel

Omschrijving: Dit is een vierder zilver post

plaatje: ~/Media/Default/images/image81.JPG

But I dont see the image, only the url of the image. And how can I put several images in an area? For example in this area:

titel: Zilveren lepel

Omschrijving: Dit is een vierder zilver post

plaatje: ~/Media/Default/images/image81.JPG


Sep 26, 2012 at 3:55 PM

Hi,

I don't know how projection works except by using query so if you have any link permitting to learn projection don't hesitate.

About your issue, you need to override the template in your theme (in your case plaatje). For example, Views/Fields/MediaPicker-NameOfYourField.cshtml:

 @using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
}
@if (!String.IsNullOrWhiteSpace(url)) {
    <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText" class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
}
@* Other available properties

    Alternate Text: @Model.ContentField.AlternateText
    Class: @Model.ContentField.Class
    Style: @Model.ContentField.Style
    Alignment @Model.ContentField.Alignment
    Width: @Model.ContentField.Width
    Height: @Model.ContentField.Height
*@

Sep 26, 2012 at 8:03 PM
Edited Sep 26, 2012 at 8:15 PM

Hi ddoc,

 

THX for your Replay. But so you have to choose an: media-picker field? I just choose: Image Field.

And the name of the page = Bios2

 

But I dont understand this: Views/Fields/MediaPicker-NameOfYourField.cshtml:

My directory structure look like this: Moduel/Themes/brocanteLayout/Views.

I create in the Views a new cshtml file with the name: Content.Summary.Bios2-plaatje.cshtml

Sep 26, 2012 at 8:11 PM

Did you use Shape tracing? ,You need to override the template.

http://docs.orchardproject.fr/Documentation/Customizing-Orchard-using-Designer-Helper-Tools

http://docs.orchardproject.net/Documentation/Alternates

Sep 26, 2012 at 8:21 PM
Edited Sep 26, 2012 at 8:25 PM

Oh, THX man!! it works,. But  It looks now like this:

How to manage the distance between every item?

titel: hohoiTest

Omschrijving: Dit is een derde zilver

titel: zilver4

Omschrijving: zilver4

titel: Zilveren lepel

Omschrijving: Dit is een vierder zilver post

And how to get more images in 1 area? I mean in 1 red box. I mean to get more spacee between every red box. Because some red boxes are hitting eatch other

Sep 27, 2012 at 9:06 AM

Hi,

I don't know how to solve it. I start to play with Orchard from 2 days :p

My assumption is you need to use developper toolbar from chrome and identify what is the difference in the dom structure between your red box.

I dont think it's realted to a css class because a space can be a margin or a padding so, you propably have the same class apply to each read box.

Maybe it's related to the html in the content data displayed in the redbox.

Sorry I cant' help you deeper.

Sep 27, 2012 at 9:18 AM
Edited Sep 27, 2012 at 9:18 AM

ok ddoc,

thx anyway for ur replay of the images.

And just what you say. I just have to dig deeper in Orchard :)

Greetings,

 

Niels.

Sep 27, 2012 at 11:16 AM

Oke,

I try it like this:

[code]

@using Orchard.Mvc.Html
@using Orchard.Utility.Extensions;

@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
    string alignment = Model.ContentField.Alignment;
}

@{ var fileName =Model.ContentItem.porseleincollectie.porseleinImage;
if (!string.IsNullOrEmpty(url)) {
   
    <img src="@Url.Content(url)" alt="@Model.Title"
style="float:left;margin-right:50px;" />
}
}


@Display(Model.ContentItem.porseleincollectie.Omschrijving.Value).<p />

[/code]

 

But now the images are not in the red boxes, it look likes this:

 

itel: porselein4

Omschrijving: porselein4

porselein4.

 

titel: porselein6

Omschrijving: Dit is een mooi porseleinen plaatje

Dit is een mooi porseleinen plaatje.
Sep 27, 2012 at 11:23 AM
Edited Sep 27, 2012 at 12:31 PM

But where are the dimensions of the layout? I mean in with file are the dimensions of the red box?

I found this: <div id="shape-tracing-overlay" style="display: block; top: 630px; left: 323.5px; width: 372px; height: 83px;"></div>

But it is not in Site.css.

Sep 27, 2012 at 12:38 PM
Edited Sep 27, 2012 at 12:58 PM

If I do for example do this:

@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
    string alignment = Model.ContentField.Alignment;
}
@if (!String.IsNullOrWhiteSpace(url)) {
    <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText" style="float:left;margin-right:50px;" class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
}

@if(!string.IsNullOrWhiteSpace(alignment))
{
  
}

 

Then the images are appearing under the red box and not in the red box

Sep 27, 2012 at 1:41 PM

I just want some space between every red box. Now it is 1 red box. Can anybody help?

 

THX!!

Sep 27, 2012 at 11:30 PM

Hi savantKing,

 

"<div id="shape-tracing-overlay" style="display: block; top: 630px; left: 323.5px; width: 372px; height: 83px;"></div>"

This class is coming when you select a block and activated the shape tracing module.

So the dom is changing by your selection and the class shape-tracing-overlay is injected.

if you search the class, found in Orchard-designertools-shapetracing.js and  and ShapeTracingTemplates.cshtml

did you use google developper or firebug to check the dom about the issue with red box?

I see you add media-picker-field-@name.HtmlClassify(), do you add a new class in site.css?

 

I'm sorry, i dont even try to custom display from a projection.

I am beginning to work on project http://orchard.codeplex.com/discussions/397159 

You can see in the last post my question.

I see you already did it. so if you have any idea it will be good :)

Sep 28, 2012 at 4:06 PM

Hi ddoc,

 

I use firefox firebug with code tracing from orchard: and if I click then on a red box I see this:

But Content.Summary.cshtml has the context just this:

<div style="background-color:#860707;">
@Display(Model.Header)
@Display(Model.Content)
</div>

 

 

Oct 1, 2012 at 5:17 PM

Hi,

Can you copy past the modified dom?

Oct 8, 2012 at 12:43 PM
Edited Oct 8, 2012 at 12:49 PM

HI ddoc,

 

sorry, I was on holiday. But what do you mean with dom? The HTML?

This is my layour.cshtml:

 

[code]

@functions {
    // To support the layout classifaction below. Implementing as a razor function because we can, could otherwise be a Func<string[], string, string> in the code block following.
    string CalcuClassify(string[] zoneNames, string classNamePrefix) {
        var zoneCounter = 0;
        var zoneNumsFilled = string.Join("", zoneNames.Select(zoneName => { ++zoneCounter; return Model[zoneName] != null ? zoneCounter.ToString() : "";}).ToArray());
        return HasText(zoneNumsFilled) ? classNamePrefix + zoneNumsFilled : "";
    }
}
@{
    /* Global includes for the theme
    ***************************************************************/
    
    SetMeta("X-UA-Compatible", "IE=edge,chrome=1");
    Style.Include("http://fonts.googleapis.com/css?family=Lobster&subset=latin");
    Style.Include("site.css");
 
    /* Some useful shortcuts or settings
    ***************************************************************/
 
    Func<dynamic, dynamic> Zone = x => Display(x); // Zone as an alias for Display to help make it obvious when we're displaying zones
 
    /* Layout classification based on filled zones
    ***************************************************************/
 
    //Add classes to the wrapper div to toggle aside widget zones on and off
    var asideClass = CalcuClassify(new [] {"AsideFirst", "AsideSecond"}, "aside-"); // for aside-1, aside-2 or aside-12 if any of the aside zones are filled
    if (HasText(asideClass)) {
        Model.Classes.Add(asideClass);
    }
 
    //Add classes to the wrapper div to toggle tripel widget zones on and off
    var tripelClass = CalcuClassify(new [] {"TripelFirst", "TripelSecond", "TripelThird"}, "tripel-"); // for tripel-1, triple-2, etc. if any of the tripel zones are filled
    if (HasText(tripelClass)) {
        Model.Classes.Add(tripelClass);
    }
 
    //Add classes to the wrapper div to toggle quad widget zones on and off
    var footerQuadClass = CalcuClassify(new [] {"FooterQuadFirst", "FooterQuadSecond", "FooterQuadThird", "FooterQuadFourth"}, "split-"); // for quad-1, quad-2, etc. if any of the quad zones are filled
    if (HasText(footerQuadClass)) {
        Model.Classes.Add(footerQuadClass);
    }
 
    /* Inserting some ad hoc shapes
    ***************************************************************/
 
    WorkContext.Layout.Header.Add(New.Branding(), "5"); // Site name and link to the home page
    WorkContext.Layout.Footer.Add(New.BadgeOfHonor(), "5"); // Powered by Orchard
    WorkContext.Layout.Footer.Add(New.User(), "10"); // Login and dashboard links
 
    /* Last bit of code to prep the layout wrapper
    ***************************************************************/
    
    Model.Id = "layout-wrapper";
    var tag = Tag(Model, "div"); // using Tag so the layout div gets the classes, id and other attributes added to the Model
}
@tag.StartElement
@if (Model.Header != null) {
<header id="layout-header" class="group">
    <div id="header">
        @Zone(Model.Header)
    </div>
</header>
}
@if (Model.Navigation != null) {
<div id="layout-navigation" class="group">
    @Zone(Model.Navigation)
</div>
}
@if (Model.Featured != null) {
<div id="layout-featured" class="group">
    @Zone(Model.Featured)
</div>
}
@if (Model.BeforeMain != null) {
<div id="layout-before-main" class="group">
    @Zone(Model.BeforeMain)
</div>
}
<div id="layout-main-container">
<div id="layout-main" class="group">
    @if (Model.AsideFirst != null) {
    <aside id="aside-first" class="aside-first group">
        @Zone(Model.AsideFirst)
    </aside>
    }
    <div id="layout-content" class="group">
        @if (Model.Messages != null) {
        <div id="messages">
            @Zone(Model.Messages)
        </div>
        }
        @if (Model.BeforeContent != null) {
        <div id="before-content">
            @Zone(Model.BeforeContent)
        </div>
        }
        @* the model content for the page is in the Content zone @ the default position (nothing, zero, zilch) *@
        @if (Model.Content != null) {
        <div id="content" class="group">
            @Zone(Model.Content)
        </div>
        }
        @if (Model.AfterContent != null) {
        <div id="after-content">
            @Zone(Model.AfterContent)
        </div>
        }
    </div>
    @if (Model.AsideSecond != null) {
    <aside id="aside-second" class="aside-second">
        @Zone(Model.AsideSecond)
    </aside>
    }
</div>
</div>
@if (Model.AfterMain != null) {
<div id="layout-after-main" class="group">
    @Zone(Model.AfterMain)
</div>
}
@if (Model.TripelFirst != null || Model.TripelSecond != null || Model.TripelThird != null) {
<div id="layout-tripel-container">
    <div id="layout-tripel" class="group">@* as in beer *@
        
        
 
             <table style="width:60%">
            <tr>
                <td> @if (Model.TripelFirst != null) {
                         <div id="tripel-first">
                             @Zone(Model.TripelFirst)
                         </div>
                     }</td>
                <td> @if (Model.TripelSecond != null) {
                         <div id="tripel-second">
                             @Zone(Model.TripelSecond)
                         </div>
                     }</td>
                <td> @if (Model.TripelThird != null) {
                         <div id="tripel-third">
                             @Zone(Model.TripelThird)
                         </div>
                     }</td>
            </tr>
            
            <tr>
                <td><br/></td>
            </tr>
 
            <tr>
                <td>@if (Model.TripelFourth!= null) {
                        <div id="tripel-fourth">
                            @Zone(Model.TripelFourth)
                        </div>
                    }</td>
                <td>
                    
                    @if (Model.TripelFifth!= null) 
                    {
                        <div id="tripel-fifth">
                            @Zone(Model.TripelFifth)
                        </div>
                    }
                </td>
                
 
                <td>
                    @if (Model.TripelSixth!= null) {
                        <div id="tripel-sixth">
                            @Zone(Model.TripelSixth)
                        </div>
                    } 
 
                </td>
            </tr>
            
            <tr>
                <td> <br/></td>
            </tr>
 
            <tr>
                <td>
                    @if (Model.TripelSeventh!= null) {
                        <div id="tripel-seventh">
                            @Zone(Model.TripelSeventh)
                        </div>
                    }  
                </td>
                
                <td>
                    @if (Model.TripelTenth!= null) {
                        <div id="tripel-tenth">
                            @Zone(Model.TripelTenth)
                        </div>
                    } 
                    
                     
                </td>
 
                <td>
                    @if (Model.TripelNinth!= null) {
                        <div id="tripel-ninth">
                            @Zone(Model.TripelNinth)
                        </div>
                    } 
                </td>
            </tr>
        </table>
       <br/>
</div>
</div>
}
<div id="layout-footer" class="group">
    <footer id="footer">
        <div id="footer-quad" class="group">
            @if (Model.FooterQuadFirst != null) {
            <div id="footer-quad-first">
                @Zone(Model.FooterQuadFirst)
            </div>
            }
            @if (Model.FooterQuadSecond != null) {
            <div id="footer-quad-second">
                @Zone(Model.FooterQuadSecond)
            </div>
            }
            @if (Model.FooterQuadThird != null) {
            <div id="footer-quad-third">
                @Zone(Model.FooterQuadThird)
            </div>
            }
            @if (Model.FooterQuadFourth != null) {
            <div id="footer-quad-fourth">
                @Zone(Model.FooterQuadFourth)
            </div>
            }
        </div>
        @if(Model.Footer != null) {
        <div id="footer-sig" class="group">
            @Zone(Model.Footer)
        </div>
        }
    </footer>
</div>
@tag.EndElement

[/code]

 

Niels.

Oct 10, 2012 at 12:44 PM

If it is without picture it renders good, but with picture it doesnt' s renders good.

Coordinator
Oct 10, 2012 at 4:52 PM

This thread has gotten so long that it's hard to see what's resolved and what's still a problem. Can you please summarize what the remaining issues are?

Oct 10, 2012 at 5:43 PM
Edited Oct 10, 2012 at 5:44 PM

The pictures doesn' s fit in the red box. only the text. And there is no space between the red boxes.

Coordinator
Oct 10, 2012 at 5:50 PM

So the pictures are displayed but they don't fit in the box? Both this and the spacing thing look like CSS issues.

Oct 11, 2012 at 9:18 AM

ok. But without this:

@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
}
@if (!String.IsNullOrWhiteSpace(url)) {
    @Model.ContentField.AlternateText
}

I even didnt saw the pictures in the red boxes. And it looks now like this:

titel: porselein3

Omschrijving: porselein3

titel: porselein4

Omschrijving: porselein4

titel: porselein6

Omschrijving: Dit is een mooi porseleinen plaatje

So the pictures are under the red boxes. How to fix that?

 

THX

Oct 11, 2012 at 11:57 AM

And I have it now like this:

Connent.summary.cshtml:

@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
    string alignment = Model.ContentField.Alignment;
}
@if (!String.IsNullOrWhiteSpace(url)) {
    
    @Model.ContentField.AlternateText
    
}

Coordinator
Oct 11, 2012 at 4:40 PM

Can you paste the fragment of code for that red div as seen from the browser's source view? (please use the </> button to do that so that your code gets correctly formatted)

Oct 11, 2012 at 6:36 PM

I use Firebug with firefox and when I hover over the red box I get this for html:

[html]

<tr class="" shape-id="3"><td shape-id="3">
<div style="background-color:#860707;" shape-id="16">
    <p class="text-field" shape-id="18"><span class="name" shape-id="18">titel:</span> <span class="value" shape-id="18">porselein3</span></p>
    <p class="text-field" shape-id="19"><span class="name" shape-id="19">Omschrijving:</span> <span class="value" shape-id="19">porselein3</span></p>
    <a target="_blank" href="Media/Default/porseleincollectie/porseleinImage/Image56.1.JPG" shape-id="21"><img class="media-picker-field media-picker-field-porselein-image" style="float:left;margin-right:10px;" alt="" src="Media/Default/porseleincollectie/porseleinImage/Image56.1.JPG" shape-id="21"></a>
    <br shape-id="21">
</div>
</td></tr>

[/html]

And for css:

[css]

#shape-tracing-container a, #shape-tracing-container a:link, #shape-tracing-container a:visited {
    background-colortransparent;
    colorrgba(0, 94, 153, 0.8);
    text-decorationnone;
}

[/css]

 

Oct 11, 2012 at 6:37 PM
Edited Oct 11, 2012 at 6:41 PM

<tr class="" shape-id="3"><td shape-id="3">

<div style="background-color:#860707;" shape-id="16">
    <p class="text-field" shape-id="18"><span class="name" shape-id="18">titel:</span> <span class="value" shape-id="18">porselein3</span></p>
    <p class="text-field" shape-id="19"><span class="name" shape-id="19">Omschrijving:</span> <span class="value" shape-id="19">porselein3</span></p>
    <a target="_blank" href="Media/Default/porseleincollectie/porseleinImage/Image56.1.JPG" shape-id="21"><img class="media-picker-field media-picker-field-porselein-image" style="float:left;margin-right:10px;" alt="" src="Media/Default/porseleincollectie/porseleinImage/Image56.1.JPG" shape-id="21"></a>
    <br shape-id="21">
</div>
</td></tr>

Coordinator
Oct 11, 2012 at 7:01 PM

This is 100% a CSS problem as far as I can tell. Those inline styles are probably responsible. They look like they were entered in the media picker.

Oct 12, 2012 at 9:50 AM

And how to change it then?

THX

Oct 12, 2012 at 2:46 PM
Edited Oct 12, 2012 at 2:48 PM

I it is like this:

 

titel: Mooie doos

Omschrijving: dat is een mooie doos

plaatje koper: ~/Media/Default/images/_MG_1024.JPG
Then it is in the red box. But if it is showing a real image and not an url it is out of the red box??
Coordinator
Oct 12, 2012 at 5:42 PM

Get rid of those styles from the media picker and tweak your theme's stylesheet to get the results you want.

Oct 13, 2012 at 10:33 AM

huh?? Weird

Oct 13, 2012 at 4:26 PM
Edited Oct 13, 2012 at 4:26 PM

So if I do this:

 

@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
    string alignment = Model.ContentField.Alignment;
}
@if (!String.IsNullOrWhiteSpace(url)) {
    
    <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText" style="float:left;margin-right:10px;" class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
    <br/>
}

 

Then the image is visible but not in the red box

Coordinator
Oct 13, 2012 at 6:55 PM

As I said, remove that inline style.

Oct 13, 2012 at 7:33 PM

The inline style??

That is this? that doesnt work:

<a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText" style="float:left;margin-right:10px;" class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
    <br/>
Coordinator
Oct 13, 2012 at 8:08 PM

Not the inline CODE, the inline STYLE. That attribute style=..., remove it.

Oct 14, 2012 at 9:14 AM

 

Oke, I have it now like this:

@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
    string alignment = Model.ContentField.Alignment;
}
@if (!String.IsNullOrWhiteSpace(url)) {
    
    <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText"/></a>
    <br/>
}

But then It is 1 red box. I mean not different red boxes:

titel: Mooie Boxen

Omschrijving: Dit zijn mooie boxen

titel: Mooie doos

Omschrijving: dat is een mooie doos


There is no space between the red boxes.

 

Coordinator
Oct 14, 2012 at 7:41 PM

I don't understand what you're trying to do.

Oct 14, 2012 at 7:44 PM
Edited Oct 14, 2012 at 7:45 PM

I want red box with title, omschrijving and  picture. Then a other red box with: title, omschrijving, picutre, then other red box...

but between the red boxes there has to be some space. See my first post here, then u will see it - there is also some space(white) between the red boxes.

Coordinator
Oct 14, 2012 at 8:30 PM

That's a CSS question, not an Orchard question, but margin-bottom should do the trick.

Oct 14, 2012 at 8:40 PM

I triied that, like this:

@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
    string alignment = Model.ContentField.Alignment;
}
@if (!String.IsNullOrWhiteSpace(url)) {
    
    <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText" style="float:right;margin-bottom:100px;" class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
    <br/>
}

but then again the picture is not in the red box.
Coordinator
Oct 14, 2012 at 11:30 PM

Of course: you put that float right back in there. You need to understand what you're doing instead of shooting in the dark like that. If you don't understand why you're doing something, don't do it.

Oct 14, 2012 at 11:34 PM

I had it like this:

 

@if (!String.IsNullOrWhiteSpace(url)) {
    
    <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText;"margin-bottom:100px;/></a>
    <br/>
}

But then again there is no space between the red boxes
Coordinator
Oct 14, 2012 at 11:51 PM

It's not on the image that you need to put a margin, it's on the div.

You should also put your styles in a stylesheet and use classes to apply them.

Oct 15, 2012 at 8:47 AM
Edited Oct 15, 2012 at 2:37 PM

ok, for example?

How to put ur own css and in orchard?

Coordinator
Oct 15, 2012 at 4:35 PM

Look for .css files in the source tree, and for usage of Style.Include.

Oct 15, 2012 at 5:05 PM

If I activate the view state in Orchard and I put on a red box I get the file: content.Summary.cshtml:

<div style="background-color:#860707;">
@Display(Model.Header)
@Display(Model.Content)
@Display(Model.MediaPicker)
</div>

 

But what to to change then? there is some space between the red boxes?

THX

Oct 15, 2012 at 5:56 PM

Ofcourse I have Site.css - in the  Style folder. But I cant put there just 'normal' css, because the structure is different - orchard works with zones.

Coordinator
Oct 15, 2012 at 8:11 PM

What do you mean "activate the view state"??

Did you even try to put a margin-bottom style property on that div like I had told you two messages ago?

What does this mean: "I cant put there just 'normal' css, because the structure is different"? What's preventing you? What happens when you try?

Oct 15, 2012 at 9:59 PM

I triied margin-bottem:

@if (!String.IsNullOrWhiteSpace(url)) {
    
    <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText;"margin-bottom:100px;/></a>
    <br/>
}

But then again there is no space between the red boxes
Coordinator
Oct 15, 2012 at 11:21 PM
Edited Oct 15, 2012 at 11:22 PM

That's not even valid HTML, and it's not on the DIV.

Now you're messing with me, aren't you?

Oct 15, 2012 at 11:35 PM

?? messing with you?? I just want to have the solution. But you don't give me some concrete code. For what I messing you?

I still don't have the solution.

Oct 16, 2012 at 12:44 PM

This is the html code for the red box:

<div id="shape-tracing-overlay" style="display: block; top: 517px; left: 2px; width: 353px; height: 519px;"></div>

But where I put it in? I triied in style.css but that doesnt work

Oct 16, 2012 at 12:58 PM

I try something like this:

@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
    string alignment = Model.ContentField.Alignment;
}
@if (!String.IsNullOrWhiteSpace(url)) {
   
    <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText" style="display: block; top: 517px; left: 2px; width: 353px; height: 200px;" /></a>
    
    <br/>
  
}

but then again there is no space between the red boxes

Oct 16, 2012 at 2:14 PM

ahhh, finaly solved:

I just put in Layout.cshtml a reference to a css latyou:

html, body, ul, li, h1, h2, h3, h4 {
	margin: 0px;
	padding: 0px;
	color: #DBDBDB;
	list-style: none;
}


p {
	margin: 0.5em 0px;
}
a {
	color: white;
	text-decoration: none;
}
table.sample {
	border-width: 1px;
	border-spacing: 2px;
	border-style: outset;
	border-color: gray;
	border-collapse: separate;
	background-color: white;
}

.clear {
	clear: both;
}
#container {
width: 820px;
border: 0px solid #aaa;
margin-left: auto;
margin-right: auto;
padding: 0;
line-height: 1.7em;
background : #fff;
color : #555;
}

#uppers {
	position: absolute;
	top: 17px;
	left: 270px;
	background: top left url(search.gif) no-repeat;
	padding-left: 25px;
	z-index: 15;
}

.productList{
	border: 1px #603;
	margin-left: 300px;
	margin-top: 10px;
	width: 650px;
	position: relative;	
}

.image{
	
	border:1px solid #021a40;
	padding:4px
/*
	border-style:outset;
	border-color: red;
	border-width:1px;
	width:110px;
	height:80px;
	overflow:hidden;
	*/
      }




#black-tl { width: 100%; background: black top left url(black_tl.gif) no-repeat; }
#black-tr { width: 100%; background: top right url(black_tr.gif) no-repeat; }
#black-bl { width: 100%; background: bottom left url(images/content6.jpg) repeat; }
#black-br { width: 100%; background: bottom right url(black_br.gif) no-repeat; }

#black-tl {
	border: 1px solid #603;
	float:none;
	margin-left: 300px;
	margin-top: 10px;
	width: 650px;
	position: relative;
	overflow:hidden;
}
#black-bl {
	
	padding: 10px 10px 10px 7px;	
	position: relative;
}

.black-box {
	border: 2px solid #603;	
	float: left;
	width: 400px;
	margin-right:5px;
	margin-left:0px;
}
.black-box2 {
	border: 2px solid #603;	
	float: left;
	width: 200px;
	height:150px;
	margin-right:5px;
	margin-left:0px;
}
.black-box3 {
	border: 2px solid #603;	
	float: left;
	width: 440px;
	margin-right:5px;
	margin-left:0px;
}

/*For the space between de divs */
.spacer
{
height:10px;
float:none;
margin:0 0;
padding:0 0;
border:0;

}

/* END*/

.black-box h2 {
	font-size: 13px;
	font-weight: normal;
}
.black-box h2 em {
	font-size: 22px;
	font-family: serif;
}
.black-box .more {
	color: red;
}


But I have now 1 image in the red box. How to mange several pictures in the red box?

THX

Coordinator
Oct 16, 2012 at 4:18 PM

I gave you the solution to your problem several times and you ignored it, so I thought maybe you were messing with me. I will not write your code for you, but I'll guide you in the right direction and try to teach you something. But you have to do some of the work yourself. This is how you learn.

The solution you found is not what I recommended and it's not best practice. You do not need a spacer div, what you need is to put a bottom margin on the div you already had.

To have more pictures in the red box you probably need more media picker fields on your content type.

Oct 16, 2012 at 4:42 PM
Edited Oct 16, 2012 at 4:42 PM

oke, also solved. Orchard is really awesome.

THX

Coordinator
Oct 16, 2012 at 4:45 PM

Thanks. I'm glad you figured it out. :)

Oct 17, 2012 at 9:52 AM
Edited Oct 17, 2012 at 10:17 AM

Last question: How to arrange the pictures horizontal and not vertical?

I have this in 1 file, name:MediaPicker-plaatjekoper:

 

@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.Name;
    string url = Model.ContentField.Url;
    string alignment = Model.ContentField.Alignment;
}
@if (!String.IsNullOrWhiteSpace(url)) {
   
  <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText" style="margin-bottom:10px;margin-right:400px " class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
    <br/>
  
}

 


 

 

 

then I put in a other file the same code but then with name: MediaPicker-plaatjekoper2. But I think it is not the best to do it? How can u have several picutres in 1 file?

THX

Coordinator
Oct 17, 2012 at 5:57 PM

I answered in that other thread you created.