lunes, 9 de mayo de 2011

Poniendo una galería de fotos con yoxview

Bueno, después de este largo descanso volvemos con el tema de la web :) la última parte del contenido que no es texto es la galería de imágenes usando el módulo YoxView. Así que lo primero que hago es buscar en Google "Galería de imágenes Drupal 7" y encuentro este enlace: http://jmolivas.com/c-mo-crear-una-galer-de-im-genes-en-drupal-7-con-el-m-dulo-yoxview que justo explica esto. Siguiendo los pasos que pone en el blog,  podemos instalar YoxView (http://www.yoxigen.com/yoxview/) sin problemas así que os recomiendo que le echéis un vistazo. Sin embargo, al intentar seguirlo sin saber nada más me ha costado un poco así que voy a explicar en 4 pasos cómo conseguí que funcionara.
Paso 1: Instalar el módulo desde http://ftp.drupal.org/files/projects/yoxview-7.x-1.1.zip (para windows, para linux el enlace es igual pero en lugar de .zip .tar.gz. Para ello vamos a “Modules à install new module” y en el campo url ponemos la dirección del ftp desde el que descargar el módulo y le damos a install. A continuación, lo habilitamos para ello desde “Modules” marcamos la casilla enabled y hacemos click en el enlace “update script” que aparece al inicio de la página de módulos.

Paso 2: Crear el tipo de contenido para yoxview: En el menú superior vamos a Structure à Content Types à Add content type


Indicamos el nombre, la descripción y el campo que hará de label, en este caso dejamos ‘title’. En ‘Display Settings’ desmarcamos la opción de mostrar Author and Date information y en ‘Comment Settings’ indicamos que los comentarios están cerrados. Ahora pulsamos Save. Volvemos al menú de Content Types y, ahí aparece el campo que acabamos de crear.

Paso 3: Crear un tipo Gallery: Seguimos en Content Types, vamos a Manage Fields y creamos el tipo Gallery, indicamos que el “field” y el “widget” son de tipo Image.


Luego le damos a “edit” ahí aparecen algunas opciones para personalizar la imagen, pero lo más importante es poner en “Number of Values” un valor distinto de 1 ya que sino únicamente podremos poner una imagen en la galería. En concreto yo tengo el valor “unlimited”.

Paso 4: Enlazar el tipo Gallery para que sea manejado por yoxview: Vamos a la pestaña “Manage Display” y para Gallery indicamos que su formato YoxView y el de image Hidden. Después de guardar los cambios nos situamos encima de la fila Gallery y en la parte derecha de la pantalla aparece un engranaje, lo pulsamos ponemos el estilo de la imagen como “thumbnail”.


Ahora ya está todo preparado para poder poner una galería de imágenes. Vamos a Content à add Content à YoxGallery indicamos un título ponemos el body si queremos y añadimos las fotos que queramos del tipo Gallery


El problema es que la galería se muestra como una columna de imágenes. Esto es porque los divs que contienen cada una de las imágenes ocupan el 100% del ancho de la página y por lo tanto no caben. Con esto de momento no vamos a hacer nada ya que en breve, lo que haré será personalizar el tema para que muestre los colores, el logo, etc. de la empresa en cuestión así que nos preocuparemos de esto más adelante.
Para acabar quería decir que, dado que hemos añadido un nuevo contenido de tipo Gallery, tenemos que eliminar la Galería de imágenes creada cuando hicimos la estructura básica de la web.

11 comentarios:

  1. hola veronica, disculpa quiero escribir la dirrecion en donde me encuentro ahora mismo en drupal, que en alguna parte de la pagina me muestre la url en la que me encuentro. sabes como se pude hacer, uso drupal7 gracias.

    ResponderEliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Hola Morphmitrio, me alegro de que te ayudado el post :) yo modificaría directamente el css de yoxGallery, la verdad es que últimamente no tengo mucho tiempo para dedicarle a esto y no he podido hacer nada más pero yo probaría eso antes que modificar la template.

    un saludo,

    ResponderEliminar
  4. hola MeickoL, yo probaría a hacer lo siguiente, pon un nuevo bloque en la estructura de la web (en las entradas de febrero verás cómo) y en el block body por lo que encontrarás en http://www.webcheatsheet.com/PHP/get_current_page_url.php sobre cómo hacer que salga la URL

    no se si funcionaría o no pero yo probaría eso.

    Un saludo,

    ResponderEliminar
  5. Hey, gracias por este post, había encontrado el sitio en el que te basas pero no terminaba de entender bien las imágenes.

    En ese mismo sitio aparecen los cambios que hay que hacerle al CSS para que no muestre los thumbnails en una columna.

    Saludos.

    ResponderEliminar
  6. Ah, y como ayuda a Morphmitrio, puedo contarles que en mi experiencia, estoy unsando un theme para drupal que se llama Danland, que entre otras cosas trae en el archivo danland.info una línea comentada así:

    ;stylesheets[all][] = local.css

    Si descomentas esa línea (borrándole el ; del inicio) y creas el archivo local.css, en él puedes escribir todo el CSS que quieras, se carga al final y sobrescribe a lo que esté definido en el theme.

    Esto es aplicable a todo Theme de drupal: en el mismo archivo nombredeltheme.info debe haber al menos una línea como esta:

    stylesheets[all][] = style.css

    Si agregas inmediatamente debajo una apuntando a otro archivo CSS, y pones ese archivo en el mismo directorio, debe incluirse y comportarse como describí antes.

    Saludos.

    ResponderEliminar
  7. The Child gracias a ti por la aportación :)

    ResponderEliminar
  8. Que explicación más extraña, dices unas cosas, las imágenes muestran otras. Simplemente no entendí

    ResponderEliminar
  9. Gracias Verónica!!!!!!!! Lo tengo instalado y ha quedado divino!!!!

    ResponderEliminar
  10. Buenas para los que necesitan que las imagenes de la galeria se muestre horizontal, en vez de vertical en drupal...yo añadi estas lineas a uno de los CSS que usa mi template de drupal.

    .field-name-field-gallery .field-item {
    display: inline-table; //Se muestran en fila
    height: 75px;
    margin: 14px;
    width: 20%;
    text-align: center;
    vertical-align: middle;
    }

    Con esto conseguimos que cada capa de imagen, esten ordenadas y la imagen centrada en su interior.

    Espero que les sirva!, ah otra cosa...

    Alguien sabe en drupal, una vez creada la galeria como
    añadirle Paginación? por que entiendo que no tiene limite de imagenes y la web ser estirará hacia abajo...
    eso no esta muy fino....

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar