Pictures horizontal

Topics: General, Localization, Troubleshooting, Writing modules
Oct 17, 2012 at 11:40 AM
Edited Oct 17, 2012 at 11:41 AM

Hi everybody,

I have this:

titel: zilver3

Omschrijving: hoi

prijs: 88

plaatjezilver2: ~/Media/Default/ImageGalleries/Zilver2/_MG_1051.JPG

 

 

 

 

But I want to have the pictures horizontal and not vertical. How to manage that? THX

 

Coordinator
Oct 17, 2012 at 4:59 PM

What do you mean? You want them side-by-side? Your images have inline styles specifying a huge margin of 400px, which is probably what's pushing the second image to the next line. Just remove that margin-right.

Oct 17, 2012 at 5:51 PM
Edited Oct 17, 2012 at 5:54 PM

The problem, is if I do it 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="margin-bottem:10px " class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
   
  
}

This is working.  An other problem is how to manage all the pictures in 1 file? Because I have now 3 pictures and every picture I put in a file:

@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-bottem:10px " class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
   
  
}

SO I make 3 file names, with names: MediaPicker-plaatjezilver1, MediaPicker-plaatjezilver2, MediaPicker-plaatjezilver3. But I feel that is not so good. Better is 1 file with then 3 picutres in it isnt? But I dont know how to manage that? I think about: foreach...

 

THX

Coordinator
Oct 17, 2012 at 5:54 PM

I already answered your first question: remove that 400px margin.

Oct 17, 2012 at 5:59 PM

I did that. I correct my post. THX But what about how to manage it in 1 file?

Coordinator
Oct 17, 2012 at 6:00 PM

Why do you need to do that?

Oct 17, 2012 at 6:09 PM

For example I have now 8 cagegories and every categorey have 3 pictures, for example  you have 100 categories and have 4 pictures. Then you have to make: 400 files?? Is there no better way?

Coordinator
Oct 17, 2012 at 6:37 PM

I'm not following. Why would you need one file per category??

Oct 17, 2012 at 6:44 PM

For example I have category silver and every product of silver has 3 pictures. THat is what I mean. And if you have now 100 categories and every product of category has 3 pictures.

Coordinator
Oct 17, 2012 at 6:48 PM

That still doesn't explain why you think you'd need hundreds of files.

Oct 17, 2012 at 6:52 PM
Edited Oct 17, 2012 at 6:53 PM

I just ask, and I think so, but dont know how to manage that that you have for every category 1 file with all the pcitures in it(a reference to that picture).

that I do this: in 1 file(picture1):

@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;" class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
 
  
  
}

 

file2(picture2:)

@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;" class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>
 
  
  
}

 

the first file is called: MediaPicker-plaatjezilver1.cshtml and the second file name: MediaPicker-plaatjezilver2.cshtml

Coordinator
Oct 17, 2012 at 9:51 PM

I'll give you a hint: your two files are the same.

There is no reason at all why you would need two files here (let alone 400) instead of a single Mediapicker.cshtml.

Oct 17, 2012 at 9:57 PM

I know they are the same. But how to manage then 2 pictures in the red box? In orchard I choose for 2 multimedia-fields, with name: picture1 and picuture2. so you can browse for a picture.

This piece of code:

@if (!String.IsNullOrWhiteSpace(url)) {
   
  <a href="@Href(url)" target="_blank"><img src="@Href(url)" alt="@Model.ContentField.AlternateText" style="margin-bottom:10px;" class="media-picker-field media-picker-field-@name.HtmlClassify()"/></a>

 

is for 1 picture. if you copy past under that line then you will get the same picture twice. But not a different picture. So how to manage in single file different pictures.

Coordinator
Oct 17, 2012 at 10:09 PM

This piece of code is not *managing* the images, it's displaying them. You don't need to write any templates in order to add a field.

If you have one mediapicker.cshtml file, it will be used for all the field instances.

Oct 17, 2012 at 10:22 PM

Yes, for displaying the pictures. But so how to manage then in 1 file 2 or more different pictures? IN orchard you will make a new bio page and want to display 2 pictures - in orchard you can browse to the pictures. What I know have: 2 pictures in the red box. 

Coordinator
Oct 17, 2012 at 10:58 PM

You have 2 pictures in the red box. Isn't that what you want?

Oct 17, 2012 at 11:00 PM

Oke, it is fine. Maybe you knew a better method for it. A cleaner method.

Developer
Oct 17, 2012 at 11:16 PM

Cleanest way is to let the two fields render out with the default template, then use CSS to position them.

Job done.

Oct 18, 2012 at 12:50 AM

What are you trying to do? Create an image gallery?

Explain exactly what you are trying to achieve here and then it'll be possible to help you. At the moment I personally have no idea where to start.

Oct 18, 2012 at 10:03 AM

It is already solved, thx anyway.