Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Dec 2017
    Posts
    2
    Member #
    57900

    Which plugin is this?

    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 :-)

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,799
    Member #
    5580
    Liked
    726 times
    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.


  4. #3
    Member cosmic_wheels's Avatar
    Join Date
    Nov 2017
    Location
    Falkirk,Scotland
    Posts
    33
    Member #
    57853
    Liked
    4 times
    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.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,799
    Member #
    5580
    Liked
    726 times
    @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.


  6. #5
    Junior Member
    Join Date
    Dec 2017
    Posts
    2
    Member #
    57900
    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?

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by mlseim View Post
    @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.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com