Gestión de imágenes en wordpress y mostrarlas utilizando jquery.

by dorian06

Cual era el problema a  resolver?  Encontrar una forma de poder gestionar los álbumes desde wordpress,
agregando fotos, descripción, etc y además de mostrar todos estos los álbumes en alguna sección de la pagina, mostrar los últimos  (ponele 6) utilizando  jquery o mootools (para llamar un poco la atención del lector) en la página principal. Se entiende? Osea, subir imágenes y mostrar las últimas con un poco mas de ‘onda’ ;)

Para mi suerte, me encontré con un excelente (y conocido) plugin llamado wp photo album y una galería hecha en jquery llamada prettygallery que combinándolos logre lo buscado. El resultado, lo pueden ver acá: entornoeconomico.com. En la página principal muestra las útlimas imagenes con el link y en la sección de sociales queda el archivo.

Implementar ‘wp photo album’ es muy sencillo, y las instrucciones las pueden ver acá, igual que las instrucciones de prettygallery desde acá; una vez que ya tenemos el plugin funcionando y la galería implementada, pasame a la pregunta que nos trae hoy:

como hacemos para mostrar automáticamente las imágenes y álbumes que subimos a wordpress en la galería jquery ?

Para lograrlo, vamos a llamar a la base de datos de wordpress, buscar el nombre del álbum en la tabla wp_wppa_albums para después, buscar alguna imagen de ese álbum, en la tabla wp_wppa_photos e imprimirlas dentro del <ul> </ul> de prettygallery con el nombre + la imagen + la url del album. Nos queda + o menos asi:

<ul class=’gallery’>

<?php
$query_album=”SELECT * FROM wp_wppa_albums ORDER BY id DESC LIMIT 6″;
$sal_album=mysql_query($query_album);
while($query_fetch_album=mysql_fetch_array($sal_album)){
$id_album=$query_fetch_album['id'];
$name_album=$query_fetch_album['name'];
$name_album=substr($name_album, 0, 30);
$query_imagen=”SELECT * FROM wp_wppa_photos WHERE album = $id_album LIMIT 1″;
$sal_imagen=mysql_query($query_imagen);
while($query_fetch_imagen=mysql_fetch_array($sal_imagen)){
$id_imagen=$query_fetch_imagen['id']; //el id es el nombre de la imagen
$ext=$query_fetch_imagen['ext']; //extensión de la imagen
?>

Ya tenemos todo lo necesario para imprimir la imágenes dentro del <li> </li> de prettygallery, lo hacemos de la siguiente manera:

recordemos que la forma por default de mostrar la imágenes prettygallery es:

	<li><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="T 1" /></li>
	<li><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="T 2" /></li>
	<li><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="T 3" /></li>
	<li><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="T 4" /></li>
	<li><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="T 5" /></li>

Y asi es como tiene que quedarnos:

<li>
<a href=”http://www.URL.com/?album=<?php echo “$id_album”; ?>”>
<img src=”http://www.URLDELAIMAGEN/<?php echo “$id_imagen.$ext”;?>” />
<center><h4><?php echo “$name_album”;?>…</h4></center></a>
</li>
<?php   }
} ?>
</ul>

Eso es todo, ahora tenemos un forma fácil y rapida de subir imagenes a wordpress y mostrar las últimas en la página principal utilizando javascript!

compartilo
  • Twitter
  • Facebook
  • LinkedIn
  • del.icio.us
  • Digg
  • Tumblr
  • Google Bookmarks
  • Print this article!
  • Turn this article into a PDF!
  • RSS