search

FranciscoMoretti / carousel-generator

🖼️ An open source AI carousel maker for LinkedIn
https://carouselgenerator.vercel.app
MIT License
65 stars 27 forks source link

Adjust compression level of background (different color page edges) #11

Open top-rated opened 2 weeks ago

top-rated commented 2 weeks ago

Hi! My carousel template for your amazing tool requires single color background that has to be exactly the same on the page edges as well. However, either export, LinkedIn import or both compress it in a way that page edges are a bit different color. If it's something that can be changed, could you please forward me into the right direction? Thanks! Regards, Dan.

FranciscoMoretti commented 2 weeks ago

Hi @top-rated ! Yes, there is a compression setting. Can you share an example of the issue?

FranciscoMoretti commented 2 weeks ago

You can adjust by changing this line https://github.com/FranciscoMoretti/carousel-generator/blob/main/src/lib/hooks/use-component-printer.tsx#L169

top-rated commented 2 weeks ago

Thanks again for your reply, Francisco!

So even if the current compression level is fine, I believe the issue might be on LinkedIn side, because, I guess, it additionally compress PDFs, right? Even if it’s a small one…

Kindly ask you to take a look at this example: https://www.linkedin.com/posts/burykin_4-magic-pills-for-a-smb-owner-from-google-activity-7255151603618320386-xGcT?utm_source=share&utm_medium=member_ios

The idea behind my design is that such carousel background color is exactly the same as color of LinkedIn layer under it, on mobile app (not in the night mode). This layer goes at the top, bottom and in between of carousel slides. So I’d wish it will be like a flow of this single color, w/o those slightly visible sides borders. Apparently they are due to compression or something else. This idea wasn’t my initially as I did saw an abs clear from borders example before. Really regret I haven’t saved it though.

Thank you!

Best,

Dan

On Wed 30. 10. 2024 at 21:51, Francisco Moretti @.***> wrote:

You can adjust by changing this line https://github.com/FranciscoMoretti/carousel-generator/blob/main/src/lib/hooks/use-component-printer.tsx#L169

— Reply to this email directly, view it on GitHub https://github.com/FranciscoMoretti/carousel-generator/issues/11#issuecomment-2448352916, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF526KCA7R7WE6YRCBPLZ63Z6FBGHAVCNFSM6AAAAABQRUCL76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBYGM2TEOJRGY . You are receiving this because you were mentioned.Message ID: @.***>

FranciscoMoretti commented 2 weeks ago

Hey @top-rated ! First, thanks for using this project in real life! Super exciting to see that.

I think I got the gist of what you are trying to achieve.

I checked the background of LinkedIn carousel element in light mode and it seems to be this value on my browser:

image

Your carousel background seems to be:

Can you try to set 220, 230, 241 as the background color?

Note: there is some shadow to it that changes with different swipe directions. That's not accounted.

image

top-rated commented 2 weeks ago

I do imagine the pleasure and excitement of when your creation delivers a system added value to someone. It does!)

Yes, I went this way initially, but if I change the background to the color you say, this is what it sows me: rgba(217,229,241,255): [image: Screenshot 2024-10-31 at 11.15.43.png] So apparently after export/compression the color changes (and the edges are different), attaching it.

Thx!

On Thu 31. 10. 2024 at 9:46, Francisco Moretti @.***> wrote:

Hey @top-rated https://github.com/top-rated ! First, thanks for using this project in real life! Super exciting to see that.

I think I got the gist of what you are trying to achieve.

I checked the background of LinkedIn carousel element in light mode and it seems to be this value on my browser:

  • rgb(220, 230, 241)

image.png (view on web) https://github.com/user-attachments/assets/05536c68-b022-4c06-960e-322a8baf646b

Your carousel background seems to be:

  • rgb(237, 241, 252)

Can you try to set 220, 230, 241 as the background color?

Note: there is some shadow to it that changes with different swipe directions. That's not accounted.

  • small shadow on the left
  • large shadow on the right

image.png (view on web) https://github.com/user-attachments/assets/707b190b-8607-4dad-a169-4569ab984c56

— Reply to this email directly, view it on GitHub https://github.com/FranciscoMoretti/carousel-generator/issues/11#issuecomment-2449334997, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF526KEZZ7BGDUTPIMYXGALZ6HU5HAVCNFSM6AAAAABQRUCL76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBZGMZTIOJZG4 . You are receiving this because you were mentioned.Message ID: @.***>

FranciscoMoretti commented 2 weeks ago

Seems your attachment didn't go through. I tried setting that background color and printing to PDF and the end result is decent.

After conversion it shows (220, 230, 241) -> (220, 230, 240) which should be almost unnoticeable.

image

LinkedIn changes it like this (on the preview) (220, 230, 240) -> (222, 229, 241)

Which is off, but not as much as your example post (237, 241, 252)

image

Not sure how to solve this problem. I suggest you try with different image formats in this line https://github.com/FranciscoMoretti/carousel-generator/blob/main/src/lib/hooks/use-component-printer.tsx#L169

top-rated commented 1 week ago

Sorry for the delay... Trying to be on to of everything a once:

  1. What do you mean by trying other formats? What are the options?
  2. Can it be the issue of not using the last version of your tool? I mean I've found and decided to keep the one that is on the video: has two fields for AI input, short text and text area under it. If so, how is it better to fix it then?

Super thank you!

On Thu, Oct 31, 2024 at 11:48 AM Francisco Moretti @.***> wrote:

Seems your attachment didn't go through. I tried setting that background color and printing to PDF and the end result is decent.

After conversion it shows (220, 230, 241) -> (220, 230, 240) which should be almost unnoticeable.

image.png (view on web) https://github.com/user-attachments/assets/cafb8fa7-0530-4d7b-aa05-e7af4b7e4b3f

LinkedIn changes it like this (on the preview) (220, 230, 240) -> (222, 229, 241)

Which is off, but not as much as your example post (237, 241, 252)

image.png (view on web) https://github.com/user-attachments/assets/5228e2b8-a47d-4d79-acab-cf9d7bf0126f

Not sure how to solve this problem. I suggest you try with different image formats in this line https://github.com/FranciscoMoretti/carousel-generator/blob/main/src/lib/hooks/use-component-printer.tsx#L169

— Reply to this email directly, view it on GitHub https://github.com/FranciscoMoretti/carousel-generator/issues/11#issuecomment-2449558997, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF526KEQJUJAXYIYEXO4X7DZ6IDGHAVCNFSM6AAAAABQRUCL76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBZGU2TQOJZG4 . You are receiving this because you were mentioned.Message ID: @.***>

FranciscoMoretti commented 1 week ago

Thanks for the additional info:

  1. Change this line https://github.com/FranciscoMoretti/carousel-generator/blob/main/src/lib/hooks/use-component-printer.tsx#L169 by using options from toDataURL https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

  2. Yes, that could be the cause. Unfortunately, I can only maintain the current version. Please feel free to look into this and create a PR though.

top-rated commented 1 week ago

Thank you!

PR?

So in new version I can add an article, but only a topic, correct?

On Mon 4. 11. 2024 at 12:18, Francisco Moretti @.***> wrote:

Thanks for the additional info:

1.

Change this line https://github.com/FranciscoMoretti/carousel-generator/blob/main/src/lib/hooks/use-component-printer.tsx#L169 by using options from toDataURL https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL 2.

Yes, that could be the cause. Unfortunately, I can only maintain the current version. Please feel free to look into this and create a PR though.

— Reply to this email directly, view it on GitHub https://github.com/FranciscoMoretti/carousel-generator/issues/11#issuecomment-2454447456, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF526KHEOXXR6HUOECDQTILZ65J2FAVCNFSM6AAAAABQRUCL76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJUGQ2DONBVGY . You are receiving this because you were mentioned.Message ID: @.***>