> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.laposta.org/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.laposta.org/_mcp/server. # Hacer que las imágenes sean modificables con etiquetas de plantilla > Haz que las imágenes de una plantilla HTML importada sean editables y configura si se pueden modificar el tamaño y el enlace. En una plantilla HTML propia, colocas las imágenes de la forma habitual. Si quieres hacer que una imagen sea modificable, añádele un atributo: suelta en la plantilla con `lp-edit`, o dentro de un campo de texto con el texto alrededor. > **Note** > > Estas etiquetas solo se aplican a una plantilla HTML importada, no al editor drag & drop. Cómo importar una plantilla de este tipo se explica en [Importar una plantilla propia en Laposta](/welke-opties-biedt-laposta-bij-een-zelfgemaakt-sjabloon). ## Una imagen suelta con `` Añade el atributo `lp-edit` a la etiqueta `img` para hacer que la imagen sea modificable. La etiqueta `img` siempre debe contener un atributo `width`. Si en el atributo `src` hay una URL a una imagen, esta aparecerá como imagen inicial. Si no tienes ninguna imagen a mano, deja el `src` vacío. En ese caso, Laposta mostrará una imagen predeterminada. Al editar, el redactor puede colocar un enlace detrás de la imagen. Si en la plantilla ya hay un enlace alrededor de la etiqueta `img`, Laposta lo utilizará como valor predeterminado. ### Opciones Estos atributos determinan qué puede hacer el redactor con la imagen en el editor. **`lp-edit`** Hace que una imagen sea modificable. --- **`lp-label`** Muestra el valor introducido en el editor encima del lugar donde se puede modificar la imagen. --- **`lp-resizable`** Indica que se permite modificar el tamaño de la imagen. --- **`lp-max-width`** Indica hasta qué ancho máximo se permite ampliar la imagen. --- **`lp-min-width`** Indica hasta qué ancho mínimo se permite reducir la imagen. --- **`lp-no-import`** Por defecto, Laposta importa todas las imágenes de una plantilla y las muestra desde Laposta. Con este atributo indicas que una imagen no debe importarse y que debe cargarse desde la URL original. Si este atributo está activo, no se puede modificar el tamaño de la imagen. --- **`lp-no-imageedit`** Por defecto, todas las imágenes modificables también se pueden ajustar con el [editor de imágenes](/afbeeldingen-bewerken) al rellenar la plantilla. Con este atributo desactivas esa opción para esta imagen. --- **`lp-disable-href`** Impide que el redactor pueda colocar un enlace detrás de la imagen. --- **`lp-decorative`** Una imagen decorativa está pensada únicamente para el diseño y no es relevante para el contenido del boletín, como por ejemplo una flecha delante de un enlace. Por motivos de accesibilidad, en este tipo de imágenes no está permitido rellenar un texto alternativo (alt). Con este atributo indicas que se trata de una imagen decorativa. La interfaz no pedirá entonces un texto alternativo. --- ### Ejemplos Lo mínimo para una imagen modificable, sin imagen inicial: ```html ``` Una imagen con un enlace predeterminado alrededor, que se puede escalar entre 100 y 300 píxeles de ancho: ```html ``` ## Una imagen dentro de `` Una imagen también puede estar dentro de un [campo de texto](/tags-om-tekst-te-wijzigen). En ese caso, el texto fluye a su alrededor. Al editar, el redactor puede colocar la imagen a la izquierda, a la derecha o a ancho completo del campo de texto, usando las flechas situadas a la izquierda y a la derecha del cuadro multiline. Por defecto se puede modificar el tamaño y aquí no es necesario el atributo `lp-edit`. ### Opciones Además de la ubicación y el espacio en blanco, con estos atributos configuras sobre todo lo que el redactor no puede modificar. Para `lp-label` y `lp-decorative` se aplican las mismas reglas que en una imagen suelta. **`lp-disable-resizable`** Impide que se pueda modificar el tamaño de la imagen. --- **`lp-disable-moving`** Impide que el redactor pueda mover la imagen a la izquierda, a la derecha o a ancho completo. --- **`align`** Determina la posición de la imagen: `left` para colocarla a la izquierda en el texto y `right` para colocarla a la derecha. --- **`hspace, vspace`** Indica cuánto espacio en blanco se añade alrededor de la imagen, para que el texto no la toque: `hspace` para el espacio horizontal y `vspace` para el vertical. Son atributos estándar de HTML. Al mostrar la imagen, Laposta los sustituye por una tabla alrededor de ella. Esa es la única forma de mostrar bien el espacio en blanco en todos los programas de correo electrónico. --- ### Ejemplo Aquí la imagen está a la derecha en el texto, con un espacio en blanco de 10 píxeles alrededor. El redactor puede ajustar el ancho entre 100 y 300 píxeles. ```html Lorem ipsum dolor sit amet, consectetur adipisicing 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. ``` ### Hacer que el multiline con imagen sea adaptable (responsive) Como la imagen se coloca dentro de una tabla para crear el espacio en blanco, hacen falta unas cuantas líneas adicionales de CSS para mostrar bien el multiline en pantallas más pequeñas. Incluye estas líneas dentro de una media query. Así, el texto se colocará debajo de la imagen, con la imagen al 100 % de ancho. ```css /* responsive image inside multiline */ .lp-image-wrapper { width:100% !important; } .lp-image-wrapper-h { display: none !important; } .lp-image-wrapper-img { display: block !important; width: 100% !important; overflow: auto !important; } .lp-multiline-image { width: 100% !important; height: auto !important; margin: 0 !important; } ``` ## Artículos relacionados #### [Hacer que el texto sea modificable con etiquetas de plantilla](/tags-om-tekst-te-wijzigen) Haz que líneas de texto sueltas y bloques de texto más largos sean editables en una plantilla HTML propia. #### [Insertar una captura de pantalla de vídeo con una etiqueta de plantilla](/tags-om-video-screenshot-te-wijzigen) Inserta automáticamente en tu propia plantilla HTML una captura de pantalla clicable… #### [Editar y reducir una imagen](/afbeeldingen-bewerken) Modifica con el editor de imágenes el brillo, el contraste, las dimensiones y el tamaño… #### [Colocar y editar una imagen en una plantilla Joe](/hoe-bewerk-ik-een-afbeelding-in-mijn-sjabloon-op-maat-type-joe) Así puedes colocar, recortar, escalar o mover imágenes fijas y escalables en tu…