0 Favourites

How do I split HTML from remaining file structure

  • 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

  • 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 <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

  • vancouver

    Great stuff - thanks for this - I will have a play. I think that iFrames is definitely the way forward with this

  • 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.

  • Hi vancouver. Could you give me some tips on how to publish games into iframes in wordpress? Thanks

  • 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!

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • 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

  • 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

  • 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.

  • 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....

  • 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....

    Not really. Like I said, I intend to create an online portfolio to show the games only for companies and institutions. I just want that anyone have access to images and informations, but they will need a password to play the game.

  • Could be a better way to set the base url for all of the sprites

    If I create a game that uses different templates do I have to load each file on each sprite on the load of each layout?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
[Plugins] Pode HTML Pack
305 99,166
Lordshiva1948's avatar
Lordshiva1948
Unread hot topic
0 Favourites
[PLUGIN] HTML | iFrame
299 36,322
Nandynho's avatar
Nandynho
Unread hot topic
99 10,152
karshinkoff's avatar
karshinkoff