Pregunta

Se le pidió que simplifique la pregunta. Aquí vamos:

Como saben, la parte de "contenido" de una publicación de WordPress aparece juntas. Lo que estoy tratando de recrear es cómo en varios sitios de noticias, tendrán el título (y el resto de las cosas "meta"), seguido de una foto o video, pero luego el texto del cuerpo está ligeramente sangrado desde el Augar (o poco después) para dejar espacio para una columna delgada e izquierda que podría mostrar historias relacionadas, anuncios, meta datos adicionales sobre la publicación en sí o incluso contener videos para la publicación en sí.

Ejemplos:
http://www.cnn.com/2011/us/05/24/nasa.new.spacecraft/index.html?hpt=t1
- Lo más destacado de la historia, temas relacionados. La imagen y el subtítulo ocupan un ancho completo, pero la columna resalta el texto del cuerpo de la columna.
http://www.chicagotribune.com/news/local/breaking/chibrknews-lagojevich-to-take-the-s-stand-20110524,0,6202649. historia
- Artículos relacionados, temas relacionados, anuncios. A diferencia del ejemplo de CNN, la columna en realidad comienza a la mitad del texto del cuerpo.

Mi dilema es que, dado que la foto o video que inicia cada publicación es parte del "contenido", no puedo sangrar el texto y poner en la columna a menos que lo hiciera manualmente para cada publicación.

He contemplado hacer un campo personalizado para la imagen o la entrada de video para esencialmente "separarlo" del texto del cuerpo, pero eso podría resultar difícil, ya que no sé cómo diferenciaría entre una URL de imagen y una URL de YouTube o una URL de YouTube o código de inserción.

¿Alguien tiene mejores ideas?

¿Fue útil?

Solución

Algunas ideas

  • usar códigos cortos para insertar marcado en línea con su contenido.
  • Use campos personalizados para insertar marcado en línea con su contenido. Si no desea lidiar con analizar la URL para averiguar si es una imagen, YouTube, etc., simplemente defina diferentes nombres de campo personalizados y manejalos individualmente si existen.
  • leer sobre "flotante" y elementos de posicionamiento con HTML y CSS. Es posible que pueda lograr el diseño que desee con solo cambios de marcado frontal.
Licenciado bajo: CC-BY-SA con atribución
scroll top