OL Learn

Dynamic Picture Box or Text Box

I have an application that has 7 - 10 input files and output files. They all use the same data mapper…however the Print Sections and Master pages are fluid.

If I could figure out this one challenge, I could keep the designer to one print section.

Within the outputs, some need an additional text message in the body of the first page. Some have none, some have 2 lines, others have 4 lines. I have added an “in line” box so that it will by default occupy the initial space on the available page. I have added a detail table below it.

My desire is to have the “Text Box” grow or shrink, pushing or pulling the detail table below it based on the dynamic text needed by each output. I have experimented with using an image of the needed text as well. My problem is, the “Box” that the image or text is going into is not “growing” or “shrinking” based on the text or dynamic image that is being inserted.

I believe that this should be able to be accomplished, however I have tried all the different “Positions” (ie. static, inherit, absolute, etc.) of the box to no avail.

Thank you in advance…

Scott

My guess is that the box has a fixed height. Try the following:

  1. Ctrl+ click the box and choose Box… from the contextual menu
  2. Set the value of the Height field to: auto

This assumes that the box is part of the text flow (i.e. not an absolute position object).

Erik

I could not set the height to auto. I got an error…however, my project seems to be exhibiting the behavior that I would expect now…I overlooked the “Display” drop down and changed that to inline. Again seems to be working.

Thanks for the help

Scott

So…I would like to add to this.

So, I have things working ok…my additional question is this. When the dynamic image gets placed into the image box, the images sizes itself to the box. Then, there is a wonderful reset image size button that…wait for it…resets the image size to its original size. Yay.

Here is the rub, I have to up 7 of these images, all of them could be a different height. How do I dynamically revert the image sizes on the fly based on the image being placed for the record?

Hmm???

My current idea is to do away with the dynamic image, and create 7 conditional images that turn on and off based on the file name. That way when I add an image to a specific conditional image, I will have to “resize” the image at the moment, then I can run the job. This kind of defeats the purposes of automation, but it will work…Help.
Scott

Hi Scott,

Alternatively you could make use of a web technique to set the image as a background image (for an absolute positioned box) and set the background-size to ‘cover’. See: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

“The cover option scales the image as large as possible to fill the container, stretching the image if necessary. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.”

Consider the following script snippet:

var pict = record.fields.picture;
results.css('background-image','url( images/' + pict + '.jpg )');
results.css('background-size','cover');
results.css('background-position','center');

The first line stores the vaule of a data field in a variable. This variable is used on the second line to construct the path to the dynamic image.

The following two line defined the size and position of image. These could also be set in the Box… properties dialog of the box (so are not really needed in the script).

Hope this is of some help,

Erik

Erik,

Thanks for the thoughts…

My goal is to do the reverse, if I understand your suggestion. In the end, I would like the size of the container to grow or shrink conforming to the size of the image being brought in. I have dynamic tables and text that I want to flow “inline” with the container…not leaving empty space or distorting the incoming image.

My current solution is to have 7 conditional boxes. I have will have to bring the image into the designer, assign it to the appropriate box, then resize the container to the image size. It is not the end of the world since this job is a monthly job. But, if it were daily and the size of the image needed to be dynamic like this, I would really like to have a path to follow.

Thanks for your help.

Scott

In that case I would fallback to using an inline box (full width) and populate the content from a script. Make sure to set the height of the box to ‘auto’. This can be achieved by setting it in the Box properties or set if via your script.

How about using snippets for your text variants and loading them via a script?

var txtVariant = record.fields.txt;
var txtContent = loadhtml("snippets/" + txtVariant + ".html");
results.html( txtContent ).css("height","auto");

Erik