De vegades per a que s’entengui millor el nostre missatge haurem d’inserir les imatges enmig d’un fragment de text. Per fer-ho bé caldrà seguir un procediment que canviarà en funció del model del vostre site.

Abans de tot, esbrina el model de site amb el qual treballes.

Inserir imatges en pàgines del model VA

  1. Donar d’alta la imatge mitjançant un asset de tipus Multimèdia, definició Imatge.
  2. Una vegada tinguem l’asset fet, el tanquem amb el botó Inspeccionar:
Captura de pantalla parcial del botó inspeccionar del CKEditor a Oracle Webcenter Sites
  1. Anem a la pestanya “URL” i copiem l’adreça però a partir de la carpeta d’idioma.
Captura de pantalla de la pestanya URL d'un asset imatge

Per exemple, de la URL següent:
https://www.uab.cat/ca/proves-va/img/nom-persona-laboratori-treballant-lordinador/istock-631930940.jpg
Copiaríem a partir de /ca/, és a dir: /ca/proves-va/img/nom-persona-laboratori-treballant-lordinador/istock-631930940.jpg

  1. Anem a l’asset on volem inserir la imatge i fem clic al quadre de l’editor de text. Posem el cursor en el lloc on volem que es carregui la imatge i cliquem el botó “Imagen”.
Captura de pantalla parcial del botó d'afegir imatge del CKEditor a Oracle Webcenter Sites
  1. S’obrirà una finestra i allà haurem d’enganxar la url de la imatge, a l’espai següent:
Captura de pantalla de les propietats d'una imatge a CKEditor



És obligatori emplenar el camp “Texto Alternativo”. Aquest text haurà de ser una breu descripció del que es veu a la imatge.

  1. Si volem que la imatge s’alineï a l’esquerra o a la dreta, obriu el desplegable “Alineació”.
Captura de pantalla del detall de l'alineació de les propietats d'imatge a CKEditor

Inserir imatges en pàgines del model RWD

  1. Donar d’alta la imatge al gestor.
  2. Una vegada s’hagi guardat l’asset, donar al botó “Previsualizar”.
Captura de pantalla de la barra de menú d'un asset imatge
  1. Apareixerà la finestra següent on caldrà marcar en blau el nom de la plantilla i després prémer el botó “Aplicar”:
Captura de pantalla de la selecció de la plantilla de previsualització d'un asset

  1. A la pantalla que es carregarà, baixeu fins a sota de les imatges, fins l’apartat que diu “Si vols fer servir aquest document com a HTML dins un text, copia el següent codi:” i copieu el tros que hem marcat en verd (és a dir, el text que hi ha entre les cometes “”, inclou la barra inicial /):
Captura de pantalla de la previsualització d'un asset imatge

Atenció! Si teniu una imatge per idioma, llavors tindreu una url diferent per cada idioma, heu de copiar l’enllaç corresponent als camps (ca), (es) i (en).

Captura de pantalla de la previsualització d'un asset imatge

  1. Anem al text genèric on volem afegir la imatge, posem el cursor allà on volem que surti la imatge i cliquem al botó següent:
Captura de pantalla de la barra d'eines de CKEditor a Oracle

  1. S’obrirà una finestra i allà haurem d’enganxar la url de la imatge, a l’espai següent:
Captura de pantalla de les propietats d'una imatge a CKEditor

És obligatori informar el camp “Texto Alternativo”.

  1. Si volem que la imatge s’alineï a l’esquerra o a la dreta, obriu el desplegable “Alineació”.
Captura de pantalla del detall de l'alineació de les propietats d'imatge a CKEditor

  1. Finalment, premeu el botó “D’acord”.

Consideracions finals

Com veureu, aquest procediment ens permet inserir més d’una imatge. El que podeu fer és primer donar d’alta totes les imatges, apuntar-vos les url en un bloc de notes i després les podeu afegir al text genèric d’una sola vegada.

La contra d’aquest procediment és que les imatges no estaran directament vinculades a l’asset del text genèric i per tant, quan aproveu per publicar el text no es recordarà de demanar-vos que publiqueu les imatges. Haureu de recordar-vos de publicar el text i totes les imatges que hàgiu fet.