Dynamic Background scale and fit page

OL Connect Professional Designer
1

I have a bunch of images (jpg and tif) that I need to output to letter sized paper.
The images sizes vary.

I need position the top left corner of the page.
I don’t want to stretch the image, but also need to have the image fit on the page.

image
image1037×335 20.2 KB

image
image1595×370 33.1 KB

I can’t seem to get the image to fit/fall off the page.

2

Dynamic Image seems to work better for my purpose.

I can build the path in the script and then set the inline CSS style to the max width and let the height follow.

style="max-width: 100%; height: auto;

3

Alternatively use a Dynamic Background image and add the following CSS rule to one of the stylesheet files. It targets the section background image and combines absolute positioning with image fit top position it in the upper left corner of the page.

Erik

.page_mediabox img {
	max-width: 100%;
	top: 0 !important;
	left: 0 !important;
	transform: translate(0,0) !important;
}
4

What if I wanted to have a bit of a margin?

For example if the image file (single-page tiff, multi-page tiff, jpeg, or pdf) is smaller than the media size.
Align to the top left (with a bit of a margin), but if the image file is the same size such as letter sized pdf on letter sized media the margin would not be desirable.

image
image518×523 12.5 KB

5

In that case you could change the top and left property and compensate the max-width. Something like this:

.page_mediabox img {
	max-width: 86%;
	top: 10mm !important;
	left: 10mm !important;
	transform: translate(0,0) !important;
}
6

This helps in the vast majority of my sample file types, but running to a imageIndex out of bounds! on some TIFF images.

On a two page TIFF, I get two extra pages with the missing image icon.

image

Could this be related to the CSS?

7

I removed the CSS, but it does not appear to be related. Not sure why these TIFF files throw this error.

image
image1418×901 79.7 KB

image
image598×698 57.9 KB

java.lang.IndexOutOfBoundsException: imageIndex out of bounds!
	at com.sun.media.imageioimpl.plugins.tiff.TIFFImageReader.seekToImage(TIFFImageReader.java:307)
	at com.sun.media.imageioimpl.plugins.tiff.TIFFImageReader.getWidth(TIFFImageReader.java:512)
	at com.objectiflune.contentcreation.html.imageconversion.ImageDocumentModel.getCropBox(ImageDocumentModel.java)
	at com.objectiflune.contentcreation.external.rest.ResponseBuilder.a(ResponseBuilder.java)
	at com.objectiflune.contentcreation.external.rest.ResponseBuilder.build(ResponseBuilder.java)
	at com.objectiflune.contentcreation.external.rest.ContentWebResource.preview(ContentWebResource.java)
	at jdk.internal.reflect.GeneratedMethodAccessor441.invoke(Unknown Source)
	at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.base/java.lang.reflect.Method.invoke(Unknown Source)
8

I’m not able to reproduce, I ran a quick test and added a multipage tiff to my template. Would it be possible to share the image? (via a direct message?)

9

I assume that it would probably be better to continue the communication about the incident regarding the TIFF images via the OL Learn forum post ‘Image preview failed error in Designer (link)’.

10

@Marten makes sense! Thanks for picking this up.

1 Like