1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Having an issue displaying images in DOMPDF

Discussion in 'Community' started by wqwi853, May 17, 2019.

  1. wqwi853

    wqwi853 Member

    Level: Community
    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.

    Code (Text):
    <?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...

    Code (Text):
    <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.
  2. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    Try just ...

    Code (Text):

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

    wqwi853 Member

    Level: Community
    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.
  4. wqwi853

    wqwi853 Member

    Level: Community
    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.
  5. troester

    troester Well-Known Member Staff Member

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

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

    wqwi853 Member

    Level: Community
    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.
  7. wqwi853

    wqwi853 Member

    Level: Community
    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.
  8. wqwi853

    wqwi853 Member

    Level: Community
    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.

    Code (Text):
    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.

Share This Page