WP Affiliate – Preview for creatives

[sparkit]

how would you go about adding a preview for the creatives code?

i looked at how i could ‘preview’ the html from the text area using some clever jquery, but didn’t go very far.

depending on what code is in the text area the use of rollover the ‘name’ of the creative using th <span> or <div> method doesn’t achieve what you expect as these will clash with the page css and divs, and i could not find an easy way to have a button to convert the textarea to html view as there is no real form in the table view and accessing the document structure seems very difficult to me.

i guess that this could be a feature request?

by the way, is there a specific place where we can send you bugs reports/tweaks or is the forum good? how often do you push out updates of the plugins?

many thanks!

[amin007]

In the creative section it shows the code that the customer can copy and use on their site. All you need to do is pass that code through the “html_entity_decode” PHP function and it will render the HTML. For example if the code of the ad is stored in the “$ad_code” variable then the following line will render the HTML:

html_entity_decode($ad_code, ENT_COMPAT,"UTF-8");

You can add in another column in the table and add a button there that launches a preview window or something.

[sparkit]

is not doing very well as it depends very much upon the type of content. i’ve got a 600px table which can be used as footer, so the preview is a nightmare!

here is the code i’ve got for creating the rows:

foreach ($resultset as $resultset)

{

if($resultset->creative_type =="3")

{

$ad_code = str_replace("xxxx",$_SESSION,$resultset->description);

$ad_code = str_replace("XXXX",$_SESSION,$ad_code);

$demoCode= html_entity_decode($ad_code, ENT_COMPAT,"UTF-8");

echo '<tr>';

echo '<td class="col2">'.$resultset->name.'';

echo '<div id="lightbox" style="display:none;"><div id="lightbox-content" style="padding:20px;color:white;">'.$demoCode.'</div></div>';

echo '<div class="bubbleInfo">

<img class="trigger" src="images/demo.gif" />

<div class="popup"> Demo window </div>

</div></td>';

echo '<td><textarea cols=65 rows=5>';

echo $ad_code;

echo "</textarea></td>";

echo '</tr>';

}

}

as you can see i tried to pass on the ‘rendered’ code into a shadowbox frame (same as the wordpress theme), but nothing is displayed in the frame itself and by looking at the source code the html has not been decoded at all.

so, my thinking is that the easiest way might be to use the same stuff currently working for the banners: would you be able to modify the creatives code to add a preview image to be uploaded when the creative is added?

this way there are no rendering issues and if people want the preview they can add the picture.

[amin007]

Image or video preview in a lightbox is not the same as previewing HTML. Not many lightbox libraries can handle HTML stuff in the popup window (I am pretty sure shadowbox doesn’t do it).

I use a lightweight lightbox plugin to do the ad preview it can’t handle HTML which is why I didn’t do it for creatives.

[sparkit]

Shadowbox can definitely handle html/php as you can open entire pages in the box. i use it all the time and it is the same principle used to preview themes and plugin info in wordpress.

the standard call is something like the following which i also set the size of:

<a href="http://mysite.com/page.php" rel="shadowbox;height=600;width=850">

the problem is that it opens an existing page, what i have not been able to figure out is how to make things dynamic and pass the code from the text area into a page -we have established that partial code will not work- and maybe you have some suggestions as you know better how the code works.

if i’m creating ‘preview’ pages dynamically when the creatives.php is opened this might not be the best way as i could have a few rows, but i could have many. the ‘name’ of each creative is linking to the page and solves the problem.

an alternative would be to dynamically ‘write’ the code into a single empty container page from the array of creative names, but is this not a security risk opening the code to injection?

so basically i build an array of creatives and the corresponding code (or query directly from the $resultset you have if the ID is made available to the actual link), write the code to the container page on click and then page is opened in the box for preview.

does it make sense at all?

a completely different solution i was looking at is the WYSIWYG editors option to turn the text area from source to normal view; do you think this could be easier to implement?

[amin007]

I am not very familiar with the shadowbox library. This is how I would tackle it (this is just my opinion). The function you really need is called overlay. Overlay can show a block of HTML content in a popup window. So you wrap the code for each creative in a div and keep it hidden. There will be a button next to each creative which will overlay the hidden code for that creative in an overlay.

I usually use the JQuery Tools library. You can check out what I am talking about here:

http://flowplayer.org/tools/demos/overlay/multiple.html

Click the buttons “first” “second” etc and you will see what I mean. This particular example opens them in different position of the window but you don’t have to do that in your case. Checkout all the Overlay tutorials and you will have a good understanding.

[sparkit]

hi, thanks for the response; indeed that’s the same methods i tried first, but there is a big limitation in the sense that you have to ‘wrap the code’ in a div or span (see earlier).

if you have a ‘template’ for a newsletter, however, you will be likely to have a full html doc in the textarea. this is where the solution you suggest breaks (i tried that already

what i’m playing with at the moment is a simple WYSIWYG editor, stripped of all the buttons except for the source/html one. this seems to do the job, but i’m trying o figure out how to pass the stuff between jscript and php as only the top row is working now…

furthermore depending on the content the preview will be ‘ugly’ as it must fit in the box area (full screen preview is another option)

as i said earlier the simplest solution would be to be able to add a picture preview of the code (which makes the creatives similar to the ads).

[Author]

Posts