ForAll, table and images

[Cicorione]

Hi Patrick,

This is for general interest of every all: I am trying to figure out how to draw a table with two columns and several rows, each cell must have a different image.

Unfortunately, what I came out only generate a duplicate of the same image for the same row...

 <Table width="8.5" stretch="max">
    <ForAll select="img">
      <Tr minheight="{sd:group-height('unit') div $mw}">
        <Td valign="middle" align="center">
          <Image file="{@file}" stretch="yes" maxheight="{sd:group-height('unit') div ($mw * 1.2)}" maxwidth="{7}" />
        </Td>
       <Td valign="middle" align="center">
          <Image file="{@file}" stretch="yes" maxheight="{sd:group-height('unit') div ($mw * 1.2)}" maxwidth="{7}" />
      </Td>
   </Tr>
 </ForAll>
</Table>

I am concerned that I can't do this with a table, do I have to create a nested group instead so each image will land into the next cell?

Thanks... 🙏

[pgundlach]

It is a bit tricky, you have to do some math.

Here is my data file:

<data>
    <image>1.jpg</image>
    <image>2.jpg</image>
    <image>3.jpg</image>
    <image>4.jpg</image>
    <image>5.jpg</image>
    <image>6.jpg</image>
    <image>7.jpg</image>
    <image>8.jpg</image>
    <image>9.jpg</image>
</data>

and here is my layout file:

<Layout xmlns="urn:speedata.de:2009/publisher/en"
	xmlns:sd="urn:speedata:2009/publisher/functions/en">

	<Record element="data">
		<PlaceObject>
			<Table>
				<Loop select="count(image) idiv 2" variable="i">
					<Tr>
						<Td>
							<Image file="{image[ position() =  ( $i - 1 ) * 2 + 1 ]}" width="3" />
						</Td>
						<Td>
							<Image file="{image[ position() =  ( $i - 1 ) * 2 + 2 ]}" width="3" />
						</Td>
					</Tr>
				</Loop>
				<Switch>
					<Case test="sd:odd(count(image))">
						<Tr>

							<Td>
								<Image file="{image[ position() = last() ]}" width="3" />
							</Td>
							<Td></Td>
						</Tr>
					</Case>
				</Switch>
			</Table>
		</PlaceObject>
	</Record>
</Layout>

So every row has two table cells and I need to calculate which image should be displayed.

I can select the image node from the data with image[ position() = n] where n is the nth node to be selected. For example image[position() = 4] selects the fourth image (the short form is image[4]).

To arrange the images, I create a loop with the number of rows (rounded down, that is idiv, integer division)

For the 9 images, I have four iterations of the loop. So the first row should get image 1 and 2, second row get image 3 and 4 and so on. The current iteration number is stored in the variable $i and gets set to 1, 2, 3 and four in each iteration.

The first thing is to subtract 1 from the row counter $i, so I get 0, 1, 2 and 3. I can now multiply this by two and get 0, 2, 4, 6. This would be the result if I only take this counter in account

0   0 
2   2
4   4
6   6

When I add 1 and 2 to each counter, I get

1   2
3   4
5   6
7   8

The last row is to check if the counter is odd, so I add the last image.

There are other calculations possible of course.

[pgundlach]

Just a note: you can leave out position(), so image[position() = 4] can be written as image[4].

[pgundlach]

In your case this would

<image file="{img[ position() =  ( $i - 1 ) * 2 + 1 ]/@file}" ...

of course.

[Cicorione]

🤯

Thank you very much, I need to study this carefully!

🙏

[Cicorione]

Hi Patrick,

since you're so smart, I'd like to add another layer of complexity...

I created a mode to print label under any picture to understand which image I need to move, delete or fixing, it works fine but with the loop the outcome is undesired:

I tried to figure out a clunky method to create multiple variables but it didn't work out:

<!-- DOUBLE COLUMNS -->
<Otherwise>
  <Table width="8.5" stretch="max">
    <SetVariable variable="readimglabel" select="img/@file" />
    <!-- $mw = count(images) -->
    <Loop select="$mw idiv 2" variable="i">
      <SetVariable variable="imglabel" select="concat($readimglabel,$i)" />
      <Tr minheight="{sd:group-height('unit') div $mw}">
        <Td valign="middle" align="center">
          <Image file="{img/@file[ position() =  ( $i - 1 ) * 2 + 1 ]}" stretch="yes" maxheight="{sd:group-height('unit') div ($mw * 1.2)}" maxwidth="{8}" />
          <!-- IMAGE'S NAME TEMP -->
          <Switch>
            <Case test="sd:mode('label')">
              <Paragraph color="red" fontfamily="imgname">
                <NoBreak reduce="fontfit">
                  <Value select="$imglabel" />
                </NoBreak>
              </Paragraph>
            </Case>
          </Switch>
          <!-- END -->
        </Td>
        <Td valign="middle" align="center">
          <Image file="{img/@file[ position() =  ( $i - 1 ) * 2 + 2 ]}" stretch="yes" maxheight="{sd:group-height('unit') div ($mw * 1.2)}" maxwidth="{8}" />
          <!-- IMAGE'S NAME TEMP -->
          <Switch>
            <Case test="sd:mode('label')">
              <Paragraph color="red" fontfamily="imgname">
                <NoBreak reduce="fontfit">
                  <Value select="img/@file" />
                </NoBreak>
              </Paragraph>
            </Case>
          </Switch>
          <!-- END -->
        </Td>
      </Tr>
    </Loop>
    <Switch>
      <Case test="sd:odd(count($mw))">
        <Tr minheight="{sd:group-height('unit') div $mw}">
          <Td valign="middle" align="center">
            <Image file="{img/@file[ position() = last() ]}" stretch="yes" maxheight="{sd:group-height('unit') div ($mw * 1.2)}" maxwidth="{8}" />
            <!-- IMAGE'S NAME TEMP -->
            <Switch>
              <Case test="sd:mode('label')">
                <Paragraph color="red" fontfamily="imgname">
                  <NoBreak reduce="fontfit">
                    <Value select="img/@file" />
                  </NoBreak>
                </Paragraph>
              </Case>
            </Switch>
            <!-- END -->
          </Td>
        </Tr>
      </Case>
    </Switch>
  </Table>
</Otherwise>

If there aren't any viable solutions for this issue, never mind, I will remove the sp:mode() on these portions of the code.

And this opened a reflection: in the documentation you wrote about a fallback method to display a different image and if the debug output must indicate it as an "error" or a "warning", however I found that is more useful to display the name of the file (and therefore the sd:mode).

When an image is missing, assuming your code is correct and tested, happens only for tree reasons: a typo on the file name, a missing file, or a corrupted image. When dealing with hundreds of images it would preferable know from the beginning the file name of the missing image, rather than going to inspect the code to find out the its name and then check the file in the directory. A red square with the name of the file centered in the middle provides would be ideal, indeed.

I know that betting about the code correctness is a little bit bold, but even if the name isn't displayed that is already a warning that your code isn't tested enough.

What do you think?

[pgundlach]

I can't run your code, but one thing looks wrong: img/@file[ position() = ( $i - 1 ) * 2 + 1 ] means you select the nth attribute named file (there is at most one), you must write img[ position() = ( $i - 1 ) * 2 + 1 ]/@file, which selects the nth image element and then the attribute named "file".

[pgundlach]

select="img/@file" this expression selects all attributes "file" from all elements called img, probably not what you want.

[pgundlach]

I assume something like this might work:

<Otherwise>
  <Table width="8.5" stretch="max">
    <SetVariable variable="readimglabel" select="img/@file" />
    <!-- $mw = count(images) -->
    <Loop select="$mw idiv 2" variable="i">
      <SetVariable variable="imglabel" select="concat($readimglabel,$i)" />
      <Tr minheight="{sd:group-height('unit') div $mw}">
        <Td valign="middle" align="center">
          <Image file="{img/@file[ position() =  ( $i - 1 ) * 2 + 1 ]}" stretch="yes" maxheight="{sd:group-height('unit') div ($mw * 1.2)}" maxwidth="{8}" />
          <!-- IMAGE'S NAME TEMP -->
          <Switch>
            <Case test="sd:mode('label')">
              <Paragraph color="red" fontfamily="imgname">
                <NoBreak reduce="fontfit">
                  <Value select="$imglabel" />
                </NoBreak>
              </Paragraph>
            </Case>
          </Switch>
          <!-- END -->
        </Td>
        <Td valign="middle" align="center">
          <Image file="{img[ position() =  ( $i - 1 ) * 2 + 2 ]/@file}" stretch="yes" maxheight="{sd:group-height('unit') div ($mw * 1.2)}" maxwidth="{8}" />
          <!-- IMAGE'S NAME TEMP -->
          <Switch>
            <Case test="sd:mode('label')">
              <Paragraph color="red" fontfamily="imgname">
                <NoBreak reduce="fontfit">
                  <Value select="img[ position() =  ( $i - 1 ) * 2 + 2 ]/@file" />
                </NoBreak>
              </Paragraph>
            </Case>
          </Switch>
          <!-- END -->
        </Td>
      </Tr>
    </Loop>
    <Switch>
      <Case test="sd:odd(count($mw))">
        <Tr minheight="{sd:group-height('unit') div $mw}">
          <Td valign="middle" align="center">
            <Image file="{img[ position() = last() ]/@file}" stretch="yes" maxheight="{sd:group-height('unit') div ($mw * 1.2)}" maxwidth="{8}" />
            <!-- IMAGE'S NAME TEMP -->
            <Switch>
              <Case test="sd:mode('label')">
                <Paragraph color="red" fontfamily="imgname">
                  <NoBreak reduce="fontfit">
                    <Value select="img[ position() = last() ]/@file" />
                  </NoBreak>
                </Paragraph>
              </Case>
            </Switch>
            <!-- END -->
          </Td>
        </Tr>
      </Case>
    </Switch>
  </Table>
</Otherwise>

However the readimglabel still won't work, since (second comment) it contains all file names.

[Cicorione]

Thank you Patrick, I had better to read your code very carefully and understanding the difference between the operations over the nodes and over the attributes, my bad...

Luckily, your are very clever (I dare genial), with your recommendation now that section works as a charm:

<!-- DOUBLE COLUMNS -->
<Otherwise>
  <Table width="8.5" stretch="max">
    <Columns>
      <Column width="1*" />
      <Column width="1*" />
    </Columns>
    <Loop select="$mw idiv 2" variable="i">
      <Tr minheight="{sd:group-height('unit') div $mw}">
        <Message select="concat('label: ', {img[ position() =  ( $i - 1 ) * 2 + 1 ]/@file})" />
        <Td valign="middle" align="center">
          <Image file="{img[ position() =  ( $i - 1 ) * 2 + 1 ]/@file}" stretch="yes" 
          maxheight="{sd:group-height('unit') div (($mw idiv 2) + 1.5)}" />
          <!-- IMAGE'S NAME TEMP -->
          <Switch>
            <Case test="sd:mode('label')">
              <Paragraph color="red" fontfamily="imgname">
                <NoBreak reduce="fontfit">
                  <Value select="img[ position() =  ( $i - 1 ) * 2 + 1 ]/@file" />
                </NoBreak>
              </Paragraph>
            </Case>
          </Switch>
          <!-- END -->
        </Td>
        <Td valign="middle" align="center">
          <Image file="{img[ position() =  ( $i - 1 ) * 2 + 2 ]/@file}" stretch="yes" 
          maxheight="{sd:group-height('unit') div (($mw idiv 2) + 1.5)}" />
          <!-- IMAGE'S NAME TEMP -->
          <Switch>
            <Case test="sd:mode('label')">
              <Paragraph color="red" fontfamily="imgname">
                <NoBreak reduce="fontfit">
                  <Value select="img[ position() =  ( $i - 1 ) * 2 + 2 ]/@file" />
                </NoBreak>
              </Paragraph>
            </Case>
          </Switch>
          <!-- END -->
        </Td>
      </Tr>
    </Loop>
    <Switch>
      <Case test="sd:odd(count($mw))">
        <Tr minheight="{sd:group-height('unit') div $mw}">
          <Td valign="middle" align="center" colspan="2">
            <Image file="{img[ position() = last() ]/@file}" stretch="yes" 
            maxheight="{sd:group-height('unit') div (($mw idiv 2) + 1.5)}" />
            <!-- IMAGE'S NAME TEMP -->
            <Switch>
              <Case test="sd:mode('label')">
                <Paragraph color="red" fontfamily="imgname">
                  <NoBreak reduce="fontfit">
                    <Value select="img[ position() = last() ]/@file" />
                  </NoBreak>
                </Paragraph>
              </Case>
            </Switch>
            <!-- END -->
          </Td>
        </Tr>
      </Case>
    </Switch>
  </Table>
</Otherwise>

[pgundlach]

Luckily, your are very clever (I dare genial), with your recommendation now that section works as a charm:

no, no, I just had the same problem over and over again, and at one time I found a solution and understood what is going on.

Glad it works!