Topic: Replacevariablebyhtml image width percent not applying

Posted by pderep · 09-06-2016 - 14:57

Hi,

Using replaceVariableByHTML(), I'm trying to insert a simple 3 columns table, with a scaled image inside each cell. No matter what (HTML tags or CSS styles), the images doesn't scale in the resulting DOCX. How can I achieve this:

     $docx = new CreateDocxFromTemplate('htmltest.docx');
        $pdm = <<<EOT
                <table width="100%">
                        <tr>
                                <td width="33%" ><img width="75%" src="image1.png"></td>
                                <td width="33%" ><img width="75%" src="image2.png"></td>
                                <td width="33%" ><img width="75%" src="image3.png"></td>
                        </tr>
                </table>
EOT;

        $docx->replaceVariableByHTML('PDM', 'block', $pdm, array('isFile' => false, 'parseFloats' => true, 'parseDivsAsPs' => false, 'downloadImages' => true));
        $docx->createDocx('htmltest_out');

Thank you very much,

PdR

Posted by admin · 10-06-2016 - 06:51

Hello,

You need to set width value without px or %. For example:

<td width="33%" ><img width="50" src="image.png"></td>

Since HTML5, width and height values in this tag must be in pixels and without adding 'px' (http://www.w3schools.com/tags/att_img_width.asp).

We also recommend you to check that Tidy is installed and running on your server.

Regards.

Posted by pderep · 10-06-2016 - 12:47

Hello,

Thanks for your answer.

My goal is to scale the image relative to the width of the column; problem is, using CSS doesn't work either:

     $docx = new CreateDocxFromTemplate('htmltest.docx');
        $pdm = <<<EOT
<table width="100%">
        <tr>
                <td width="33%" ><img style="width:75%" src="image1.jpg"></td>
                <td width="33%" ><img style="width:75%" src="image2.jpg"></td>
                <td width="33%" ><img style="width:75%" src="image3.png"></td>
        </tr>
</table>
EOT;

        $docx->replaceVariableByHTML('PDM', 'block', $pdm, array('isFile' => false, 'parseFloats' => true, 'parseDivsAsPs' => true, 'downloadImages' => true));
        $docx->createDocx('htmltest_out');

Regards,

PdR

Posted by admin · 10-06-2016 - 13:01

Hello,

phpdocx doesn't support % sizing in images, only fixed sizes (or auto) for both width and height values.

Regards.

Posted by pderep · 10-06-2016 - 13:13

So... is there a way I can get the width, in pixels, of the paragraph where the table would occur? With that in hands, I could easily calculate the fit for the images.

Thanks

Posted by admin · 10-06-2016 - 14:22

Hello,

Due to how Word works is not advisable setting image sizes as percent. We recommend you to use px for all sizes, because if you use % you don't know the final sizing until the document is opened.

Anyway, if you want to test a beta patch, please edit the HTML2WordML.inc file and in line 1022 add these lines:

if (isset($nodo['attributes']['width'])) {
  $widthUnit = preg_replace('/\d+/', '', $nodo['attributes']['width']);
    if ($widthUnit == '%') {
      $widthValue = preg_replace('/[^\d]+/', '', $nodo['attributes']['width']);
      $cx = $cx * $widthValue / 100;
    }
  }

  if (isset($nodo['attributes']['height'])) {
    $heightUnit = preg_replace('/\d+/', '', $nodo['attributes']['height']);
    if ($widthUnit == '%') {
      $heightUnit = preg_replace('/[^\d]+/', '', $nodo['attributes']['height']);
      $cy = $cy * $widthValue / 100;
  }
}

Instead of:

$c = $this->getImageDimensions($size, $imageSize);
$cx = $c[0];
$cy = $c[1];

self::$WordML .= $this->generateImageRPr($properties, $cy);

self::$openTags[$depth] = $nodo['nodeName'];

the code must be:

$c = $this->getImageDimensions($size, $imageSize);
$cx = $c[0];
$cy = $c[1];

if (isset($nodo['attributes']['width'])) {
    $widthUnit = preg_replace('/\d+/', '', $nodo['attributes']['width']);
    if ($widthUnit == '%') {
        $widthValue = preg_replace('/[^\d]+/', '', $nodo['attributes']['width']);
        $cx = $cx * $widthValue / 100;
    }
}

if (isset($nodo['attributes']['height'])) {
    $heightUnit = preg_replace('/\d+/', '', $nodo['attributes']['height']);
    if ($widthUnit == '%') {
        $heightUnit = preg_replace('/[^\d]+/', '', $nodo['attributes']['height']);
        $cy = $cy * $widthValue / 100;
    }
}

self::$WordML .= $this->generateImageRPr($properties, $cy);

self::$openTags[$depth] = $nodo['nodeName'];

It's a beta patch but works for HTML such as:

<table width="100%">
    <tr>
        <td width="33%"><img width="33%" src="image1.png"></td>
        <td width="33%"><img width="33%" src="image2.png"></td>
        <td width="33%"><img width="33%" src="image3.png"></td>
    </tr>
</table>

But we highly recommend using fixed sizes or use the addTable method instead of HTML for this kind of tasks.

Regards.

Forum