Ayuda: Cómo arreglar enlaces de edición agrupados

WP:MANOJO
WP:FIXBUNCH

Cuando hay una tira larga de imágenes o cuadros de información ubicados a la derecha junto con varias secciones de artículos , generalmente hace que los enlaces de edición de sección ("[ editar ]") para las secciones que comienzan después de la primera y antes de la última imagen o cuadro de información se agrupen a la izquierda de esta manera: [ editar ] [ editar ] [ editar ] (ver Ejemplo 1).

Esto causa varios problemas:

Los enlaces de edición a menudo se superponen parcialmente con el texto y, por lo tanto, lo oscurecen.
Es más difícil utilizar la edición de secciones cuando los enlaces de edición no están asociados con sus respectivas secciones.
- Para complicar aún más las cosas, la posición del enlace de edición varía según el navegador.
Se ve terrible.

Hay varias formas de evitar o solucionar este y otros problemas similares, como se explica a continuación. La mejor (la más eficaz en todos los casos) y la más sencilla de ellas se ha formalizado en la plantilla {{ Fix bunching }} .

Uso de la plantilla de agrupamiento Fix

El método más sencillo funciona tanto con imágenes como con cuadros de información. Deja el formato prácticamente intacto, salvo por la eliminación de los enlaces de edición problemáticos. Utilice la plantilla {{ Fix bunching }} como en el código siguiente:

{{ Arreglar agrupamiento | pedir }}{{ 1er cuadro de información, imagen, tabla, etc. }} {{ Arreglar agrupamiento | medio }}{{ 2do cuadro de información, imagen, tabla, etc. }}  ...continúe según sea necesario con {{ Fix bunching | mid }} antes del contenido:{{ Arreglar agrupamiento | medio }}{{ 3er cuadro de información, imagen, tabla, etc. }} {{ Arreglar agrupamiento | fin }}

Tenga en cuenta que la columna de objetos resultante tendrá el mismo ancho que su componente más ancho.

Consulte el Ejemplo 2 para ver el código de muestra y sus resultados.

Limpiando los flotadores

Esto se puede hacer si no hay problemas para agregar espacios adicionales antes de la siguiente sección (por ejemplo, porque el problema solo se muestra en tamaños de fuente poco comunes o si las imágenes están adjuntas lógicamente a las secciones).

Esto se puede lograr agregando un elemento con cualquiera de las propiedades CSSclear:both o clear:right antes de la siguiente sección . Una forma fácil de hacerlo es usar la plantilla {{ clear }} .

Mover las imágenes

Cuando el artículo es lo suficientemente largo, es posible distribuir las imágenes en lugar de tenerlas juntas. También es posible hacer que algunas de las imágenes floten hacia la izquierda en lugar de hacia la derecha. Esto suele ser suficiente para solucionar el problema y, por lo general, da como resultado un artículo más atractivo.

Usando una galería

Cuando tienes demasiadas imágenes, puede que tenga sentido mover algunas o la mayoría de ellas a una galería . Sin embargo, si bien esto evita el problema, tiene sus propios inconvenientes (por ejemplo, los títulos pueden ser pequeños hasta el punto de resultar ilegibles en algunos casos, y el tamaño de la imagen es fijo).

Eliminando algunas de las imágenes

Puede ser una buena idea preguntarse si todas estas imágenes son realmente necesarias. Se supone que las imágenes sirven para ilustrar el tema, no para convertir un artículo en una galería. Si las imágenes son demasiado densas, pero ninguna de ellas justifica su eliminación, puede significar que el artículo necesita ser ampliado. La solución ideal podría ser crear una página o categoría que las combine todas en Wikimedia Commons y utilizar una plantilla relevante ( {{ commons }} , {{ commonscat }} , {{ commons-inline }} o {{ commonscat-inline }} ) y vincularla en su lugar, de modo que se puedan encontrar más imágenes fácilmente si se amplía el artículo.

Usando un div flotante

Este método tiene la ventaja de no cambiar visiblemente nada en el artículo; la apariencia resultante es casi idéntica al original, con las únicas diferencias de que los enlaces de edición de la sección fluyen naturalmente como se espera, en lugar de terminar agrupados a la izquierda de la última imagen, un espaciado ligeramente diferente entre las imágenes y un tamaño de margen ligeramente diferente. También tiene la ventaja de que se puede hacer de forma mecánica (ya sea con un bot o manualmente). Sin embargo, solo se puede usar cuando las imágenes tienen un ancho idéntico (generalmente sucede cuando todas tienen |thumb|un tamaño fijo en px y todas son más anchas que altas; también puede suceder cuando no se usan miniaturas).

Para hacer esto, primero elimine cualquiera |right|de las imágenes y agrégueles un |none|(esto evita que floten). Luego, envuélvalos en <div style="float: right; clear: right">...</div>(esto hace que floten juntos y también los coloca debajo de cualquier otro flotante derecho ^{[ aclaración necesaria ]} (esto significa que si el artículo tiene una plantilla de Wikipedia o código XHTML personalizado que usa estilos con la opción "float:right" y esto aparece antes del "div" flotante derecho discutido fuera de estos paréntesis, entonces el "div" se posiciona correctamente debajo de la plantilla flotante derecha o el código personalizado discutido dentro de los paréntesis, en lugar de a la derecha de este) en lugar de a la izquierda de este; también es lo que normalmente se usa para las imágenes flotantes a la derecha).

Vea el Ejemplo 3 para ver un ejemplo.

Usando una wikitable para agrupar

Esto es lo que hace {{ Fix bunching }} de manera simplificada, sin necesidad de utilizar la sintaxis de wikitable. Para ver un ejemplo de cómo utilizar el código de wikitable, consulte el Ejemplo 4.

Usando una plantilla de apilamiento

La plantilla {{ stack }} es otra forma de agrupar imágenes en un único cuadro flotante. La sintaxis es la siguiente:

{{ pila |[[ imagen1.jpg ]][[ imagen2.jpg ]][[ imagen3.jpg ]][[ imagen4.jpg ]]}}

{{ pila | flotante = izquierda/derecha |[[ imagen1.jpg ]][[ imagen2.jpg ]][[ imagen3.jpg ]][[ imagen4.jpg ]]}}

Ejemplos

Con suerte, algunos ejemplos harán que estos asuntos técnicos complicados sean más fáciles de entender para los no nerds .

Ejemplo 1

Este ejemplo demostrará que las imágenes de la derecha y las secciones de la derecha generan problemas de representación entre sí. Esto se manifiesta en el borde superior de la imagen inferior, donde los tres enlaces de edición de la sección se alinean de esta manera: [ editar ] [ editar ] [ editar ]

[[ Archivo : Wikipedesketch.png | pulgar | derecha | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ] ] [[ Archivo : Wikipedesketch.png | pulgar | derecha | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]] [[ Archivo : Wikipedesketch.png | pulgar | derecha | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]]

Sección 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sección 2

Sección 3

Ejemplo 2

Este ejemplo utiliza la plantilla {{ Fix bunching }} para corregir el agrupamiento [ editar ] [ editar ] [ editar ] enlaces.

{{ Arreglar agrupamiento | inicio }} [[ Archivo : Wikipedesketch.png | pulgar | derecha | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]] {{ Arreglar agrupamiento | medio }} [[ Archivo : Wikipedesketch.png | pulgar | derecha | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]] {{ Arreglar agrupamiento | medio }} [[ Archivo : Wikipedesketch.png | pulgar | derecha | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]] {{ Arreglar agrupamiento | fin }}

Sección 1

Sección 2

Sección 3

Ejemplo 3

Demuestra que colocar el bloque de estilo div recomendado alrededor de las imágenes permitirá que los [ editar ] [ editar ] [ editar ] agrupados floten a los lugares adecuados en sus respectivos encabezados de sección.

< div style = "float:right; clear:right; margin-left:1.4em;" > [[ Archivo : Wikipedesketch.png | pulgar | ninguno | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ] ] [[ Archivo : Wikipedesketch.png | pulgar | ninguno | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ] ] [[ Archivo : Wikipedesketch.png | pulgar | ninguno | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]] </ div >

Sección 1

Sección 2

Sección 3

Ejemplo 4

El ejemplo utiliza un formato wikitable, donde el parámetro de ancho puede dejarse en el valor predeterminado automático o especificarse en la línea de estilo (no se muestra).

Consejo: Si el elemento HTML que se incluye es un cuadro de información local en formato de tabla (el código comenzará con {| en lugar de {{ ), entonces '{|' debe comenzar en la línea que sigue a la barra vertical de la tabla.

{| style = "float:right; clear:right; background-color:transparent; margin-left:1.4em;" | [[ Archivo : Wikipedesketch.png | pulgar | ninguno | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]] |- | [[ Archivo : Wikipedesketch.png | pulgar | ninguno | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]] |- | [[ Archivo : Wikipedesketch.png | pulgar | ninguno | ETAOIN SHRDLU CMFWYP VBGKQJ XZ ]] |}

Sección 1

Sección 2

Sección 3

Eliminación de enlaces de edición

Para eliminar todos los enlaces de edición de una página, coloque la "palabra mágica" __NOEDITSECTION__ en cualquier parte de la página. Tenga en cuenta que esto no debe hacerse en los artículos.

Véase también

Error 1629: Los enlaces de edición de secciones aparecen en el lugar incorrecto (abierto: 2005-03-04)
Error 5118: El texto se superpone a una imagen, cuando la imagen es el segundo elemento flotante a la derecha
Error 26449: Agregar { overflow: hidden; } a H1, H2, H3, H4, H5, H6; esto corrige el agrupamiento
Usuario:Drilnoth/lefteditlinks.js/doc – Gadget para mover enlaces de edición de sección junto a los encabezados de sección (eliminando el problema de agrupamiento de enlaces de edición en el lado del usuario).