Adding an image to an article/es: Difference between revisions

Latest revision as of 05:00, 6 October 2023

Introduction

How best to add images to an article depends on which version of Joomla and which editor are in use. This article has illustrations for Joomla 4, with notes on differences in Joomla 3, and TinyMCE the Joomla default editor. To get started, open an article for editing:

Select Content → Articles in the Administrator menu.
Select the title of the article you wish to edit

After inserting the article text, place the cursor at the location where the image should appear.

Adding a local image

If the image is located in the images folder of your Joomla installation you should insert the image using the CMS Content → Media button In the TinyMCE edit toolbar (In Joomla 3: Select the Image button):

In the popup window, navigate to the image you want to use and click to select it. On selection a form will appear prompting for additional data. In Joomla 4 the form is to the left. In joomla 3 the form is at the bottom (scroll down):

Establece las propiedades de imagen según sea necesario. En la mayoría de casos se debería rellenar el campo "Descripción de la imagen (texto alternativo)". Los otros campos se usan para personalizar el aspecto de la imagen con tu propio CSS.

- Descripción de la imagen: Esto se convierte en el atributo alt de la imagen, una característica importante para la accesibilidad y el cumplimiento de los estándares web. En Joomla 3 se etiquetó como "Título de la imagen"

"Clase de la imagen": Si una imagen se usa sin subtítulo algunas clases personalizadas podrían aplicarse. Por ejemplo, en Joomla 4, "float-end ms-2 mb-1" alineará la imagen a la derecha y flotará el texto alrededor con los márgenes a la izquierda y abajo para evitar que el texto toque la imagen. En Joomla 3 el estilo equivalente es "pull-right"
Figure Class: If a caption is set then an alignment class, if any, should be applied to the Figure. It is a html tag that encloses the img tag. Note that in Cassiopeia margins are applied by the template style sheet.

- Pie de imagen: Habilita el texto que muestra el Título de la Imagen debajo de la imagen.

In Joomla 3

- Flotación de la imagen: Establece la alineación de la imagen. De forma predeterminada, el atributo align' es Sin asignar.

- Clase Caption: Aplica la clase entrada al elemento figcaption.

Haz clic en el botón "Insertar multimedia" para insertar la imagen. La pantalla "Multimedia" se cerrará y la imagen se mostrará en el editor. O seleccionar el botón "Cerrar" para abandonar la pantalla "Insertar multimedia"

Tip: select the Toggle Editor button to see the applied Image and Caption styles.

Using Drag and Drop for Local images

In both Joomla 4 and Joomla 3 you can drag an image from the desktop or a file browser directly into the article text and the image will be uploaded to the media folder and placed in the article. The only snag is that all such uploaded images will be placed in the same media folder. The location of the Images Directory used for upload and whether this feature is enabled (On by default) are set in the TinyMCE configuration Options.

Adding a remote image

If the image you wish to use is not in the images folder of your Joomla installation a slightly different procedure is needed.

Select Insert → Image from the TinyMCE toolbar to open a dialog box. In Joomla 3, use the Image icon and the same dialog as used for local images.
Insert the image url in the Source field.
Fill out the other fields as required.
Advanced provides some formatting options applied as in-line styles. Experiment with 1rem, 2, groove. (This feature is incomplete)

Using Drag and Drop for Remote images

You can drag and drop an image from a remote web site directly into your article text. But be aware that this may also copy the image container html with class statements not valid for your site.

Subir imágenes a través de la pantalla Inserción de Imagen

Puedes subir nuevas imágenes usando la pantalla "Multimedia" (la pantalla "Imagen en Joomla 3)

First open the Media browser and navigate to the folder where you wish to store new images for the current article.

Has clic en el botón Examinar para abrir un explorador de archivos.

Selecciona los archivos de imagen que deseas cargar. Has clic en Abrir en el explorador de archivos para confirmar la selección. Nota: El estilo y el diseño del explorador de archivos depende del navegador y sistema operativo que estés utilizando.

El(los) archivo(s) seleccionado(s) aparecen en la parte inferior de la pantalla de Inserción de Imagen. Has clic en Iniciar subida para empezar a subir archivos.

- Cuando la carga se haya completado, un aviso sobre fondo verde aparecerá en la parte superior de la pantalla.

Ahora puedes seleccionar e insertar la imagen subida como se indicó anteriormente.

@@ Line 1: / Line 1: @@
 <noinclude><languages /></noinclude>
-Las imágenes se agregan a los artículos usando el botón "Imagen" a continuación el contenido de la ventana del editor en la pantalla de  Edición del Artículo. Nota: es posible insertar imágenes usando el editor en Joomla!. Sin embargo, esta característica proporciona una forma sencilla de insertar imágenes almacenadas en el directorio "images" de tu instalación de Joomla!.
+== Introduction ==
-# Abrir el Artículo para la edición, ya sea por:
+How best to add images to an article depends on which version of Joomla and which editor are in use. This article has illustrations for Joomla 4, with notes on differences in Joomla 3, and TinyMCE the Joomla default editor. To get started, open an article for editing:
-#* Haciendo clic en el '''Contenido {{rarr}} Artículos''' el elemento del menú para ir al ''Gestor de artículos'', selecciona el Artículo y has clic en el botón ''Editar'' de la barra de herramientas.
-#* Clic en el enlace  ''CONTENIDO {{rarr}} Nuevo Artículo'' del Panel de Control.
-#* Si has iniciado sesión en el lado cliente y tienes los permisos adecuados, al ver el Artículo que deseas editar: has Clic en el botón ''Editar'' de la barra de herramientas.
-# Elige donde quisieras que tu imagen se coloque en el flujo del texto, mueve el cursor y has clic en el botón''Imágenes'' del editor en la parte inferior de la pantalla.
-# La pantalla para la Inserción de la Imagen se abrirá sobre la pantalla de Edición del Artículo. Selecciona una imagen y has clic en el botón ''Insertar''.
-#* También te puedes mover entre directorios haciendo clic en los iconos de carpeta.
-#*Use the drop down ''Directory'' field to quickly select a directory and click the ''Up'' button to go up a directory level.
-#Set the image properties as required:
-#*'''Image Description''': This becomes the '''alt''' attribute for the image, an important feature for accessibility and compliance with web standards.
-#*'''Image Title''': Used for the optional caption and also becomes the '''title''' attribute in HTML.
-#*'''Image Float''': Sets the image alignment. By default, the align attribute is '''Not Set'''.
-#*'''Caption''': Enables the caption which displays the Image Title below the image.
-#*'''Caption Class''': Applies the entered class to the ''figcaption'' element.
-#Click the ''Insert'' button to insert the image. The Insert Image screen will close and the image will be displayed in the editor.
-#*Click the ''Cancel'' button to leave the Insert Image screen.
-== Uploading images using the Insert Image screen ==
+*'''Select''' {{rarr|Content,Articles}} in the Administrator menu.
+* '''Select''' the title of the article you wish to edit
-You may also upload new images using the Upload section of the Insert Image screen.
+After inserting the article text, place the cursor at the location where the image should appear.
-#Click the Browse button to open a file browser.
+== Adding a local image ==
-#Select the image files you wish to upload. Click Open in the file browser to confirm the selection. Note: The file browser style and layout depends on the browser and operating system you are using.
-#The selected file(s) appear at the bottom of the Insert Image screen. Click ''Start Upload'' to begin uploading files.
+If the image is located in the images folder of your Joomla installation you should insert the image using the {{rarr|CMS Content, Media}} button In the TinyMCE edit toolbar (In Joomla 3: Select the Image button):
-#*When the upload is complete a green notice will appear at the top of the screen.
+[[File:adding-an-image-to-an-article-cms-content-media.png|800|Adding an image]]
-#You may now select and insert the uploaded image as before.
+In the popup window, navigate to the image you want to use and click to select it. On selection a form will appear prompting for additional data. In Joomla 4 the form is to the left. In joomla 3 the form is at the bottom (scroll down):
+[[File:adding-an-image-to-an-article-selected-image.png|800|Selecting an image]]
+Establece las propiedades de imagen según sea necesario. En la mayoría de casos se debería rellenar el campo "Descripción de la imagen (texto alternativo)". Los otros campos se usan para personalizar el aspecto de la imagen con tu propio CSS.
+#* '''Descripción de la imagen''': Esto se convierte en el atributo '''alt''' de la imagen, una característica importante para la accesibilidad y el cumplimiento de los estándares web. En Joomla 3 se etiquetó como "Título de la imagen"
+*"Clase de la imagen": Si una imagen se usa sin subtítulo algunas clases personalizadas podrían aplicarse. Por ejemplo, en Joomla 4, "float-end ms-2 mb-1" alineará la imagen a la derecha y flotará el texto alrededor  con los márgenes a la izquierda y abajo para evitar que el texto toque la imagen. En Joomla 3 el estilo equivalente es "pull-right"
+*'''Figure Class''': If a caption is set then an alignment class, if any, should be applied to the Figure. It is a html tag that encloses the img tag. Note that in Cassiopeia margins are applied by the template style sheet.
+#* '''Pie de imagen''': Habilita el texto que muestra el Título de la Imagen debajo de la imagen.
+'''In Joomla 3'''
+<div class="mw-translate-fuzzy">
+#* '''Flotación de la imagen''': Establece la alineación de la imagen. De forma predeterminada, el atributo ''align' es '''Sin asignar'''.
+</div>
+#*'''Clase Caption''': Aplica la clase entrada al elemento ''figcaption''.
+#Haz clic en el botón "Insertar multimedia" para insertar la imagen. La pantalla "Multimedia" se cerrará y la imagen se mostrará en el editor. O seleccionar el botón "Cerrar" para abandonar la pantalla "Insertar multimedia"
+'''Tip:''' select the Toggle Editor button to see the applied Image and Caption styles.
+=== Using Drag and Drop for Local images ===
+In both Joomla 4 and Joomla 3 you can drag an image from the desktop or a file browser directly into the article text and the image will be uploaded to the media folder and placed in the article. The only snag is that all such uploaded images will be placed in the same media folder. The location of the Images Directory used for upload and whether this feature is enabled (On by default) are set in the TinyMCE configuration Options.
+== Adding a remote image ==
+If the image you wish to use is not in the images folder of your Joomla installation a slightly different procedure is needed.
+*'''Select''' {{rarr|Insert,Image}} from the TinyMCE toolbar to open a dialog box. In Joomla 3, use the Image icon and the same dialog as used for local images.
+*'''Insert''' the image url in the Source field.
+*'''Fill out''' the other fields as required.
+*'''Advanced''' provides some formatting options applied as in-line styles. Experiment with 1rem, 2, groove. (This feature is incomplete)
+[[File:adding-an-image-to-an-article-insert-edit-image.png|border|Data for a remote image]]
+=== Using Drag and Drop for Remote images ===
+You can drag and drop an image from a remote web site directly into your article text. But be aware that this may also copy the image container html with class statements not valid for your site.
+== Subir imágenes a través de la pantalla Inserción de Imagen ==
+Puedes subir nuevas imágenes usando la pantalla "Multimedia" (la pantalla "Imagen en Joomla 3)
+* First open the Media browser and navigate to the folder where you wish to store new images for the current article.
+<div class="mw-translate-fuzzy">
+# Has clic en el botón Examinar para abrir un explorador de archivos.
+</div>
+<div class="mw-translate-fuzzy">
+# Selecciona los archivos de imagen que deseas cargar. Has clic en Abrir en el explorador de archivos para confirmar la selección. Nota: El estilo y el diseño del explorador de archivos depende del navegador y sistema operativo que estés utilizando.
+</div>
+<div class="mw-translate-fuzzy">
+# El(los) archivo(s) seleccionado(s) aparecen en la parte inferior de la pantalla de Inserción de Imagen. Has clic en ''Iniciar subida'' para empezar a subir archivos.
+</div>
+<div class="mw-translate-fuzzy">
+#* Cuando la carga se haya completado, un aviso sobre fondo verde aparecerá en la parte superior de la pantalla.
+</div>
+<div class="mw-translate-fuzzy">
+# Ahora puedes seleccionar e insertar la imagen subida como se indicó anteriormente.
+</div>
 <noinclude>
-[[Category:Tutorials]]
+[[Category:Tutorials/es]]
-[[Category:Article Management]]
+[[Category:Article Management/es]]
-[[Category:Beginners]]
+[[Category:Beginners/es]]
 </noinclude>