Having an issue displaying images in DOMPDF

[wqwi853]

In my list/form I have an image upload/photo field. Sometimes there may be one image, other times there can be multiple images.

We're trying to create a new custom PDF template that will be able to show the photos displayed on the details page. When exporting the PDF with the code below, it won't handle multiple images. I'm assuming we need to loop these somehow but we're not sure how.

<?php echo "<strong>Photo(s):</strong> <img src='" . $this->groups['Incident Report System']->elements['photo']->element_ro?>'/><br />

When inspecting the element in web tools it shows something like this in the img tag...

<img src="/&lt;div%20class=%22fabrikSubElementContainer%22&gt;%0A%09%09%09&lt;div%20class=%22fabrikGalleryImage%22%0D%0A%09%09%09style=%22width:px;height:px;%20vertical-align:%20middle;text-align:%20center;%22&gt;%0D%0A%09%09&lt;img%20class=%22fabrikLightBoxImage%22%20src=%22https://mysite.org/images/photos/HxWwk7RPfK.jpg%22%20alt=%22%22%20title=%22%22%20/&gt;%09%09%09&lt;/div&gt;%0D%0A%09%09%0A&lt;/div&gt;">

Totally stuck. Any help would be appreciated.

 

[cheesegrits]

Try just ...

<?php echo "<strong>Photo(s):</strong>" . $this->groups['Incident Report System']->elements['photo']->element_ro?>'<br />

-- hugh

 

[wqwi853]

That does work. My only issue is that I usually have multiple images that are shown in a slideshow on the form. I have to change it to full size images on the file upload element in order to get them to show in the pdf. I'm also having an issue having the images show up properly in the PDF as they seem to overflow and appear very large on the pdf even when surrounding that line of code in a div.

 

[wqwi853]

So I tried to put the images into a table and style them that way. Now they appear micro in size.

Looks like I'm having issues altogether getting dompdf to play nice with images when rendering a PDF.

 

[troester]

For the image size: add CSS for styling (maybe adding !important to override inline styling).

For the filename:
Did you try ...->element_raw ?

 

[wqwi853]

I tried putting some CSS with the important tag to override the styling. Looks great in debug mode but images are tiny when rendering the PDF.

I also tried element_raw but when putting the output through a foreach loop, I just get a sequence of numbers and not the images themselves.

 

[wqwi853]

Looks like there may be a bug with DOMPDF and having images in a table as well. Just found a bug report on their github.

 

[wqwi853]

So I took my images out of the table and they now appear their normal size. Same issue with images overlapping though.

Here is the css that's handling the images when they render into a PDF.

img.fabrikLightBoxImage {
    display: block;
    max-width: none !important;
    width: 75% !important;
    height: 75% !important;
    margin-top:20px !important;
    margin-bottom:20px !important;
    margin-left: auto;
    margin-right: auto;
}

Not sure what needs to be done to prevent the images from overlapping over each other.