[SOLUCIONADO] Imagen en articulo de wordpress

[crafter_v]

Hola, he creado una plantilla para Wordpress. Dicha plantilla tiene una pagina principal donde se muestran los diferentes articulos y cuando haces click en alguno de ellos se accede al articulo completo.

La estructura del articulo una vez abierto es esta:

Código:

    <section id="articles_list">
    
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    	<article class="proyecto">
        	
            <div class="nombreycategoria">
            <hgroup><h2><span><a href="<?php the_permalink();?>"><?php the_title();?></a></span></h2></hgroup>
            <div class="cat_name"><?php the_category();?></div></span>
            </div>
            
            <div class="content"><?php the_content();?></p>
            
            <div class="apartado"><a href="<?php the_permalink();?>">
            	<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'list_articles_thumbs' ); } ?>
            </a></div>
            
        </article>
   
    <?php endwhile; else: ?>  
    <?php endif; ?>
		</div>
    </section>

El CSS asi:

Código:

#main #articles_list {
	clear: both;
	width:100%;
}

#main #articles_list article {
	width:30%;
	margin:25px 5% 25px 0px;
	overflow:hidden;
	float:left;
}

#main #articles_list .proyecto  {
	margin-top:15px;
	width:100%;
	margin-bottom:50px;
	margin-right:5%;
	overflow:hidden;
	float:left;
}

#main #articles_list article .apartado{
	width:100%;
}

#main #articles_list article .apartado img{
	width:100%;
	height:100%;
}

#main #articles_list article h2 {
	margin: 6px 0px 0px 0px;
}

#main #articles_list article h2 span {
	margin: 6px 0px 0px 0px;
	font-size:2rem;
	line-height:100%;
}



#main #articles_list article .content{
	width:65%;
	margin:12px 0px 40px 5%;
	float:right;
	line-height:150%;
}

.nombreycategoria{
	
	margin:0px 0px 0px 0px;
	width:30%;
	float:left;	
}

Lo que quiero hacer es que al acceder al articulo, se muestre el titulo y la categoria a la izquierda, el cuerpo del articulo a la derecha (a la misma altura) y las imágenes que lleve el articulo se muestren debajo abarcando la anchura de ambas partes.

El problema es que solo se muestra la imagen abarcando la anchura del cuerpo de texto, con lo cual se corta y no se muestra con el ancho completo.

[ArturoGallegos]

tienes un error de codigo, <div class="content"> nunca lo cierras por eso no te funciona.

[crafter_v]

Cierto! No me habia dado cuento, efectivamente ahora funciona bien, gracias, pero tengo otra duda.

La imagen que muestra usando ese código es la misma de la miniatura, aumentandola.

Si yo quisiera utilizar otra imágen, que abarque todo el ancho, agregandola desde el panel de control de entradas de wordpress. ¿Como seria?

[ArturoGallegos]

Yo lo haría con campos personalizados, guardando la URL de la imagen o la ID para posteriormente utilizarlos en el frontend.

[crafter_v]

Lo he puesto así, y funciona. ¿Que opinas?

Código:

    	<article class="proyecto">
        	
        	<div class="nombreycategoria">
            <hgroup><h2><span><a href="<?php the_permalink();?>"><?php the_title();?></a></span></h2></hgroup>
            <div class="cat_name"><?php the_category();?></div></span>
            </div>
            
            <div class="post-content">
            <div class="entry-content"><?php the_content();?></div>
            

            
            </div>
        </article>

Código PHP:

  <?php 
register_nav_menus( array( 
'menu' => 'Menu superior', 
'menu_categorias' => 'Menu categorias' 
)); 
 
 
 
add_theme_support( 'post-thumbnails'); 
add_image_size( 'slider_thumbs', 960, 500, true ); 
add_image_size( 'list_articles_thumbs', 288, 288, true ); 
add_image_size( 'list_articles_images', 960, 500, true ); 
 
 
?>   

[webosiris]

Iniciado por ArturoGallegos

Yo lo haría con campos personalizados, guardando la URL de la imagen o la ID para posteriormente utilizarlos en el frontend.

creo que lo mejor es usar tamaños personalizados, tal como los puso crafter en su último mensaje, después es tan fácil como llamarlos de esta forma:

Código PHP:

<?php if(has_post_thumbnail()){ ?>
    <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('portada'); ?>
    </a>
<?php } ?>
 

[ArturoGallegos]

<?php the_category();?></div></span>

estas cerrando un span que nunca abriste y aun así este es de linea, por lo que no puede contener un div que es de bloque...

hgroup ya fue removido, ya no existe en html5 y aun así, solo tienes un titulo por lo que pierde sentido utilizarlo.

@webosiris el problema de the_post_thumbnail() es que solo se puede tener una imagen por post, cuando necesitas usar mas de una es cuando viene el problema, o al menos a mi me ha dado la impresión de que busca tener mas de una imagen.

por eso mencione que yo usaría campos personalizados para guardar la ID de la imagen y posteriormente en el frontend se puede usar

Código PHP:

wp_get_attachment_image($id_img_customfield, 'portada'):
 

Aunque quien sabe y entendí mal, ahora que lo vuelvo a leer ya no estoy seguro de si busca solo cambiar el tamaño de la imagen o usar múltiples imagenes.

[crafter_v]

Si si, justamente eso. Usar multiples imágenes.

[crafter_v]

No logro acerlo con tu sistema Arturo. Creo que tengo algo mal.

Tengo esto:

Código:

    	<article class="proyecto">
        	
        	<div class="nombreycategoria">
            <h2><span><a href="<?php the_permalink();?>"><?php the_title();?></a></span></h2>
            <div class="cat_name"><?php the_category();?></div>
            </div>

            <div class="entry-content"><?php the_content();?>
            
            wp_get_attachment_image($id_img_customfield, 'portada'):

			</div>

        </article>

Código PHP:

  <?php 
register_nav_menus( array( 
'menu' => 'Menu superior', 
'menu_categorias' => 'Menu categorias' 
)); 
 
 
add_theme_support( 'portada'); 
add_theme_support( 'post-thumbnails'); 
add_image_size( 'slider_thumbs', 960, 500, true ); 
add_image_size( 'list_articles_thumbs', 288, 288, true ); 
add_image_size( 'list_articles_images', true ); 
 
 
?>   

[ArturoGallegos]

1.- el código que puse es ilustrativo no funciona en lo mas mínimo.

2.- add_theme_support se usa para permitir imagen destacada en los contenidos, no se debe usar con otra finalidad... add_theme_support('portada') no hace nada.

3.- add_image_size se usa para declarar tamaños aquí es donde deberías declarar add_image_size('portada',$ancho, $alto,$crop);

4.- el especificar un tamaño no hace que se puedan usar multiples imagenes (diferentes), solo te permite mostrar la misma imagen destacada en distintos tamaños.

5.- si buscas usar multiples imagenes (diferentes) busca en san google "media library for custom field" o "media manager into custom field" o cualquier cosa similar, ademas que deberás conocer como agregar metabox y custom fields.

6.- aquí deberás ser mas autodidacta y buscar en google o libros, no solemos dar código listo para usarse con un copy-paste como has hecho.

[crafter_v]

Vale, muchas gracias.

De todas formas resumo el problema, a ver si se entiende mejor. Por si hubiera otra manera de hacerlo.

Tengo un articulo abierto, en dicho articulo se muestra el titulo, la categoria y el cuerpo de texto con una o varias imágenes diferentes.

El titulo va a la izquierda y la categoria debajo de el, ocupando el bloque un 30% del contenedor.

El cuerpo de texto a la derecha, ocupando el 70% del contenedor.
La imágen debajo del texto, ocupando el 100% del contenedor.

El problema es esto último, no logro hacer que el texto tenga un margen derecho del 35% sin que afecte a la imágen, le pongo una pseudoclase a la imagen pero nada, ya que wordpress lo coge como un bloque de contenido.

Código:

    	<article class="proyecto">
        	
        	<div class="nombreycategoria">
            <h2><span><a href="<?php the_permalink();?>"><?php the_title();?></a></span></h2>
            <div class="cat_name"><?php the_category();?></div>
            </div>

            <div class="entry-content"><?php the_content();?></div>

        </article>

Creo que algo aqui en el final del código es lo que tengo que cambiar, pero nose exactamente como hacerlo.

[crafter_v]

Lo he estado investigando con el tema de los campos personalizados y al final ha salido con este código. Si podeis mirar a ver si os parece que está correcto y limpio... seria de mucha ayuda! Gracias.

Código:

<?php
if (get_post_meta($post->ID, 'imagenarticulo', true)){
$imagenarticulo = get_post_meta($post->ID, 'imagenarticulo', true); 
echo '<img src="http://midominio.com/wp-content/uploads/'.$imagenarticulo.'" frameborder="0" allowfullscreen>';
}
?>

[crafter_v]

El problema es que con este sistema solo me permite una imagen...

[ArturoGallegos]

El problema es que no sabes de que van las cosas.... vamos por pasos haber si das con la solución, si no va tocar contratar a alguien.

1.- toda la documentación de wordpress la encuentras aquí, en la parte superior tiene un buscador para que te facilite encontrar las cosas.
http://codex.wordpress.org/
En caso de no saber ingles google translate es tu aliado úsalo sin miedo.

2.- lo primero que necesitas es agregar campos personalizados en el backend para ello usa metabox, investigalo en la documentación y/o busca ejemplos en google.

3.- ahora necesitas agregarle campos al metabox, seguramente ya sabrás que son los campos de texto de un formulario html, agrega uno o los que necesites y asignarles nombre.
con esto tendrás un numero extra de campos limitado pero ya sera algo, en un futuro puedes darte a la tarea de investigar como usar arrays para permitir que tengan un numero ilimitado de campos.

4.- ya que tienes campos necesitas poder guardarlos al momento que se crea o actualiza una entrada, para ello usa la función save_post

5.- ya que tienes los campos y puedes guardarlos toca agregar la opción de que te muestre opciones para subir imágenes igual que la imagen destacada, para ello busca/investiga "media library for custom field" o "media manager into custom field" o cualquier cosa similar.

6.- ya que tienes campos personalizados con la opción de insertar imagen toca llamarlos desde el backend para ello necesitaras la funcion get_post_custom_values

Si en el custom field has guardado la url de la imagen solo deberás imprimir el valor dentro del src de la imagen, si has guardado la ID de la imagen usa la función wp_get_attachment_image para imprimir la imagen.



-------------------------------------------

Listo hermano, ya te dije que necesitas, te toca hacer lo divertido... ponerte a estudiar e investigar por largas horas.
Si quieres mas ayuda deberás mostrarnos código referente a la parte en que te estas trabando.... nada de colocar un código X que ya habías puesto antes, demostrando que no has buscado nada.


Nota: haz las cosas en orden y no te quieras saltar pasos o no lograras nada.



Suerte!

[crafter_v]

Si la cosa es que ya he visto que funciona, pero veo que hace falta crear un custom field por cada imagen que quiero mostrar.

[ArturoGallegos]

ok, si ya te funciona eso... ahora utiliza javascript para crear los campos al aire.... es decir, pones un boton y cada que se le de click agregas un nuevo campo de texto.

Estos tienes que manejarlos como un array <input name="img[]" /> , si estas guardando la ID de la imagen en el custom field.... yo te recomendaria serializar el array antes de guardar y si estas guardando la url prueba buscar en google "wordpress custom field array".

Yo suelo usar mucho eso en mis proyectos y prefiero guardar el ID y aplicar serlialize() para guardar todo en un campo y cuando los necesito solo aplico unserialize()