Hola a todos, hacía mucho que no creaba un post, así que en este tutorial les "enseñaré" a crear su propia web de Host de imágenes, desde cero, sera algo básica, lo único será en el index el formulario para subir la imagen y algunas imágenes 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 y dentro de el pegan lo siguiente:
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
![Crea tu host de imagenes [PHP]](https://storage.posteamelo.com/assets-adonis/assets/2014/08/10/Captura.png-HzmzUHqhLNk.webp)
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:
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 http://localhost/imagenes.
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:
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.
Opcional, puedes agregar arriba de todo <?php error_reporting(0) ?> para que no reporte si hay alguna falla.
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
Eso es todo en este tutorial, espero que les guste.
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 y dentro de el pegan lo siguiente:
<!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 "<i>Subir imagen</i>", y luego te llevara a la pagina donde estará la imagen que seleccionaste, y los modos para insertarla en diferentes lugares.<br><br>
Las "condiciones" 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
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:
<?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"><img src="'.$inicio.$url.'" /></pre>';
echo '<h2 class="modo">CSS y HTML (background)</h2><pre id="cod" style="text-align:left"><style type="text/css">
#img-background{
background: url('.$inicio.$url.');
width: '.$ancho.'px;
height: '.$alto.'px;
}
</style>
<div id="img-background"></div></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 http://localhost/imagenes.
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:
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.
Opcional, puedes agregar arriba de todo <?php error_reporting(0) ?> para que no reporte si hay alguna falla.
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
Eso es todo en este tutorial, espero que les guste.