X-Cart forums

[CenturyPerf]

I'm trying to change the default layout for the detailed images module.

The default setting is <align center> and all the images stack dead center. What I would like to do is change this to an <align left>, but then have the image placement horizontally across the page (as room allows), then drop to a lower row.
I can change the code to <align left>, but then the images just all stack on the left.

Examples:
Current --

IMG
IMG
... etc

What I want ---

IMG IMG IMG
IMG ... etc

I'm not seeing how to change the tags for this to work. It would probably also be nice to be able to add a space (or spaces), and maybe a border around the images (if one so desires).

I'll take a guess that some code needs to be added to compensate for when a product has more than one detailed image.

[leon]

Just dont give them any alighnment what so ever and they will accomodate by themselves with the space they have available.

If you want all detailed images centered on the screen but along side each other just add the <center> tag to the output (TPL file).

You could also add a space character ( ) right before the looping really starts.

[CenturyPerf]

I think you misunderstand.

The tag already calls out for center. The problem is their positioning if more than one image is added. Any more than (1) detailed image simply copies the same characteristics of the first.

Even removing the

<div align=center>

tag does not help.

Right now the images stack no matter where I set the align tag. They just stack left, right or center.

image 1
image 2
image 3
etc

I want them to go like this:

image 1 | image 2 | image 3 | etc

Then, when they have ran out of width they will go to the 2nd line.

image 1 | image 2 | image 3
image 4 | etc

So, say your table width is 700 pixels and you have 4 images at 200 pixels wide each. You could not fit 4 in a row because you have exceeded the width by 100 pixels. Thus, the 4th image falls to the next row.

Typical HTML would use the

.image1 .image2 .image3</p> to contain the image tags and break the row, but because the smarty tag does not take into account more than one global callout for image position I have nowhere to insert code to break up the images, or tell them to display horizontally.

That is why I stated that it seems more code needs to be added to compensate for multiple detail images.

[leon]

No, no, no, I think you misunderstood.

If you stack images right next to each other they will go horizontally where space is available.

eg. [img]xxx[/img][img]xxx[/img][img]xxx[/img][img]xxx[/img][img]xxx[/img][img]xxx[/img][img]xxx[/img]

That would be for simple HTML coding.

Now for the detailed images, if you look up the code you will see carriage returns that force a line break.... Just ERASE them.

Erase the:




tags.