Changing an Image Dynamically

13 replies
I want to change the image that is displayed on another site based on the number of completed sales for a product (basically I want to create my own "WSO Pro" buttons since WSO Pro has been having trouble lately.

What I want to do is have the buy button image that appears on the forum automatically change as the sales go up. I am thinking this means I create multiple buttons and, based on a parameter on my site, the same image name serves up the "right" image based on sales.

How do I serve a different image based on number of sales on a remote site?
#changing #dynamically #image
  • Profile picture of the author nzjav05
    First off, you will need a way of tracking sales. I recommend via database if that's possible...

    If you can use database, then this is how:

    - Create database
    - Create a table named "sales"
    - Create two fields named "id" and "count". Make the value of id = 1.

    ^Sales will need to be updated on each sale (don't know what system your using).

    Attached is a basic script to get your desired effect for images. But again, you will need a way to count downloads in a database.


    ^ I just wrote this off the top of my head, so haven't double checked code
    {{ DiscussionBoard.errors[1871817].message }}
    • Profile picture of the author TheWorker
      OK, I will make an assumption, and hopefully point you in the right direction.

      I am assuming that you will be placing a static image link on an external website from where your images are held (e.g. static image link on WSO, linking to your image on your own webserver).

      Example link on WSO:-

      <img src="http://somewebsite.com/my_wso_button.php">

      On your server, the my_wso_button.php script will need to do the following:-

      1) Determine how many sales have been made (probably using a database to count)
      2) Depending upon number of sales, the script will select the appropriate image, and send the image.

      For this, you will need to create your actual images, and save them on the server. Then, the my_wso_button.php script will use the order count, and redirect to the correct image.

      Your my_wso_button.php will contain something like this:-

      if ($count < 10)
      header("Location: http://www.your-domain.com/buy_17.gif");
      elseif ($count < 20)
      header("Location: http://www.your-domain.com/buy_27.gif");
      else
      header("Location: http://www.your-domain.com/buy_37.gif");

      This should do what you need.
      {{ DiscussionBoard.errors[1872066].message }}
      • I decided to go with the code below (because it was simpler for me not having ever used GD to create images) and it does not seem to be working for me in Firefox. Works fine in Chrome and IE, but not FF.

        I figure I did something wrong, but I am not seeing it.

        If I access the file directly, the correct image appears based on number of sales. If I access the file as an img src then it doesn't display an image.

        Here is the link to the "actual" image file (right now number of sales is set to 30):

        http://virtualprofitcenter.com/thinair/image.php

        Here is the code from that page:

        PHP Code:
        <?php
        /*
        ** This page chooses the appropriate payment button to display depending on
        ** the number sold
        */


        include( "numbersales.php");


        if ( 
        numberofsales 21) { header"location:http://www.virtualprofitcenter.com/images/grabit7.png"); 

            } elseif ((
        numberofsales 20)&&(numberofsales 41)) { header"location:http://www.virtualprofitcenter.com/images/grabit12.png");

            } elseif ((
        numberofsales 40)&&(numberofsales 61)) { header"location:http://www.virtualprofitcenter.com/images/grabit17.png");

            } elseif (
        numberofsales 60) { header"location:http://www.virtualprofitcenter.com/images/soldout.png"); 

        }

        ?>
        The test page is here:

        This is a Test of the Images

        The code for this page is:

        PHP Code:
        <?php 

        include ("numbersales.php");

        ?>
        <html>
        <head>
        <title>This is a Test of the Images</title>
        </head>
        <body>
        <p>The number of sales is: <?php echo numberofsales?></p>
        <p><img src="http://www.virtualprofitcenter.com/thinair/image.php"  alt="Click Here to Grab It!" /></p>
        </body>
        </html>

        The numbersales.php page is where I will put the MySQL access, but right now it just sets the variable $numberofsales to 30 manually. By the way, even though I used PHP tags in the forum, it stripped out the $numberofsales variable so I had to go back and remove all the $ to get it to appear. I DO have $numberofsales is the actual code!

        What am I missing here? Any ideas?



        Originally Posted by TheWorker View Post

        OK, I will make an assumption, and hopefully point you in the right direction.

        I am assuming that you will be placing a static image link on an external website from where your images are held (e.g. static image link on WSO, linking to your image on your own webserver).

        Example link on WSO:-

        <img src="http://somewebsite.com/my_wso_button.php">

        On your server, the my_wso_button.php script will need to do the following:-

        1) Determine how many sales have been made (probably using a database to count)
        2) Depending upon number of sales, the script will select the appropriate image, and send the image.

        For this, you will need to create your actual images, and save them on the server. Then, the my_wso_button.php script will use the order count, and redirect to the correct image.

        Your my_wso_button.php will contain something like this:-

        if ( < 10)
        header("Location: http://www.your-domain.com/buy_17.gif");
        elseif ( < 20)
        header("Location: http://www.your-domain.com/buy_27.gif");
        else
        header("Location: http://www.your-domain.com/buy_37.gif");

        This should do what you need.
        {{ DiscussionBoard.errors[1904872].message }}
  • Thanks nzjav05. That would work with images on my own site.

    Unfortunately, that's not what I want. I needed to be more clear.

    I want this to work in such a way that the image tag is located on the Warrior Forum, not on my site, so I want the dynamic image that is served to actually have the same file name as the previous image.

    So here's what it would look like...

    In the forum post would be an image location that looks like this:

    http://www.myurl.com/images/buybutton.png


    The "buybutton.png" file would be changed to reflect the number of sales/price point.
    {{ DiscussionBoard.errors[1871929].message }}
    • Profile picture of the author jminkler
      Originally Posted by Kevin-VirtualProfitCenter View Post

      Thanks nzjav05. That would work with images on my own site.

      Unfortunately, that's not what I want. I needed to be more clear.

      I want this to work in such a way that the image tag is located on the Warrior Forum, not on my site, so I want the dynamic image that is served to actually have the same file name as the previous image.

      So here's what it would look like...

      In the forum post would be an image location that looks like this:

      myurl.com: The Leading Domain Names Site on the Net


      The "buybutton.png" file would be changed to reflect the number of sales/price point.
      What you want to do is not put the number IN the image of the button. Just have a blank button png, and update its value.

      You would get the number of sales in php then ...

      HTML Code:
      <input type="button" value="<?php echo   ?>" style="background: transparent url(http://www.myurl.com/images/buybutton.png);">
      {{ DiscussionBoard.errors[1871984].message }}
  • Profile picture of the author imarketstuff
    hey there Kevin

    what you need to do is:

    1. build your db table to store data
    2. update that data when sales occur
    3. create a script that reads that data
    4. have this script output that data as an png or jpg image using GD
    5. insert an image tag into your posts here, using the script as the source

    here is a link to some code you can review as an framework to help you build your own script:

    http://www.ilikenetwork.com/nifty/display_sales.phps

    peace
    Signature
    I MARKET STUFF

    {{ DiscussionBoard.errors[1872038].message }}
  • Profile picture of the author imarketstuff
    update

    i like the solution from (jminkler) as well.. it would eliminate the need to create an image, and you can just output text from the script. an easy modification.

    i think i'll use it myself

    peace
    Signature
    I MARKET STUFF

    {{ DiscussionBoard.errors[1872059].message }}
  • Profile picture of the author imarketstuff
    i'm using firefox and was able to see the image from the test page. ff 3.6
    Signature
    I MARKET STUFF

    {{ DiscussionBoard.errors[1905513].message }}

Trending Topics