Como Colocar titulo del post al lado de la miniatura ?

Inicio Foros WordPress Themes y Diseño Como Colocar titulo del post al lado de la miniatura ?

Etiquetado: 

Este debate contiene 22 respuestas, tiene 5 mensajes y lo actualizó  imported_fliberty hace 6 años, 11 meses.

  • Autor
    Publicaciones
  • #23426

    luchosar
    Participante

    <p>Hola. Desde hace rato vengo investigando esto y no doy.<br />
    Diseño mis plantillas con artisteer, pero siempre se coloca el titulo sobre la foto, la idea es que aparezca al lado de la foto, asi:<br />
    DISTRIBUCION-FOTO.jpg<br />
    el codigo que uso para llamar las noticias es este:<br />

    <br />
    y el css es este:</p>
    <p>div.pochos {<br />
    width: 600px;<br />
    text-align: justify;<br />
    clear: left;</p>
    <p>}</p>
    <p>div.pochos img {<br />
    width: 100px;<br />
    height: 80px;<br />
    padding: 3px;<br />
    margin: 5px 5px 10px 0px;<br />
    border:1px solid #CCCCCC;</p>
    <p>}</p>
    <p>.pochos h2 a {<br />
    font-size: 20px;<br />
    color: #214559;<br />
    text-decoration: none;<br />
    font-family: Oswald, Helvetica, Sans-Serif;</p>
    <p>}</p>
    <p>gracias
    </p>

  • #58030

    imported_fliberty
    Participante

    Tienes qe colocar el thumbnail o imagen antes del titulo, dentro de un contenedor al que le das float left. Eso lo hago en http://www.cyberdocentes.com

    Ejemplo:

    | container de imagen | container de titulo |
    | | the_excerpt |
    | div con clear para limpiar |

    Espero que salga bien el ejemplo.

  • #58031

    luchosar
    Participante

    Sabia que tu serias el primero en responder mi amigazo fliberty…por cierto, me encanto tu web, muy creativa.
    Bien…logro entender tu solucion, pero me ayudarias mas si me das el codigo con base en el que expongo 🙂

  • #58060

    imported_fliberty
    Participante

    Haber como lo haríamos:
    [quote]
    <div class=”post”>//Abrimos un container para todo
    <div class=”image_post”>//Container para la imagen
    </div>
    <div class=”content”>//Abrimos un container para el contenido
    <h2 class=”title”><?php the_title(); ?></div>//El título
    <div class=”excerpt”>//opcional
    <?php the_excerpt(); ?>
    </div>//Cerramos excerpt
    </div>//Cerramos content
    <div class=”clear”></div>
    </div>//Cerramos post

    CSS:
    .post{width: 100px;} //Ancho de prueba
    .image_post{float: left; width: 20px;}
    .content{float: left; width: 70px; margin-left: 10px;} //20+70+10 = 100px
    h2.title a{font:20px “century gothic”; color: #0000ff;}//Formatos que quieras
    .excerpt{text-align: justify;}//formatos que quieras
    .clear{clear: both;} //limpieza
    [/quote]

    No se si funcione a la perfección, lo acabo de escribir en respuesta. Pero básicamente esa es la idea, dos contenedores secundarios dentro de un contenedor principal para todo el post. En el primer contenedor secundario va la imagen y en el segundo todo lo demás: título, extracto, metas, etc.

    Espero haber sido de ayuda.

  • #58061

    imported_fliberty
    Participante

    Se me olvidaba, estaba checando los dibus que habías puestos, y me doy cuenta de que el esquema qe te he propuesto es diferente.
    Para ese caso ya no deberías crear dos contenedores secundarios, si no que dentro del contenedor para el “post”, coloques antes la llamada a la imagen y le apliques un float left, en el caso del código que estás mostrando me imagino que la imagen la carga el the_content, para lo que quieres hacer tendrías que cargarla manualmente con una función para extraer la imagen del post y mostrarla a través de una función, y utilizar the_excerpt en lugar de the_content, para que no muestre la imagen del contenido.

  • #58088

    luchosar
    Participante

    Ufff Fliberty pero lo de “cargar la imagen manualemnete” no me gusta mucho….tu sabes, ahora las cosas tienen que ser “ya” de una..y muchos de mis clientes no se le mediran a este sistema, debe haber algo mas sencillo que llame la imagen y la coloque al lado de titulo…vamos amigo, tu eres un berraco en esto dame una mano!:)

  • #58089

    imported_fliberty
    Participante

    Por eso mismo te digo amigo, en el listado del post ya no mostrarías el contenido con the_content, si no con the_excerpt para que no muestre las imágenes.
    Ahora para mostrar las imágenes yo utilizo dos formas, una con una función que extrae las imágenes y/o utilizar campos personalizados.

    La función para extraer la primera imagen del post:

    Y su utilización:

    Esto carga la URL de la primera imagen que se ha insertado en el post; con esto ya no te tienes por preocupar por estar insertando datos en meta boxes y/o custom fields.

    Espero haber sido de ayuda.

  • #58140

    luchosar
    Participante

    Nada amigo al colocar el codigo en el funtion.php del tema sale este mensaje en la web: Parse error: syntax error, unexpected ‘=’, expecting ‘)’ in /home/luchosar/public_html/wp/wp-content/themes/OFERTAS3/functions.php on line 1154

    Pero bueno…se intento gracias compadre.

  • #58148

    imported_fliberty
    Participante

    Supongo que debe haber un espacio en blanco o algo que no has copiado bien, ya que esa función la utilizo en muchos de los themes que realizo.

  • #58160

    luchosar
    Participante

    Ummm, volvi hacer el ejercicio y lo mismo….una cosa, el codigo lo pego al final del funtion.php, es decir, abro el archivo y al final pego tu codigo….es asi?

  • #58171

    imported_fliberty
    Participante

    Así es lucho, cualquier cosa estoy a tu disposición.

  • #58212

    almendron
    Participante

    Para luchosar: si has puesto el código después del “?>” que cierra el archivo functions.pho, te dará un error.

    Para fliberty: copia el código en http://tinypaste.com/ y así no habrá errores al copiar-pegar.

    Un saludo.

  • #58213

    imported_fliberty
    Participante

    Aquí está en tinypaste: http://tinypaste.com/479d7e27

    La utilización ya lo dejé más arriba…

  • #58271

    luchosar
    Participante

    Almendron, gracias por tu aporte.
    Fliberty, la cosa mejoro, sale el titulo, debajo de este la url de la imagen (no la inmagen) y sigue el texto o parrafo…que pena tanta joda.
    [img]http://www.luchosarmiento.com/wp/wp-content/uploads/2011/12/imagen777.jpg[/img]
    El codigo que la llama:

    algo estoy haciendo mal………

  • #58273

    imported_fliberty
    Participante

    Que tal Lucho, el código lo tienes que utilizar dentro de la etiqueta img, o sea:
    [quote]
    (img src=”<?php echo img($tamanio =’portada_url’); ?>” alt=”<?php the_title(); ?>” /)
    [/quote]

    Reemplaza “(” por “<” y “)” por “>” en la etiqueta img.

    La función como te mencioné extrae la URL de la primera imagen de la entrada, por lógica si extrae la URL tendríamos que cargarla dentro de la etiqueta img.

  • #58277

    luchosar
    Participante

    Uala !!!!!!!!!!!!!!! Gloria a Dios…perfecto salio de una…Uffffff, me dio duro pero gracias a ti Fliberty lo consegui, muy amable por tu paciencia, gracias, muchas gracias y Feliz Navidad.

  • #58278

    luchosar
    Participante

    En resumen, por si acaso alguien quiere aplicarlo:

    Este es el codigo en el look………

    Este el CCS……….

    y este otro en funtion.php…al final

  • #58281

    luchosar
    Participante

    Fliberty una ultima pregunta, veo que automaticamente recorta el texto eso es una maravilla, pero donde altero el numero de caracteres para que aparezcan menos ?

  • #58309

    imported_fliberty
    Participante

    Busca alguna función para limitar el excerpt.

    Recordé que tenía una:
    [quote]
    /*Funcion para limitar excerpt*/
    function excerpt($limit) {
    $excerpt = explode(‘ ‘, get_the_excerpt(), $limit);
    if (count($excerpt)>=$limit) {
    array_pop($excerpt);
    $excerpt = implode(” “,$excerpt).’…’;//Cambia ‘…’ por lo que quieres que se muestre al final del texto.
    } else {
    $excerpt = implode(” “,$excerpt);
    }
    $excerpt = preg_replace(‘[[^]]*]‘,”,$excerpt);
    return $excerpt;
    }[/quote]

    Eso va en el functions.php

    Y en lugar de [quote]<?php the_excerpt(); ?>[/quote]

    Tienes que utilizar:
    [quote]<?php echo excerpt(15); ?>[/quote]

    Donde “15” es la cantidad de caracteres/palabras (no recuerdo a que aplica) a mostrar.

  • #58867

    tvgerardo
    Participante

    Hola, espero me puedan ayudar. Yo quiere que la portada de mi tema tengo lo que luchosar quiere cambiar. Es decir, que el títulos de las entradas en la portada que solo y debajo, alineado con el extracto, la miniatura. El tema que estoy modificando es Vectors, pero hasta ahora no he tenido éxito. Si me pudieran ayudar, [url=http://vectors.themedemo.net/]esta es la pagina del tema[/url].

    Hola. Desde hace rato vengo investigando esto y no doy.
    Diseño mis plantillas con artisteer, pero siempre se coloca el titulo sobre la foto, la idea es que aparezca al lado de la foto, asi:
    [img]http://www.luchosarmiento.com/images/DISTRIBUCION-FOTO.jpg[/img]
    el codigo que uso para llamar las noticias es este:


    y el css es este:
    div.pochos {
    width: 600px;
    text-align: justify;
    clear: left;
    }
    div.pochos img {
    width: 100px;
    height: 80px;
    padding: 3px;
    margin: 5px 5px 10px 0px;
    border:1px solid #CCCCCC;
    }
    .pochos h2 a {
    font-size: 20px;
    color: #214559;
    text-decoration: none;
    font-family: Oswald, Helvetica, Sans-Serif;
    }
    gracias

  • #58868

    tvgerardo
    Participante

    Hola, espero me puedan ayudar. Yo quiero tener lo que luchosar quiere cambiar. Tengo el tema Vectors y me quisiera alinear la miniatura con el extracto en la portada para que el título del post que sobre ambos. Esta es la[url=http://vectors.themedemo.net/] web del tema[/url].

  • #59162

    malder
    Participante

    Hola, el código esta genial pero le he encontrado una anécdota:
    Si tu haces un nuevo post y usas una imagen que ya tenías almacenada de articulos anteriores, no te aparece la imagen, no es capaz de encontrarla

  • #59163

    imported_fliberty
    Participante

    Porque no prueban a utilizar algún campo personalizado o metabox para la imagen en miniatura, de esta forma podrían ahorrarse espacio en disco utilizado imágenes externas. Al menos es lo que yo hago.

    Por ejemplo, utilizo un campo personalizado, y también shortcode para insertar imágenes dentro de los post, sin necesidad de estar cargando mi espacio en disco y por ende reducir el consumo de recursos.

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido