Can't get fetched image to overlay
I am currently coding a discord bot to generate a welcome message when new members join.
I'm using the fetch method to get the URL of this profile picture
https://cdn.discordapp.com/avatars/380135019634622465/33256a538b4ccf762a03d454731fb2a5.png?size=128
to embed onto this image
https://res.cloudinary.com/yiffhub/image/upload/v1642576591/sources/images/defaultbanner.png
I followed the documentation and did my best to see if they would even overlay in a basic fashion and came up with this
the image that I get only displays the user profile picture. What am I doing wrong here?
-
Hi there,
If you want to apply a remote URL overlay, you use the parameter `l_fetch` and the base64 encoded URL of the remote image.
For your example, the encoded base64 of the URL "https://cdn.discordapp.com/avatars/380135019634622465/33256a538b4ccf762a03d454731fb2a5.png?size=128" is "aHR0cHM6Ly9jZG4uZGlzY29yZGFwcC5jb20vYXZhdGFycy8zODAxMzUwMTk2MzQ2MjI0NjUvMzMyNTZhNTM4YjRjY2Y3NjJhMDNkNDU0NzMxZmIyYTUucG5nP3NpemU9MTI4"
To overlay on your default banner, you add the l_fetch:
https://res.cloudinary.com/yiffhub/image/upload/l_fetch:aHR0cHM6Ly9jZG4uZGlzY29yZGFwcC5jb20vYXZhdGFycy8zODAxMzUwMTk2MzQ2MjI0NjUvMzMyNTZhNTM4YjRjY2Y3NjJhMDNkNDU0NzMxZmIyYTUucG5nP3NpemU9MTI4/sources/images/defaultbanner.png
You can learn more about this in the documentation:
https://cloudinary.com/documentation/layers#remote_image_overlays
In addition, you can use the fl_layer_apply, to apply chain transformation on the layer you added. For example, you want to position the overlay image somewhere on the left side of the banner. Here is an example URL:
https://res.cloudinary.com/yiffhub/image/upload/l_fetch:aHR0cHM6Ly9jZG4uZGlzY29yZGFwcC5jb20vYXZhdGFycy8zODAxMzUwMTk2MzQ2MjI0NjUvMzMyNTZhNTM4YjRjY2Y3NjJhMDNkNDU0NzMxZmIyYTUucG5nP3NpemU9MTI4/fl_layer_apply,g_west,x_100/sources/images/defaultbanner.png
Let me know if this helps.
Thanks,
Francis1 -
This is helpful to a degree, but now I have a new problem, the code that I'm using does not allow me to encode the png as base64. Are there any workarounds I could use?
0 -
Hi,
In Francis' example above, the base64 encoded part of the URL isn't an encoded copy of the image file itself, it's the image's remote URL, encoded as a base64 string.
You should be able to perform that base64 encoding in any programming language or framework - if you can let us know what you're using, we may be able to share a specific example.
Also, if you're using one of Cloudinary's SDKs, you can pass the URL as-is when building the transformation options, and we'll encode it automatically when creating the URL, so you may want to use one of our SDKs to create the URL instead of manually creating the URL string in your own code.
Regards,
Stephen0 -
I actually figured out it was just the link being encoded. As for the framework, I'm using YAGPDB.xyz which has specific feature sets for managing users on discord, so I don't have the ability to import the packages that would make the process really simple. I might be able to make it from scratch, but I'm not a great coder in all honesty. would the SDK allow me to pass the URL directly from the bot? If that's the case that would solve my problem. I'll take a look at it
0 -
Hello,
Our SDKs are wrappers around the REST APIs, and they include helper methods that simplify your workflow in that Cloudinary does the heavy lifting for you behind the scenes. To answer your question - yes, the SDK allows you to pass the URL in directly. Cloudinary then performs the base64 encoding for you.
I will link to some documentation you may find helpful, in addition to what Francis has already shared with you: https://cloudinary.com/documentation/transformation_reference#l_fetchhttps://cloudinary.com/documentation/cloudinary_sdks
In the links that Francis and I shared, you will see that we have chosen examples in Node.js. If you are more familiar with one of the other languages, you can just click the appropriate tab at the top of the code example and the code will change over to the language you have chosen, which makes it easy to copy & paste.
I hope this helps. Let me know what you think. Give it a shot and if you have questions or need help with your implementation, do not hesitate to reach out to us. You can also open a support ticket directly here: https://support.cloudinary.com/hc/en-us/requests/new0 -
I've been preoccupied as of late and just got back into this, neither of these options will work for me since I'm unable to import packages into my environment. I'm using a custom command system on a discord bot called YAGPDB.xyz. It uses a fork of Golang but does not have the ability to import packages. It can make https requests but that's about it. I've already tried to create a base64 encoder on my own, but with such limited resource on that platform it's difficult. Any help would be appreciated.
0 -
Hi,
Another way to achieve this without converting the remote URL to base64 is by using the delivery type fetch. You will use the avatar as the base image by fetching it and adding the banner as an underlay (u_ in the URL).
Here is an example URL:https://res.cloudinary.com/yiffhub/image/fetch/u_sources:images:defaultbanner/fl_layer_apply,g_west,x_-100/https://cdn.discordapp.com/avatars/380135019634622465/33256a538b4ccf762a03d454731fb2a5.png?size=128
Please let me know if this works for you.
Thanks,
Francis1 -
welp I've got the original problem solved, but now I cannot seem to get any other transforms to appear correctly, for example this image is supposed to have an avatar image, alongside text on the background stored in my media center, but only the text appears.
https://res.cloudinary.com/yiffhub/image/fetch/g_east/l_text:sources:fonts:PermanentMarker.ttf_30:Welcome,x_30/u_sources:images:defaultbanner/fl_layer_apply,g_west,x_-300/https://cdn.discordapp.com/avatars/380135019634622465/f461ff907b0c665c880c1dcabbe5795e.png?size=128
I believe I've somehow underlayed the remote image somehow but I'm still new to this.0 -
Hi there,
You're nearly there.
I see that you are fetching the avatar as the base image, as Francis suggested. The next two chained transformations you have backward, You should apply the banner as underlay first, then close the layer with fl_layer apply, as you did. Now that that layer is locked in, you can apply the text overlay.
See the following two URLs for reference and let me know if that is what you are looking to achieve:
https://res.cloudinary.com/yiffhub/image/fetch/u_sources:images:defaultbanner/fl_layer_apply,g_west,x_-100/l_text:sources:fonts:PermanentMarker.ttf_30:Welcome,x_30//https://cdn.discordapp.com/avatars/380135019634622465/33256a538b4ccf762a03d454731fb2a5.png?size=128
https://res.cloudinary.com/yiffhub/image/fetch/u_sources:images:defaultbanner/fl_layer_apply,g_west,x_-100/l_text:sources:fonts:PermanentMarker.ttf_30:Welcome,x_30/https://cdn.discordapp.com/avatars/380135019634622465/f461ff907b0c665c880c1dcabbe5795e.png?size=128
If it's still not quite right, let me know and I'd be happy to continue working with this. I look forward to hearing from you.Kind Regards,
Tia
0 -
you guys are awesome I've got it working as intended. I want to make a slightly more advanced system, so what are the limitations on fetched media? I'm considering fetching 6 images if that's even possible.
0 -
Hi,
Could you please share more details on what are you trying to achieve? You could also give some examples so we can check on them.You can also check this documentation to know more about delivering remote media files:
https://cloudinary.com/documentation/fetch_remote_images
Best Regards,
Francis0
Post is closed for comments.
Comments
11 comments