Un usuario preguntó 👇
¡Hola! Así que soy bastante nuevo en todo esto: webcomics, sitios web, todo el asunto. Quiero empezar a publicar mi webcomic en mi sitio de wordpress. Tengo el tema ComicPress instalado, y ahora también tengo instalado y activado el plugin Webcomic.
El problema es que parece que no consigo que mis cómics se muestren de la manera que quiero. Básicamente, quiero cargar una tira de tres paneles en forma de tres imágenes separadas, donde cada panel tiene su propia imagen. Me complació mucho obtener el plugin Webcomic, ya que parece ser el único plugin específico de webcomic que le permite cargar varias imágenes de cómics por publicación.
Sin embargo, de forma predeterminada, el widget de medios web muestra los paneles a tamaño completo, creando una nueva fila cada vez que se reduce el área de visualización para que las tres imágenes ya no encajen en la misma fila (con suerte Creo que lo tengo claro). Es decir, el diseño responde, lo cual es asombroso, pero no responde de la manera que me gustaría que fuera. Tal como está actualmente, cuando minimiza el área de visualización de su navegador, hay una ventana de tiempo en la que aparecerán dos paneles en la misma fila, alineados a la izquierda, y un tercer panel aparecerá debajo, también alineado a la izquierda.
Lo quiero para que los tres paneles aparezcan en una fila en pantallas grandes, como un escritorio, pero cambien hasta que se muestren verticalmente en un cierto punto de interrupción, digamos 600px. Ahora, sé que esto se puede hacer con CSS, pero no estoy seguro de poder hacer algo con el widget de Webcomic Media para que esto suceda.
Por lo que he leído, parece que el campo de elección de formato podría ser mi mejor opción. Pero no sé qué meterme en el campo …
“Formato de medios opcional, como {{unirse}} después de {tamaño}. El tamaño puede ser cualquier tamaño de imagen válido o una lista separada por comas de valores de ancho y alto de píxeles (en ese orden), y se puede especificar sin el resto de los argumentos de formato. «
¿Cuál es la sintaxis de «before {{join}} after {size}»? ¿Hay alguien con alguna experiencia con widgets que pueda orientarme en la dirección correcta? ¡Agradecería cualquier ayuda en este asunto! ¡Gracias!
(@mgsisk)
Hace 2 años, 9 meses
Hola @vidalliger, ¡gracias por usar Webcomic! Creo que sigo haciendo lo que quieres hacer y, para ser honesto, la SEC es probablemente la forma más fácil de hacerlo; Algo como esto debería funcionar:
/* mobile display with stacked images */
.widget_mgsisk_webcomic_collection_widget_webcomicmedia img {
height: auto;
max-width: 100%;
}
@media screen only and (min-width: 600px) {
.widget_mgsisk_webcomic_collection_widget_webcomicmedia img {
max-width: 33%;
}
}
(@vidalliger)
Hace 2 años, 9 meses
¡Gracias por responder y gracias por el increíble plugin!
Terminé agregando algo de CSS personalizado al tema y, como dijiste, ¡funcionó! De hecho, encontré un artículo increíble sobre la manipulación de CSS al decidir cuántos elementos hay en un contenedor, lo cual fue extremadamente útil para mí, ya que podía hacer tiras que tuvieran cuatro paneles en lugar de tres. Aquí hay un enlace al artículo, ya que creo que puede ser útil para otras personas que usan este plugin: https://alistapart.com/article/quantity-queries-for-css
Y aquí está el código con el que terminé:
@media (min-width: 601px) {.webcomic-media img: nth-last-child (3): first-child, img: nth-last-child (3): first-child ~ img {height: auto; ancho: 33.33%} img: n-último-hijo (4): primer-hijo, img: n-último-hijo (4): primer-hijo ~ img {altura: auto; ancho: 25%}} @media (ancho máximo: 600px) {.webcomic-media img {altura: auto; ancho: 100%}}
Parece que funciona, pero tendré que mirar en esta cosa de «una pantalla». No soy consciente de eso.
Además, aquí está el sitio, en caso de que alguien quiera ver cómo termina funcionando el código: http://funnyhowitgoes.com/
¡Gracias de nuevo por tu ayuda, Mike! Sé que volveré con más preguntas … Tengo problemas para personalizar los botones de navegación, pero probablemente debería crear un nuevo hilo para eso.
(@mgsisk)
Hace 2 años, 9 meses
El es screen only poco está relacionado con Tipos de medios CSS; es técnicamente opcional, pero útil como práctica general para separar los estilos de pantalla única de los estilos de medios impresos.
No dude en hacer más preguntas aquí o comenzar un nuevo hilo, lo que sea más fácil.
(@vidalliger)
Hace 2 años, 9 meses
¡Excelente! ¡Gracias! Tengo dificultades para personalizar los botones de navegación que aparecen debajo de mis cejas. Quiero reemplazarlos con algunos botones dibujados por mí mismo. Traté de usar el área de widgets … ¿Tengo razón al pensar que agregaría el widget «Primer enlace de Webcomic», el widget «Siguiente enlace de Webcomic», etc., al área de widgets de navegación de Webcomic, y agregaría mis medios a cada uno? ? Cuando intenté eso, no aparecía nada en mi sitio.
(@vidalliger)
Hace 2 años, 9 meses
Además, ¿parece que los botones de navegación no funcionan? Acabo de publicar mi segundo cómic y aparece en la página de inicio, pero cuando hago clic en el botón anterior, el cómic permanece igual (segundo). Incluso parece haber reemplazado el primer chiste en la URL del primer chiste. ¿Es este un problema común? Como referencia, estoy usando el tema ComicPress. ¡Gracias!
(@mgsisk)
Hace 2 años, 9 meses
Tienes razón; deberias ser capaz de «[whatever] Webcomic Link ”widgets al área de navegación de Webcomic para personalizar su navegación.
Sin embargo, este es un poco perplejo para mí; todo parece funcionar bien con una instalación limpia en mi caja de prueba. ¿Puede compartir un poco más sobre cómo configurar ComicPress y Webcomic (por ejemplo, configuración de ComicPress, configuración de integración y colección de Webcomic, otros plugins, etc.)?
(@vidalliger)
Hace 2 años, 9 meses
Lo siento, no lo recuerdo. No estoy seguro de lo que hice para solucionarlo, ¡pero parece estar funcionando ahora! Puede que tenga que jugar con un poco más de cosas para que se vea como quiero, pero los problemas parecen haberse resuelto por sí mismos ahora … De todos modos, ¡gracias por ser tan receptivo!
¿Solucionó tu problema??
0 / 0