Novato Wordpress; image-attachment

[MadDunDee]

Hola!

Acabo de comenzar con mi primer tema en wordpress para un cliente y tenga bastantes dudas acerca de muchas cosas. Pero bueno, me gustaría saber lo siguiente:

Llevo un rato investigando por la red la forma en cómo podría conseguir un formato personalizado para una imagen que se añade al post con la opción de añadir imagen. Quiero decir, que el formato se corresponda a esto:

Código PHP:

  <figure class="content-image content-image-left middle-image"><img src="img/blog/small-image.jpg" alt="small-image"/><figcaption>Pie de foto donde poder añadir una pequeña descripción.<a href="#"> Además de algún link</a><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Licencia Creative Commons Attribution Share-alike</a></small>
</figcaption></figure> 
   

Me gustaría que el src fuera la img-attachment en el post y que estos elementos tomaran las clases de flotación izqda/drcha o centrados según se le marcara en el dashboard.

Mi pregunta es, ¿Cómo se realizaría esto?, es más, ¿es posible hacer esto?

En el códex esta está siendo mi referencia --> http://bit.ly/urJ6aO

No quiero tocar archivos del core, necesito una solución "limpia" para este tema.

También en el sidebar quiero añadir el típico widget de Archivo, ¿Cómo puedo recoger el número de post por mes?

Espero que me podáis ayudar,

muchas gracias de todos modos!

[Nekko]

Hola! No entiendo del todo bien tu pregunta. Para insertar una entrada en un post y visualizarla desde page.php o single.php, no necesitamos mas que the_content() y CSS. En la plantilla de estilos deben ir colocadas las clases que facilitan el alineamiento... luego al insertar imágenes desde el editor tinyMCE automáticamente WordPress añade las correspondientes clases para cada alineación.

Si hablamos de ver las imágenes en otras secciones (el index.php, category.php, etc), utilizaría the_post_thumbnail para mayor control.

Decime si te parece que no entendí.

[MadDunDee]

Hola!

quiero decir cuando escribes un post y quiere añadir una imagen. Haces clic sobre el icono de insertar imagen y la añades, puede elegir si la alineación será a la izquierda, centrada...

Bien, esto incluye una imagen dentro de este post. Pero lo que yo quiero es que el marcado de esta imagen corresponda con el código que puse anteriormente. Es decir, que el src de este código sea la imagen que se añadió desde el backend.

Código PHP:

  <figure class="content-image content-image-left middle-image"><img src="IMAGEN-ADJUNTA-DESDE-EL-BACK-IMG-ATTACHED" alt="small-image"/><figcaption>Pie de foto donde poder añadir una pequeña descripción.<a href="#"> Además de algún link</a><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Licencia Creative Commons Attribution Share-alike</a></small> 
</figcaption></figure> 
   

Espero haberme explicado mejor ahora!

:)

[AlZuwaga]

Hola. Me parece que vas a tener que hacerle un filtro, o hook, a la función get_image_tag(). ¿Cómo? Ahhh... no, eso ya no lo sé. Pero me parece que acá tenés una aproximación: http://www.webtechwise.com/wordpress...ages-to-posts/

[MadDunDee]

Gracias, AlZuwaga!

Por ahora es la mejor aproximación a lo que estoy buscando. Esta tarde me pondré manos a la obra! Espero sacar algo en claro, si consigo solucionarlo comparto por aquí las conclusiones, ok?

Gracias! :)

[MadDunDee]

Hola de nuevo, estoy planteando este tema a partir de esta aproximación. Pero no soy capaz de hacerla funcionar correctamente:

Código PHP:

  function get_img_attached(){
global $post;
$args = array(
    'numberposts' => null,
    'post_parent' => $post->ID,
    'post_type' => 'attachment',
    'nopaging' => false,
    'post_mime_type' => 'image',
    'order' => 'ASC',
    'orderby' => 'menu_order ID',
    'post_status' => 'any'
);
 
            $imageID = $attachment->ID;
            $imageTitle = $attachment->post_title;
            $imageCaption = $attachment->post_excerpt;
            $imageDescription = $attachment->post_content;
            $imageAlt = get_post_meta($imageID, '_wp_attachment_image_alt', true);
            $imageArray = wp_get_attachment_image_src($attachment_value, $size, false);
            $imageURI = $imageArray[0]; 
            $imageWidth = $imageArray[1];
            $imageHeight = $imageArray[2];
 
            // Construir el marcado
            $imgAtt = '<figure class="content-image><a href="' . get_permalink() . '" title="' . the_title("", "", false) . '"><img src="' . $imageURI . '" width="' . $imageWidth . '" height="' . $imageHeight . '" alt="' . $imageAlt . '" title="' . $imageTitle . '" /></a><figcaption>.'$imageCaption'.<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Licencia Creative Commons Attribution Share-alike</a></small>';
            // escribir la cadena
            echo $imgAtt;
}
 
unset($args);} 
   

Luego a continuación, en el loop, lanzo la función.

Código PHP:

  <?php get_img_attached(); ?>   

El caso es que no consigo hacerlo funcionar de ningún modo, a alguien se le ocurre cómo hacerlo?

Muchas gracias!

[Nekko]

Interesante, la verdad es que nunca había mirado dentro de esta función y sus aplicaciones.

Fijate probando este código, en un theme mio funcionó.

Código PHP:

function get_img_attached(){
global $post;
$args = array(
    'post_type' => 'attachment',
    'numberposts' => null,
    'post_status' => null,
    'post_parent' => $post->ID,
    'post_mime_type' => 'image'
);
$attachments = get_posts($args);
if ($attachments) {
    foreach ($attachments as $attachment) {
            $imageID = $attachment->ID;
            $imageTitle = $attachment->post_title;
            $imageCaption = $attachment->post_excerpt;
            $imageDescription = $attachment->post_content;
            $imageAlt = get_post_meta($imageID, '_wp_attachment_image_alt', true);
            $imageArray = wp_get_attachment_image_src($imageID); 
            $imageURI = $imageArray[0]; 
            $imageWidth = $imageArray[1];
            $imageHeight = $imageArray[2];
            
            // Construir el marcado
            $imgAtt = '<figure class="content-image><a href="' . get_permalink() . '" title="' . the_title("", "", false) . '">
            <img src="' . $imageURI . ' " width="' . $imageWidth . '    " height="' . $imageHeight . '  " alt="' . $imageAlt . '" title="   ' . $imageTitle . ' " /></a><figcaption>.'. $imageCaption.' .<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Licencia Creative Commons Attribution Share-alike</a></small>';          
            // escribir la cadena
            echo $imgAtt;
            
}  
unset($args);
}
}
 

Saludos!

[AlZuwaga]

Hola de nuevo. Creo que me perdí :/

MadDunDee, yo te entendí que querés modificar el html generado para las imágenes dentro de un post (me refiero a las "embebidas" en el contenido del post). Es así?

[MadDunDee]

Hola AlZuwaga,

sí, esa es la intención. Modificar el tipo de attachment del post. Estos adjuntos pueden ser del tipo image, video...media.

Así que estudiando tu propuesta y siguiendo con la investigación llegue a este método de "almacenar propiedades" que me pareció más fácil, no sé si más correcto.

El caso es que simplemente con 'post_type' => 'attachment' e indicando que se trata de 'post_mime_type' => 'image' podemos almacenar algunas de sus propiedades más importantes y construir un marcado a nuestra medida.

Aún tengo que probar el código de Nekko, pero así a simple vista tiene mucho más sentido que el mío, ya que recogería todas las imagenes adjuntas al post en caso de haber más de una.

El método de los filtros lo reservo para otras aplicaciones, porque tiene mucho potencial también. En cualquier caso si se te ocurre cualquier otra cosa no dudes en compartirla. Yo estoy empezando con esto y deseando de descubrir cosas nuevas!

Muchas gracias a los dos!

[MadDunDee]

Bien, al parecer con este método no puedo lograr (o no sé) lo que necesito. Al crear una función de este tipo lo que se hace es sacar todas las imagenes "attachadas" en los post y el meterla dentro del loop devuelve siempre todas las imagenes en cada post, que no es lo que busco.

Lo demás funciona a la perfección, se puede construir cualquier tipo de marcado con este método.

Voy a tratar de utilizar los hooks y filtros como comentaba AlZuwaga, aunque esto parece un poco más complicado. Así que si alguien puede proponer algo se agradecería mucho!

Gracias!

[AlZuwaga]

Código:

function my_image_tag($html, $id , $alt, $title){
	$html = '<figure class="content-image content-image-left middle-image">' . $html;
	$html .= '<figcaption>Pie de foto donde poder añadir una pequeña descripción.<a href="#"> Además de algún link</a><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Licencia Creative Commons Attribution Share-alike</a></small></figcaption></figure>';
	
	return $html;
}
add_filter('get_image_tag','my_image_tag',10,4);

Colocando ese código en functions.php se aproxima un poco, según comprendo, a lo que buscás. Pero cuidado, que el código html se genera al momento de insertar la imagen en el post. Por lo que no actúa sobre posts que ya contengan imágenes sino sobre posts nuevos (o existentes) a los que se le inserte una imagen posteriormente a la implementación de ese código.

[MadDunDee]

@ALZUWAGA,

PERFECTO! al principio cuando me pasaste el primer link leí acerca de los hook y me pareció entender que hacía falta crear un plugin para cada una de las acciones que queríamos realizar. Visto así es la solución perfecta, además llevo un rato investigando y los filtros tienen una cantidad de aplicaciones bestial! Gran recurso, muchas gracias!

Solo ya por terminar de dejarlo cerrado al 100%. Si quisiéramos hacer esto mismo pero que esto se aplicara incluso a los post que ya han sido creados, ¿cuál sería el procedimiento para conseguirlo?

En cualquier caso te agradezco mucho tu ayuda!

:)

[AlZuwaga]

Hola de nuevo. Me alegro te haya servido.
Y si, con los filtros se pueden hacer muchas cosas interesantes. Aunque todavía no los logro entender del todo -y me cuesta bastante-, me pongo a jugar y algunas cosas salen ;)

Con respecto a la creación de plugins, la realidad es que conviene desarrollarlos cuando su función es modificar la funcionalidad de wordpress (aunque la redundancia no valga). Por qué? Porque luego cambiás el theme y perdés la funcionalidad. De la otra manera, no importa qué theme uses, la funcionalidad es del plugin.

Sobre lo último que comentás, a mi me parece que no es posible. Como te dije, la función get_image_tag() se ejecuta cuando hacés click sobre el botón de "insertar imagen en entrada". Y su acción es la de generar el html correspondiente a la imagen. Código que se almacena como texto en la base de datos, dentro del contenido de la entrada (campo wp_posts.post_content). Pero no me creas mucho, yo que vos seguiría investigando ;)


edito: La otra que se me ocurre es dejar todo como estaba, tomar el contenido de get_the_content() a una variable y a ésta hacerle las modificaciones correspondientes a todas las imágenes que tenga. Y vuelvo a empezar:

¿Cómo? Ahhh... no, eso ya no lo sé.

(pero supongo que reemplazo de cadenas y expresiones regulares ayudarían)