Which plugin is this?

[sam44]

Hello everyone,

For my school study I need to create a website. I am building a webshop with a custom product and I was wondering which plugin a site like this is using to show the letters on the product immediately after you type them in? I've seen a few but they have like unlimited options where you can upload pictures and everything, I want to just have the same as the example I'm giving; one font, one place on the product. And the customer needs to be able to fill in the text.

https://www.thedailyedited.com/black-iphone-7-case

I have a Wordpress website.

Thanks a lot in advance for your help! I need to pass this school task and this will really make my website stand out :-)

[mlseim]

If you type in a few too many characters, the text spills out over the iphone image. That tells me that they are simply putting text over a background image of an iphone. Not too sophisticated.... probably some JQuery (javascripting) and PHP.

Viewing the HTML source, I see a ton of javascripting. And with some signs of AJAX, they are in fact using both JQuery and PHP.

[cosmic_wheels]

This page is using jQuery to detect a change to the "Input fields" (These aren't actually input fields, there are content editable div elements). When a change is detected to the content of these elements, jQuery then makes a Ajax Post request to:

https://www.thedailyedited.com/Monog...productGet.php

And sends variables via Post to the back end such as the font size, X and Y positions, font color etc.

The back end (PHP) then receives these variables which it will use to add the text to an image of a blank iphone. They will more than likely either be using GD Library or ImageMagick library for their image manipulation to recreate the text based on the Post variables and merge the generated text image to the blank iphone image using the X/Y coordinated. There are other ways but these are 2 of the most common ways due to the fact most hosting providers allow access to at least 1 of these libraries by default. Once this is done the library will output the image.

This image source will be returned to the jQuery Ajax function where another javascript function updates the src attribute of the iphone image element with the new source.

[mlseim]

@cosmic_wheels is correct, they are using PHP GD most likely.

You can tell that by putting some text on line 1 and then right-clicking on the image (to view image). It's a PNG with the text on it. So with JQuery, they send the text to a PHP function (AJAX) and then in return, PHP sends back the new PNG image that is replaced with the old one.

[sam44]

Thanks for all your replies!

Sounds very difficult to me.. haha.
This is just a school task, I'm not a frequent website builder or something. Any easy tutorials on how to do this?

[Ronald Roe]

@cosmic_wheels is correct, they are using PHP GD most likely.

You can tell that by putting some text on line 1 and then right-clicking on the image (to view image). It's a PNG with the text on it. So with JQuery, they send the text to a PHP function (AJAX) and then in return, PHP sends back the new PNG image that is replaced with the old one.

That seems like an overly complex method to do something like that.