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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Junior Member
    Join Date
    Jan 2014
    Posts
    17
    Member #
    38140

    Unhappy How do I make a website that is only a SINGLE IMAGE (which I upload)?

    Hey guys, if somebody could answer this, that would be freaking awesome..

    I want my domain to direct simply to a single image that I upload (no column/icons/themes etc), basically, an 'under construction' page displaying NOTHING but a photo I've taken. I'd also like there to be nonstop looping audio in the background (with no visible audio player).

    It's 2014 and I know there has to be a super simple way to do this. I've scoured google and wordpress themes and can't find anything helpful.. Any help would epically appreciated!!!!

    Thanks, dan

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    Upload your single image to your website and give us a link to it.
    Upload your MP3 audio file to your website and give us a link to it.


  4. #3
    Junior Member
    Join Date
    Jan 2014
    Posts
    17
    Member #
    38140
    Hey, much thanks for the reply!
    I should be able to send you the links by tomorrow..
    Dan

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    Dan,

    When you upload those and give me links, you'll see where I'm going with this ...

    Just the act of uploading them to your website is 1/2 of the solution.

    Don't confuse "web page" with "website", they are two different things.

    Your "website" is your entire directory structure. You have a webhost account with a shared webhost, and you "rent" space on their server. That space is your website.

    A "web page" is an HTML file that instructs a user's browser on what to display ... in this case, your image and your audio file ... that you will be uploading to your website.


  6. #5
    Junior Member
    Join Date
    Jan 2014
    Posts
    17
    Member #
    38140

    JPEG, MP3 links

    Alright, much thanks for the clarification..


    ok, here is the webpage JPEG link:
    webpage JPEG | My Blog


    and here is the webpage MP3 (for invisible autoplay) link:
    webpage mp3 (to be invisibly autoplayed) | My Blog


    let me know if i gave you the wrong info, or if you need any other info,
    and i'll respond asap. i was hoping to get up and running by Friday, if possible..

    much thanks!
    Dan

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    This will be for modern browsers because it is HTML5 ...
    Some devices may not play MP3, so you may have to also include an OGG type audio format.
    And ... you'll never have a background image that is the correct ratio for all devices (screen sizes), so create one with important content in the middle.

    Here is my test page:
    http://www.catpin.com/dan.html

    View it with any new browser that supports HTML5, or an iPad/tablet.
    If you don't hear the audio (like with an Apple device), you'll have to also include a .ogg audio file.

    Here is the HTML5
    Code:
    <!DOCTYPE HTML>
    <html>
    <style>
    html,body{
    margin:0px auto;
    background: url('http://laughengine.com/wp-content/uploads/2014/01/webpage-image-872x1024.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    </style>
    <body>
    <audio autoplay loop> 
    <source src="http://laughengine.com/wp-content/uploads/2014/01/webpage-audio-to-be-invisibly-autoplayed.mp3" />  
    </audio> 
    </body>
    </html>
    Last edited by mlseim; Jan 09th, 2014 at 07:17 AM.


  8. #7
    Junior Member
    Join Date
    Jan 2014
    Posts
    17
    Member #
    38140
    most awesome! thanks..
    the audio worked on my mac, but not
    my ipad or iphone..

    so..

    i updated/re-uploaded the JPEG,
    and uploaded the OGG..
    these are the links:

    (updated) JPEG: http://laughengine.com/wp-content/up...bpage-JPEG.jpg
    OGG: webpage OGG (to be invisibly autoplayed) | My Blog
    MP3: http://laughengine.com/wp-content/up...autoplayed.mp3

    As for the HTML5 code, how do i go about using that? do i need to implement it into Wordpress somehow?
    (i'm sorry if that's a horribly stupid question! :$ )

    Thanks!

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    Try my test page again:
    http://www.catpin.com/dan.html

    Just copy paste the HTML5 script (below) into Notepad, save it as "whatever.html" and upload to a website. That's it.

    Code:
    <!DOCTYPE HTML>
    <html>
    <style>
    html,body{
    margin:0px auto;
    background: url('http://laughengine.com/wp-content/uploads/2014/01/webpage-JPEG.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    </style>
    <body>
    <audio autoplay loop>  
    <source src="http://laughengine.com/wp-content/uploads/2014/01/webpage-audio-to-be-invisibly-autoplayed.mp3" />
    <source src="http://laughengine.com/wp-content/uploads/2014/01/webpage-OGG-to-be-invisibly-autoplayed.ogg" />  
    </audio> 
    </body>
    </html>

    If still not working on iPhone or iPad, maybe we'll have to add another audio type .wav
    Normally, for the HTML5 audio tag, people just automatically add all audio types to cover everything.

    .mp3
    .ogg
    .wav
    .mp4 ?

    You can edit the HTML yourself ... now that you can see how the audio files are specified.
    Last edited by mlseim; Jan 09th, 2014 at 10:44 AM.


  10. #9
    Junior Member
    Join Date
    Jan 2014
    Posts
    17
    Member #
    38140
    Hey, thanks for the update..

    i'm still a bit stuck though..

    i'm not sure how to upload the .mp4 file
    or the .wav file, as they exceed the "10 MB" wordpress upload limit..

    .. and i believe i tried to upload the .html file to my bluehost website.. but i'm
    still not exactly sure how i was supposed to go about doing that.. and i didn't see any changes
    at my domain laughengine.com...

    thanks for you patience!

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    I didn't realize you were going to be doing this on your website that has WordPress installed.

    Does that mean you don't want your wordpress to show anymore? All you want is the single image and audio ... nothing else?
    Or are you trying to display that single image page somewhere within wordpress? That sort of changes everything.

    You can use FTP (file transfer protocol) using free software like FileZilla to transfer files to your website. It has nothing to do with wordpress. It's possible to create a directory for your "project" and link to it. Everything depends on what wordpress is supposed to do, as your single image with audio isn't typically used with wordpress.

    Describe what you're really trying to do, or what your goal is.
    Last edited by mlseim; Jan 09th, 2014 at 02:33 PM.



Page 1 of 2 1 2 LastLast

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 11:35 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com