How do I split HTML from remaining file structure

Get help using Construct 2

Post » Fri Apr 25, 2014 2:21 pm

I am using Wordpress to create some content that can only be accessed by subscribers. I have created a page in WP in which I paste my HTML, but need to place the remaining content (e.g. javascript, images etc) in a separate folder.

I have updated the following lines in the HTML to reflect the redirection:

<html manifest="/uploads/TPDemo/offline.appcache">
<script src="/uploads/TPDemo/jquery-2.0.0.min.js"></script>
<script src="/uploads/TPDemo/c2runtime.js"></script>

However the page is failing to load any of the images - showing a 'Failed to load resource: the server responded with a status of 404 (Not Found)' error

Yet using the chrome resources tool, the Application Cache is showing them as present!

Any ideas or experience gratefully received :-)
B
8
S
2
G
1
Posts: 45
Reputation: 1,007

Post » Wed May 21, 2014 12:01 am

Hello sanisy,
I will try this later this week because I have a members only portion of my website running on WordPress.

The way to go is iframes.

If you would like to read up on iframes, check out this link:
http://www.html5rocks.com/en/tutorials/ ... d-iframes/

Have fun,

V :)
B
14
S
4
Posts: 190
Reputation: 1,735

Post » Wed May 21, 2014 9:03 am

@vancouver

Great stuff - thanks for this - I will have a play. I think that iFrames is definitely the way forward with this
B
8
S
2
G
1
Posts: 45
Reputation: 1,007

Post » Tue Jun 10, 2014 5:46 pm

Hi @sainsy

I also want to publish games on Wordpress. Were you able to do something with iframes? If yes, could you give me some help on how to do this? I intend to use the "Restrict Content Pro" plugin to control access, do you know? Thanks.
B
74
S
13
G
3
Posts: 995
Reputation: 7,531

Post » Sat Jun 14, 2014 11:30 am

Hi @vancouver. Could you give me some tips on how to publish games into iframes in wordpress? Thanks
B
74
S
13
G
3
Posts: 995
Reputation: 7,531

Post » Sat Jun 14, 2014 5:00 pm

@RenatoB
Hello Renato,

On your FTP server
    create/make a directory to hold your games
    upload your C2 HTML5 exported files into that directory

Inside WordPress
    Make a new blank page
    Insert the "iframe code" in TEXT mode!!

Paste this into your WordPress page:

<iframe src="<URL to your project's index.html>" name="<Name of your Iframe>" width="???" height="???" frameborder="0" scrolling="no" ><p>Your browser does not support iframes.</p> ></iframe>

Replace the URL with: "http://yourdomain.com/directoryname/subdirectoryname/index.html"

You don't even have to use the "index.html" part because the server "expects" an index or default html file but still, it is best to specify.

Width and height of your game

Here is where it get's a little tricky. The culprit is RESPONSIVE web design.

Assuming you have a WordPress theme which comes with that feature (and it should), you'll need to look over your "main.css" file and find the class which deals with making inserted objects responsive.
Most examples on the net only describe how to do with with a YouTube video so most likely, you will have to add custom CSS and then use a <div> tag to reference the "class" (CSS Class).

The above iframe code would then look something like this:
<div class="xxxxxxxxclassname">
<iframe ...... </iframe>
</div>

Please tell us your URL so that we can check if your site uses responsive design and if it does, you should be able to tweak the CSS class to make it happen.

Also. If you have multiple games, you need to create a sub directory for every game title. Please make sure that the first directory (which holds the sub directories) is not empty because it is best practise to have an index.php file in there which you need to create with a text editor (for security reasons).
On your computer, make a new file with this text inside and then save it as index.php

<?php
// Silence is golden.
?>

This will display a blank page and thus, prevent a directory listing which would give away your file structure.

See if this is enough to get you going.

Maybe you will need to find a new WP theme or append your existing one with the following css class:
You can find your CSS file inside
wp-content > themes > themename > style.css (or what ever name the author used)

I use this CSS code to make the magic happen:

/* Flexible iFrame */

.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


So then, the iframe would be inserted this way:

<div class="Flexible-container">
iframe text
</div>

I hope you are up to speed with CSS otherwise all of this will seem complicated but it is actually no.

The good news is that you only have to do this once. After that is created and you get the first game to display as you want, you can always just copy paste and only change the game sub dir and you are good to go!

YAY! :)
B
14
S
4
Posts: 190
Reputation: 1,735

Post » Sat Jun 14, 2014 5:36 pm

@vancouver: You're the best! Perfect explanation! Thank you very much.

Only one more question: What you do to protect the access to the game? Is it possible to use the feature of Wordpress itself? I'd rather just use a password instead of login + password. I found a plugin that only works this way: Restrict Content Pro
B
74
S
13
G
3
Posts: 995
Reputation: 7,531

Post » Sat Jun 14, 2014 5:47 pm

Thank you! :)

I just came across something ...

In WordPress, you can use a "link" in the menu as well.

It would be MUCH BETTER to just link to your game index.html file from wordpress and make it open a new page (target="_blank")
This way, you don't have to deal with resizing issues and there won't be a menu which will take away space from your game.

I think that from now on, I will just link my game pages and open them in a new tab.

This way, they display perfectly and when the user is done, they just close the page and land right back where they came from.

Maybe this will come in handy if you are in a hurry to post your games.

Ciao for now,

V :)
B
14
S
4
Posts: 190
Reputation: 1,735

Post » Sat Jun 14, 2014 6:39 pm

Thanks for the new tips. This way is really more practical. But the path will be visible and I don't want it. And about the password issue? Do you protect access to the games? I intend to create an online portfolio to show only for businesses. I don't want people to use the portfolio to play.
B
74
S
13
G
3
Posts: 995
Reputation: 7,531

Post » Sat Jun 14, 2014 7:27 pm

Oops,

I totally missed the protected part of your reply.
There are two ways to go. Use a protected dir inside your ftp structure and a .htacces entry or go the i frame way and a plugin like membership or members which is what i use.
Don't use a password. You want to build a list of members because the value of your games lies in the site membership.
The formula is a simple one. The more members and active uses, the more google ad revenue and so on....
B
14
S
4
Posts: 190
Reputation: 1,735

Next

Return to How do I....?

Who is online

Users browsing this forum: MoscowModder, Yahoo [Bot] and 6 guests