Joomla! y K2: Nuevo campo personalizado donde queramos

Hoy hablaremos de Joomla! Y su archiconocida extensión K2, que nos permite tener bien organizados todos nuestros artículos, por ejemplo tipo blog, catálogos de productos, etc…

La extensión es muy potente, ya que la gente de JoomlaWorks ha pensado en todo o casi…

Seguro que muchos habéis necesitado alguna vez crear un campo para poner información adicional, como por ejemplo un subtitulo (debajo del título del artículo), una frase en algún lugar del artículo, alguna imagen más. El inconveniente es que la estructura del artículo es la misma para todos, es decir, si cambiamos el orden (mediante código en ítem.php) de alguno de los elemento, se nos cambian en todos los artículos.

En nuestro ejemplo queremos poner un subtitulo que aparezca de justo encima del ‘fulltext’:

Localizamos y abrimos los archivos:

administrator/components/com_k2/models/item.xml

Aquí insertaremos el campo a rellenar dentro del editor del ítem, en la administración de k2:

Campo nuevo en editor de K2

El archivo está compuesto por cuatro partes:

  1. Parámetros de la vista categoría
  2. Parámetros de la vista ítem
  3. Campos de la vista categoría
  4. Campos de la vista ítem

Como nos interesa poner un subtitulo dentro del ítem, insertaremos esta línea en la parte de parámetros de la vista ítem (la identificamos porque todos los ‘name’ de los parámetros empiezan por ‘item’, en la vista de categoría empieza por ‘cat’ ):

<param name="itemSubtitle" type="text" default="" size="20" label="itemSubtitle" description="Subtitle" />

En nuestro caso lo colocamos justo debajo del parámetro ‘itemFeaturedNotice’ que no es otro que el de destacados. Como el type es ‘text’ quiere decir que será una cadena de caracteres. Si quisiéramos poner una lista con diferentes opciones, podemos coger el ejemplo:

<param name="itemOPCION" type="list" default="" label="NOMBRE_DE_LA _OPCION" description="">
<option value="">OPCION_POR_DEFECTO</option>
<option value="0"> OPCION1</option>
<option value="1"> OPCION2</option> 
… 
</param>

Una vez tenemos el parámetro, vamos a crear el campo para verlo en la columna de la derecha del editor del K2: Ponemos el siguiente código (fijaos que name y label es el mismo), en la misma posición que hemos puesto el parámetro dentro de la parte de Campos de la vista ítem (También los reconocemos porque empiezan con item):

<field name="itemSubtitle" type="text" default="" size="4" label="SUBTITLE" description=""/>

Si accedemos al Editor de K2 de cualquier ítem ya deberíamos ver el campo en la parte de la derecha:

Nos aparece el nuevo campo personalizado en el editor de K2

Ahora tenemos que mostrarlo en el frontend. Podemos ponerlo en la vista del item:

Vamos al archivo: components/com_k2/templates/default/item.php

Insertamos el código:

<?php if($this->item->params->get('itemSubtitle')) { ?>

<div class="subtitle">

<?php echo $this->item->params->get('itemSubtitle'); ?>

</div>

<?php } ?>

El código lo ponemos donde no apetezca que salgo, en nuestro ejemplo lo hemos puesto justo entre:

<div class="itemFullText">

Nuestro código.

<?php echo $this->item->fulltext; ?>

</div>

Para la vista de la categoría, exactamente lo mismo pero en el siguiente archivo:

components/com_k2/templates/default/category.php

Lo ultimo que quedaría seria darle estilos con nuestro archivo CSS del K2, en este caso con la etiqueta  .subtitle

Y eso es todo.

  • Roger

    Y si necesito agregar un campo de tipo fecha? como lo hago?

  • http://minegocioweb.cl Francisco Jofre

    Gracias, muy buen aporte, necesitaba ayuda con esto. La única diferencia (y lo dejo por si a alguien le resulto distinto a tu excelente explicación) es que el código lo coloque debajo de la etiqueta Que es donde se genera el Titulo del articulo. Como no domino php, tu explicación me vino de lujo.

    • http://minegocioweb.cl Francisco Jofre

      No apareció el nombre de etiqueta…lo siento: (h2 class=”itemTitle”). Ojalá ahora aparezca.

  • http://sitioweb claudia

    Muy interesante….. Estoy aplicando todos estos trucos y me funciona de maravilla. El problema que me queda en cuanto al contenido de k2, y que no veo manera de solucionarlo, es el siguiente ( y me gustaría que me dierais alguna pista…. porque no veo la manera ): en un artículo de k2 ( joomla 2.5 ) , cuando incrusto un archivo multimedia ( por ej. un video, o un libro digital , siempre me sale éste ANTES del contenido del artículo. Yo quiero que me salga PRIMERO el contenido ( lo escrito, con su subtítulo imagen…) y ABAJO, el archivo multimedia. Cómo se podría arreglar esto? me sorprende que k2 tenga esta configuración por defecto para la vista de ítems.
    muchisimas gracias por adelantado!!!

    • jordi

      Hola Claudia, perdón a por el retraso.
      La única manera de cambiar el orden en que aparecen los elementos en K2 es cambiando estos de posición en el código de la vista del componente.
      El archivo que tendrías que tocar es el com_k2/templates/default/item.php
      Localiza los archivos multimedia y recórtalos y pégalos donde desees. Puedes saber que código es porque el archivo está bien comentado. Utiliza la inspección de código de tu navegador para no equivocarte.
      SOBRETODO: haz una copia del archivo antes de tocar nada.
      Si tienes más dudas dime concretamente donde.

  • http://www.comunidadunete.net MIguel Angel

    Hola lo que yo necesito es duplicar la pestaña de categorias para hacer combos de categorias tengo instalado la extension multicategory pero esa solo me permite elegir las categorias que desee pero se hace una lista enormeeee y siento que mi usuario no podra ver todas como lo puedo hacer.

    Saludos

    • jordi

      Hola Miguel Angel, siento no poder ayudarte ya que no hemos utilizado nunca la extensión que mencionas. Puedes ponerte en contacto con los desarrolladores de la misma que seguro podrán ayudarte.
      Solo una cosa, no se hasta que punto hacer dos listas del mismo campo será posible. Si te molesta el formato con el que sale la lista de categorías, yo lo que haría sería tocar el css. Puedes hacerla más grande, letra más pequeña, tu mismo.
      Utiliza la inspección de código para localizar el archivo css y la línea a tocar. Si tienes dudas, pon concretamente donde, ha ver si podemos ayudar.