PDF converter - problem with header picture

[camille.clemens]

Hi
I’m starting to use this plugin and i have difficulties with the generation of a header. I’m learning html specially for it so maybe i did something wrong but when i try the code on my bloc notes it works fine but in the plugin the picture is not generated. I tried with a link from an host and i tried with a path from bubble itself but nothing work.
if it’s possible for someone to help me i’d be grateful

here’s part of the code i put in the header section :
img src=“https://zupimages.net/up/22/21/a2zg.png” alt=“Logo ID3A” style=“width: 42px; height: 42px;”> SARL ID3A - Devis (it works also in the forum it displays it correctly )

[Gulce]

Hello, @camille.clemens

Thank you for reaching out.

Let us investigate the issue you are having. As soon as the investigation is done, I’ll get back to you.

Best,
Gulce

[Gulce]

Hi @camille.clemens,
Thanks for your patience.

I have consulted with our dev team about your query. Here is the result.

Image links need to be in Base64 format in the Header section. For example:

Summary

Let me suggest you use this link to convert your image to Base64 format: https://www.base64-image.de/
After converting your image with this link to base64 format, you will just need to add the < img > tag (< img src=“image link(base64)” >)as I showed you in the screenshots.

Hope this helps.

Best,
Gulce

[camille.clemens]

it works ! thank you very much

[camille.clemens]

Do you know if it’s possible that the header dosen’t appear on the first page ?
thx

[Gulce]

Hi @camille.clemens,

You’re always welcome.

@camille.clemens

Do you know if it’s possible that the header dosen’t appear on the first page ?

I’m afraid, it is not possible to use the header template option for certain pages. Apologies for the inconvenience.

In case you have any other questions, please let me know.

Best,
Gulce

[camille.clemens]

Hi
i have a lot of problems with the page break and i have a complicated used case (it’s a quote program and i can have fifty pages). I have multiple repeting groups within other repeting groups in a cascade and i can have a lot of data and i don’t know the size or the number of entries. I saw on the forum a calculating method to have the number of pages in dynamic etc and divide in a repeting group but it seems it was on the ancient responsive.
however i tried for exemple to put page breaks on the cells of my master repeting group so that each row be on a different page but the plugin behave very weirdly. is it possible to do or is it because the fonctionnality is not fully fonctionnal?

thank you in advance
Camille

[Gulce]

Hi @camille.clemens,
Thank you for your patience.

You can try to use a shape element in the repeating group and assign an ID to it. And then indicate this ID in the Pagebreaker IDs field of the plugin action. In this case, each row should be on a different page.

Summary

However, the page breaker is in beta, so we can’t guarantee it will work properly I’m afraid. Please try as I mentioned above and let me know how it’s going.

Best,
Gulce

[camille.clemens]

hi thank you for the solution but it doesn’t work.

here is what it does:
i have my first row on the first page and then i have multiple blank pages but the rest of the content doesn’t appear.

do you know when the beta will be finalized? ( to know if i continue to search for a solution to have a better presentation or if i wait? i work on a quote to present to clients so it must have the best look possible)
Best regards
Camille

[camille.clemens]

and you should know also that when i try the page break shape with two groups outside a repeting group it does the page break but the space is not enough to go to the next page. it put the second group at the bottom of the same page

[Gulce]

Hi @camille.clemens,

I understand your feelings but unfortunately, the pagebreaker functionality is not super flexible at the moment, especially in RG.

The bubble has confirmed that a new plugin editor engine is under development and has top priority. We will migrate all of our plugins to the New Responsive Engine as soon as we have a chance to have them work properly on it. Here is the announcement from Bubble: Plugin Editor & New Responsive Engine [beta] 6 (the editor is still in beta). We hope Bubble releases soon a new responsive engine for plugins so we can re-investigate and improve the pagebreaker functionality.

I’d recommend you adjust the design of your pages to fit a4 dimensions, so the plugin can neatly separate the content into pages, without the need to use the page breaker (as it’s quite difficult to adjust it to pages with the dynamic content). Also, you can use “Paddings” to add free space between the page breaking points.

In case there is any way I can help you - please let me know.

Best,
Gulce

[LydiaProvin]

Hi @Gulce,

I had the same problem as @camille.clemens. So I converted my image to Base64, but the problem is that the image is still pixelated. I shrunk it, enlarged it, shrunk and enlarged the header part, but nothing works. Do you know where this could be coming from?

[Gulce]

Hi @LydiaProvin
Apologies for the late reply.

Can you please provide more details on the issue that you are having? Particularly we would like to see the screenshots/video recordings of this issue and your setup.

Thank you! Looking forward to your reply.

Best regards,
Gulce

[LydiaProvin]

Hi @Gulce,

Here is the capture of the setup:

Here is the result:

Whereas when I add the image in the group I use for the PDF, the image is clear:

The code generated by the website is:

[Gulce]

Hi @LydiaProvin,
Please accept my apologies for the late reply due to the weekend.

When you encode an image to base64, you are essentially converting the binary data of the image to a text format. This can cause the size of the image to increase significantly, which can result in a loss of quality.

@LydiaProvin

The code generated by the website is:
[image]

Because this image also looks pixelated, for example. To avoid pixelation or loss of quality when encoding images to base64, you can try reducing the size of the image before encoding it. This can be done using image compression or by resizing the image manually. You can also experiment with different encoding settings to see if they produce better results.

Also, I will discuss this with our dev team to see if there is any other way to prevent this, and I will let you know.

Best regards,
Gulce

[LydiaProvin]

Hi @Gulce,

No problem.
I also tried to reduce the size before encoding with Photoshop and the result was the same

[Gulce]

Hi @LydiaProvin,
Sorry to hear that.

Could you please try to CSS style - padding, margin, etc ?

For example:

<img 
style=width:100px;height:50px;margin:20px!important; left:10px'; src="data:image/png;base64,

Screenshot

Hope this helps!

Best regards,
Gulce

[LydiaProvin]

Hi @Gulce,

Still pixelated
I tried in PNG, JPG, with an image height of 50 or 47 (to keep the proportion) and even a header height of 150 or 47 and the result is the same.

[Gulce]

Hi @LydiaProvin,

Can you please add our Support Team email to the list of collaborators to your application and provide me a link to your application? Please also mention on which page and which scenario should be tested (here or via DM).

To add our Support Team as a collaborator, you need to do the following steps in the Bubble Editor:

Settings > Collaboration > Add email support@zeroqode.com

Note: avoid the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.

Looking to hear you soon.

Best regards,
Gulce

[LydiaProvin]

Thank you very much @Gulce, I ask my client for permission because he already uses it with his data and I come back to you.