How to add image type field to PDF template?

Hello everyone,

I am trying    <img src="{$product.product_image}"/>    in the PDF template HTML. But it fails.

How to add image type field to PDF template?

Thanks

Parents
  • Are you copying the photo from the product catalog to the products module for each product you add to a quote?

    Check in the PDF Manager, can you see the name of your product image field as an available field in the dropdown under Products?

    If not, to have the image accessible you'll need to modify the PDF Manager to add a link to the product catalog so you can refer to it as something like:

    {$product_catalog.product_image_c}

    See Cédric Mourizard's post here for how to do that:

    https://community.sugarcrm.com/community/developer/blog/2016/04/25/how-to-customize-the-sugar-pdf-manager

    Hope this helps you get to your goal.

    FrancescaS

  • Thank you for replying Francesca Shiekh 

    I have copied the image to quote line items. But unable to display it in PDF when i use <img src="{$product.product_image_c}"/>. It throws an error that this image source doesnt exist

  • Sorry, I should have mentioned this before, the field will most likely contain only the id of the image  record, not the URL of where that image is stored, which is likely to be in your uploads directory.

    You will need to build the path to the image before you can use it as a src.

    You can start by looking at your Quoted Line Item, use the Inspect on the developer tools in your browser to see how the img tag is built. 

    Digging through the code for the image field type you can see that for the front end display the address for the file is built up in stages: 

    clients/base/fields/image/image.js

    you can see that the value is formatted:

        format: function(value) {
            if (value) {
                value = this.buildUrl() + "&_hash=" + value;
            }
            return value;
        },

    using an api to build the url

        buildUrl: function(options) {
            return app.api.buildFileURL({
                module: this._duplicateBeanModule ? this._duplicateBeanModule : this.module,
                id: this._duplicateBeanId ? this._duplicateBeanId : this.model.id,
                field: this.name
            }, options);
        },

    you can track down buildFileURL Api in the source code and see how they build the URL there...

    I often go down such rabbit-holes in search for answers  you'd be surprised how much you can learn just by diving deep and reverse engineering the code... 

    Francesca

Reply
  • Sorry, I should have mentioned this before, the field will most likely contain only the id of the image  record, not the URL of where that image is stored, which is likely to be in your uploads directory.

    You will need to build the path to the image before you can use it as a src.

    You can start by looking at your Quoted Line Item, use the Inspect on the developer tools in your browser to see how the img tag is built. 

    Digging through the code for the image field type you can see that for the front end display the address for the file is built up in stages: 

    clients/base/fields/image/image.js

    you can see that the value is formatted:

        format: function(value) {
            if (value) {
                value = this.buildUrl() + "&_hash=" + value;
            }
            return value;
        },

    using an api to build the url

        buildUrl: function(options) {
            return app.api.buildFileURL({
                module: this._duplicateBeanModule ? this._duplicateBeanModule : this.module,
                id: this._duplicateBeanId ? this._duplicateBeanId : this.model.id,
                field: this.name
            }, options);
        },

    you can track down buildFileURL Api in the source code and see how they build the URL there...

    I often go down such rabbit-holes in search for answers  you'd be surprised how much you can learn just by diving deep and reverse engineering the code... 

    Francesca

Children
No Data