Adjust compression level of background (different color page edges) #11
Comments
|
Hi @top-rated ! Yes, there is a compression setting. Can you share an example of the issue? |
|
You can adjust by changing this line https://github.com/FranciscoMoretti/carousel-generator/blob/main/src/lib/hooks/use-component-printer.tsx#L169 |
|
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
<#11 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AF526KCA7R7WE6YRCBPLZ63Z6FBGHAVCNFSM6AAAAABQRUCL76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBYGM2TEOJRGY>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
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:
Your carousel background seems to be:
Can you try to set Note: there is some shadow to it that changes with different swipe directions. That's not accounted.
|
|
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
<#11 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AF526KEZZ7BGDUTPIMYXGALZ6HU5HAVCNFSM6AAAAABQRUCL76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBZGMZTIOJZG4>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
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.
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)
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 |
|
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
<#11 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AF526KEQJUJAXYIYEXO4X7DZ6IDGHAVCNFSM6AAAAABQRUCL76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBZGU2TQOJZG4>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Thanks for the additional info:
|
|
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
<#11 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AF526KHEOXXR6HUOECDQTILZ65J2FAVCNFSM6AAAAABQRUCL76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJUGQ2DONBVGY>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
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.
The text was updated successfully, but these errors were encountered: