Tutorial: Crea tu web host de imágenes

kanikase · 2014-08-02T06:51:00-0500

Hola a todos, en este tutorial les "enseñaré" a crear su propia web de Host de imagenes, desde cero, sera algo básica, lo único será en el index el formulario para subir la imagen y algunas imagenes que se han subido, así que sólo usaremos HTML, CSS y poco php, empecemos con el tutorial:

Lo primero que se tienen que hacer, es abrir su editor de texto para programar (yo uso sublime text2), ahí crean un nuevo archivo, en "formato" php y6 dentro de el pegan lo siguiente:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Host de imagenes</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
    <div id="wrapper">
        <header><a href="index.php"><h2 class="title">Host de imagenes</h2></a><div class="clear"></div></header>
        <div id="contenido">
            <p>Para subir la imagen, lo único que tienes que hacer es seleccionar la imagen, en el formulario que encontrarás más abajo, cuando tengas seleccionada la imagen, sólo haces click en &quot;<i>Subir imagen</i>&quot;, y luego te llevara a la pagina donde estará la imagen que seleccionaste, y los modos para insertarla en diferentes lugares.<br><br>
            Las &quot;condiciones&quot; para las imagenes son las siguientes:</p>
            <p class="condicion">La imagen debe tener un peso menor a 1.5 MB.</p>
            <p class="condicion">NO con contenido pornografico, gore, racismo etc.</p>
            <p class="condicion">La imagen de estár en formato png, jpg, gif, ico o bmp</p><br>
            <p style="margin-bottom:15px">Si estás seguro de que cumpliras con las condiciones anteriores, puedes continuar.</p>
            <div id="formulario">
                <form action="complete.php" method="post" enctype="multipart/form-data">           
                    <input type="file" name="imagen"  style="width:400px;"/>
                    <input type="submit" name="subir" value="Subir Imagen" />           
                </form>
            </div>
            <div id="ultimas">
            <h2 style="margin-bottom:15px">Algunas imagenes que se han subido</h2>
        <?php
        function get_images(){
        $arr_ext = array("bmp","BMP","gif","GIF","jpg","JPG","png","PNG","ico","ICO","jpeg","JPEG");
        $mydir = opendir('./upload/');
        while($file = readdir($mydir)){
            $ext = substr($file, -3);
            if(in_array($ext, $arr_ext)){
                if(!empty($size)){
                    $im_size = substr($file, -6, 2);
                    if ($size == $im_size) $images_list[] = substr($file, 0, -7);
                }else $images_list[] = $file;
            }
        }
        return $images_list;
}
$images_list = get_images();
$i = 1;
$limite = 8;
foreach($images_list AS $img){
        if($i <= $limite) echo '<img id="img-home" src="upload/'.$img.'" alt="Imagen" />';
        $i++;
}  
?>
</div>
<div id="publicidad"><?php include '728x90.php' ?>
</div>
        </div>
    </div>
    <footer>
        Copyright © <script>document.write(new Date().getFullYear());</script>
    </footer>
</body>
</html>

Si no entienden ese código, lo único que teneos es como ya dije, el formulario para enviar la imagen, y algunas imagenes que se han subido, que serán 8 las que se mostrarán, eso lo pueden poner a su gusto.
Ese archivo lo guardan en alguna carpeta, yo lo tengo en localhost/imagenes :witless:

Ahora creamos otro archivo, este sera donde aparecer la imagen que se ha cargado, en nuestri editor creamos un nuevo archivo, también en formato php, dentro de el pegan el siguiente código:

HTML:

<?php
//CONFIGURACIONES PARA EL UPLOAD
$inicio = 'http://localhost/imagenes/'; //Página de inicio de la web, que termine en "/"
$nombreimagen = $_FILES['imagen']['name']; //Nombre de la imagen
$tmpimagen = $_FILES['imagen']['tmp_name']; //Directorio de la imagen
$extimagen = pathinfo($nombreimagen); //Extension de la imagen
$ext = array("bmp","BMP","gif","GIF","jpg","JPG","png","PNG","ico","ICO","jpeg","JPEG"); //Formatos permitidos
$directorio = 'upload/';//A donde se subira la imagen
$url = $directorio.md5($nombreimagen).'.'.$extimagen['extension']; 
$tamaño = getimagesize($_FILES['imagen']['tmp_name']); //Tamaño de la imagen
list($ancho, $alto) = $tamaño;
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
    <div id="wrapper">
        <header><a href="index.php"><h2 class="title">Host de imagenes</h2></a><div class="clear"></div></header>
        <div id="contenido">
<?php
if(isset($_POST['subir'])){
    if(is_uploaded_file($tmpimagen)){
        if(array_search($extimagen['extension'],$ext)){
            copy($tmpimagen, $url);
            echo '<h2 class="modo">Imagen seleccionada:</h2><div id="cont-imagen"><a href="'.$url.'" target="_blank"><img class="imagen" src="'.$url.'" /></a></div>';
            echo '<div id="publicidad">';include '728x90.php'; echo '</div>'; //Incluimoas la publicidad
            echo '<h2 class="modo">Enlace:</h2><pre id="cod">'.$inicio.$url.'</pre>';
            echo '<h2 class="modo">HTML</h2><pre id="cod">&lt;img src="'.$inicio.$url.'" /&gt;</pre>';
            echo '<h2 class="modo">CSS y HTML (background)</h2><pre id="cod" style="text-align:left">&lt;style type=&quot;text/css&quot;&gt;
#img-background{
background: url('.$inicio.$url.');
width: '.$ancho.'px;
height: '.$alto.'px;
}
&lt;/style&gt;
&lt;div id="img-background"&gt;&lt;/div&gt;</pre>';
            echo '<h2 class="modo">Foro/Comunidad</h2><pre id="cod">[IMG]'.$inicio.$url.'[/IMG]</pre>';
        }
        else {
            echo 'Solo se permiten imágenes con formato bmp, jpg, gif o png<br>';
        }
    }
    else {
        echo 'Selecciona una imagen.';
    }
} 
?>
<h2 class="modo" style="margin-top:30px">Selecciona otra imagen</h2>
<div id="formulario">
<form action="complete.php" method="post" enctype="multipart/form-data">           
    <input type="file" name="imagen"  style="width:400px;"/>
    <input type="submit" name="subir" value="Subir Imagen" />           
</form>
</div>
</div>
</div>
<footer>
        Copyright © <script>document.write(new Date().getFullYear());</script>
    </footer>
</body>
</html>

Ese código tiene las funciones, que son al inicio obtener los datos de la imagen, como extensión, directorio de la imagen y dimensiones, aemas de que se definen unas configuraciones, que son a donde se subirá la imagen, o mejor dicho a que carpeta, en este caso yo seleccione upload, pero la pueden cambiar.
También usamos otro poco de php en el body, que lo único que hace es imprimir la imagen, y los metodos para insertarla, que yo seleccione, la imagen, el enlace directo, con la etiqueta img, con css yHTML (background) y código para foros.
Es muy importante que arriba, se escriba la direccion principal de la web, y que termine con "/" en mi caso 404 Not Found.

Así se debería ver el código si usan Sublime text2

, así se vería la web hasta ahora:

Se ve mal D: asi que le daremos estilo, para eso, en nuestro mismo editor de texto creamos un nuevo archivo, pero este en formato css, y en el pegamos el siguiente código:

HTML:

body{
	background: #EFEFEF;
	margin: 0;
	font-family: sans-serif;
	background-image: url(hdr.png);
	background-size: 100% 50px;
	background-repeat: no-repeat;
}
h1, h2, h3, p{
	margin:0;
}
.clear{clear:both;}
#wrapper{
	width: 900px;
	margin: auto;
	background: #FFF;
	box-shadow: 0 0 1px #333;
}
header{
	padding: 10px 0;
	background: #000;
}
.title{
	float: left;
}
header a{
	color: #EEE;
	text-decoration: none;
}
#contenido{
	padding: 10px;
	background: #F8F8F8;
}
h2.modo{
	text-align: center;
	color: #444;
}
#cont-imagen {
	text-align: center;
}
.imagen {
	max-width: 800px;
	padding: 10px;
	box-shadow: 0 0 1px #333;
	margin-top: 10px
}
#cod {
	padding: 8px;
	background: #DFDFDF;
	border: 1px solid #A7A7A7;
	overflow: auto;
	text-align: center;
	border-radius: 3px;
	font-family: monospace;
}
#formulario {
	background: #E4E4E4;
	padding: 10px;
	border: 1px solid #ACACAC;
	margin-bottom: 30px;
}
form {
	width: 500px;
	margin: 0 auto;
}
#img-home {
	padding: 5px;
	border: 1px solid #E2E2E2;
	margin: 0 5px 0 0;
	width: 200px;
	height: 200px;
}
#ultimas {
	text-align: center;
	margin: 10px 0;
	padding: 10px 0;
}
#publicidad{
	width: 728px;
	margin: 10px auto;
}
p.condicion {
	color: #585858;
	font-style: italic;
	font-size: 15px;
	margin: 0 0 3px;
}
p.condicion::before {
	content: '--';
	color: transparent;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9gKFBI5OnBYz50AAAChSURBVCjPlZJBCsIwEEVfS/EAbt16kB7FA7iPYhFaFM3eS3gLD9KtW08gxIVJGUKGIbNJPrwXJsM0IQRqqqWyOgDnXMrneE4l2Hv/FwQ8ijxZLa3EfQROljAAV5EvJSn/9ADcM+lgTemYSTcpaWN9AB+R98BaEzbAKwHAG+jTA60CbzN4LrVkwlLogKcFS+EL7CKowssuxZojiAYDNLXr/QO6nCauowYexgAAAABJRU5ErkJggg==);
	position: relative;
	margin: 0 4px 0 0;
	background-size: 13px 13px;
	background-repeat: no-repeat;
	top: 2px;
}
footer{
	background: #000;
	padding: 10px;
	text-align: center;
	color: #FFF;
}

Y lo guardamos cono estilos.css y ya tendremos estilos en nuestra web, ahora se vera así:

El error que sale es porque aun no hay imagenes en nuestra web.

Ahora vamos a agregar publicaidad 728 x 90, en el editor de texto sólo creamos un archivo php y en el sólo pegamos nuestro codigo de publicidad 728 x 90 y lo guardamos como 728x90.php y listo, ya abremos terminado la web.

Y ultimo paso, crea una carpeta en el directorio principal que se llame upload o si seleccionaste otro nombre, con el que hayas seleccionado.

Así debe estar la carpeta.

Ahora si ya está todo listo, sólo subimos todos los archivos y la carpeta a nuestro host.

Importante este es un tutorial para crear la web básica, por lo que no agregue metaetiquetas, favicon, o algunas otras cosas menos importantes, que pueden agregar a su gusto, como logo a la web o más publicidad

DEMO

Abajo puedes descargar todos los archivos comprimidos en un zip.

Eso es todo en este tutorial, espero que les guste y si les sirve denle "Me agrada", "Me gusta" o lo que quieran

AndreayYap · 2014-08-02T07:19:36-0500

Buenísimo!!

fanegator · 2014-08-02T08:25:22-0500

Muy bueno pero solo una cosa, en los codigos te da una ruta /imagenes/upload/23f94e89fc4c5c713f1b2e5262a1741d.png para el caso de la imagen que subí, pero en realidad la ruta es otra, va directo a upload sin pasar por la carpeta imagenes

http://hostdeimagenes.tk/upload/23f94e89fc4c5c713f1b2e5262a1741d.png

ikanus · 2014-08-02T09:03:31-0500

¿Como hago para que no salgan esos errores al final?

Darwin · 2014-08-02T09:56:52-0500

Buen post, me gusta porque es desde cero, justo a la medida. :encouragement:

kanikase · 2014-08-02T16:55:05-0500

Ya vi que tipo de imagenes han cargado :ambivalence: :welcoming:

- - - Actualizado - - -

fanegator dijo:
Muy bueno pero solo una cosa, en los codigos te da una ruta /imagenes/upload/23f94e89fc4c5c713f1b2e5262a1741d.png para el caso de la imagen que subí, pero en realidad la ruta es otra, va directo a upload sin pasar por la carpeta imagenes

http://hostdeimagenes.tk/upload/23f94e89fc4c5c713f1b2e5262a1741d.png

Ya vi todo y lo veo bien, donde está ese error?

LuisNara · 2014-08-02T17:29:04-0500

En un rato lo pruebo :encouragement:

TonchitoZ · 2014-08-02T17:36:12-0500

ikanus dijo:
¿Como hago para que no salgan esos errores al final?

En la línea 1 del código situas el siguiente código:

Insertar CODE, HTML o PHP:

<?php error_reporting (0); ?>

Te dejo un enlace con lo que realiza esta funcion :encouragement:

eldextherxd · 2014-08-02T17:44:52-0500

guardando .. :encouragement:

anferro · 2014-08-02T17:52:49-0500

Muy bueno amigo gran trabajo!

ElnecioGomez · 2014-08-02T20:55:54-0500

Buen tutorial, muchas gracias !:welcoming:

kanikase · 2014-08-02T21:04:15-0500

Gracias [MENTION=33897]elneciogomez[/MENTION] :welcoming:

8:

Euritos · 2014-08-02T21:04:53-0500

Esto serviria para hacer como un CDN de imagenes dentro de una web y asi no sobrecargar dicha web?

con un subdominio tipo imagenes.miweb.com?

Saludos :encouragement:

kanikase · 2014-08-02T21:10:57-0500

Euritos dijo:
Esto serviria para hacer como un CDN de imagenes dentro de una web y asi no sobrecargar dicha web?

con un subdominio tipo imagenes.miweb.com?

Saludos :encouragement:

Gracias, no había pensado en eso, lo haré.

No se pasen con las imagenes que suben :witless:

georgebena · 2014-08-02T21:11:21-0500

Muy bueno!!! gracias!!

Euritos · 2014-08-02T21:36:15-0500

kanikase dijo:
Gracias, no había pensado en eso, lo haré.

No se pasen con las imagenes que suben :witless:

De todas formas, no se hasta que punto sirve hacerlo de esta forma, me parece que seria muy engorroso ya que habria que hacerlo todo manualmente jajja

kanikase · 2014-08-03T05:44:24-0500

Creo que no les gustó mi tutorial :sorrow::sorrow:

xLincex · 2014-08-03T19:13:42-0500

Interesante, habra que probarlo.

Allan Cano · 2014-08-04T20:32:18-0500

kanikase dijo:
Gracias [MENTION=33897]elneciogomez[/MENTION] :welcoming:8:

Eres el mejor, amigo, buen tutorial

8:

8: :encouragement:.

Ya te deje mi me agrada :marchmellow:

luismaster2009 · 2014-08-06T16:25:55-0500

Al subir una imagen me sale un error solo dice 500

Tutorial: Crea tu web host de imágenes

kanikase Seguir

Adjuntos

AndreayYap

fanegator

ikanus

Darwin

kanikase

LuisNara

TonchitoZ

eldextherxd

anferro

ElnecioGomez

kanikase

Euritos

kanikase

georgebena

Euritos

kanikase

xLincex

Allan Cano

luismaster2009