Arxiu d'etiquetes: Imatges

Fotos de Flickr al blog (amb WordPress.com)

Si tenim fotografies a Flickr , podem compartir-les de dues maneres: mostrant-les com a entrades en el nostre blog, o en les barres laterals del blog.

Per mostrar-les com a entrades en el nostre blog, seguim els passos següents:

  1. Autoritzar a Flickr a accedir al nostre blog de WordPress.
    • Des de la configuració del nostre compte de Flickr, accedim a l’opció “ Compartiendo y extendiendo ” i fem clic a “ más sitios ” per veure totes les aplicacions amb què podem compartir i, a cotinuació, clic al botó “ Agregar WordPress ” (la icona amb el logo de WordPress).
      Añadir WordPress
    • A continuació, s’obrirà una finestra emergent on haurem de substituir el text genèric “your-blog.url” per l’adreça del nostre blog, i el nostre nom d’usuari i contrasenya de WordPress.
      Dades de WordPress que necessita Flickr
    • En finalitzar aquest procés ja tenim els dos serveis connectats.
  2. Escriure entrades al blog des de Flickr . A partir d’aquest moment, quan vulguem compartir una fotografia, o un àlbum, podrem fer-ho de manera molt senzilla:
    • Fem clic al botó de compartir i seleccionem WordPress:
      Compartir
    • Apareix una finestra emergent on escriurem el títol de l’entrada (per defecte, és el nom de la fotografia o de l’àlbum) i el text de l’entrada. En fer clic a “ Publicar “, haurem introduït l’entrada, sense necessitat de treballar des del tauler de l’administrador de WordPress.
      Publicar una entrada des de Flickr Si escau, accedim al tauler de l’administrador de WordPress per editar-la.

A més de compartir les fotografies del nostre canal de Flickr per aquest mètode, podem fer-ho també afegint el giny de Flickr que pot aparèixer en les barres de navegació lateral.

Per afegir-ho, seleccionem l’opció “Ginys” de l’apartat “Aparença del tauler de l’administrador. Arrosseguem el giny de Flickr cap a la barra lateral i el configurem. En la configuració, podrem establir diversos paràmetres:

Configurar el giny de Flickr

  • El títol que precedirà les fotografies que es presentin a la barra lateral.
  • L’URl de l’ RSS de Flickr: el sistema ens ofereix una adreça que condueix a l’ API de Flickr, però que està incompleta ja que hem de substituir el “MyID” al final de l’URL pel nostre identificador a Flickr. Aquest identificador no és el nostre nom d’usuari i, per saberlo hem de fer una consulta en aquesta adreça: http://idgettr.com . En el formulari que apareixerà, escrivint el nom d’usuari de Flickr i l’aplicatiu ens retornarà un identificador que haurem d’enganxar en substitució de “MyID”.
  • Nombre de fotografies que volem que es mostrin.
  • Mida de les fotografies: dues mides, petita i la més petita.

Galeries d’imatges (amb WordPress.com)

Podem crear galeries a partir d’imatges penjades al servidor de WordPress o bé compartir en el blog les que tenim penjades en altres serveis de la xarxa com ara Flickr o Instagram.

En aquesta entrada descrivim quins són els diversos tipus de galeries que podem crear a partir d’imatges penjades en el servidor de WordPress.com i com incloure-les en les nostres entrades.

Hi ha cinc tipus de galeries:

  1. Thumbnail Grid : graella de miniatures.
  2. Tiled Mosaic : mosaic d’imatges rectangulars.
  3. Square Tiles : mosaic d’imatges quadrades, totes de la mateixa mida.
  4. Circles : mosaic d’imatges circulars.
  5. Slideshow : presentació de diapositives.

Les passes per fer-ho són:

  1. En la pàgina d’edició d’entrades o pàgines fem clic al botó “Afegeix un mèdia”.
    Icona Afegeix un mèdia
  2. En la finestra que s’obre a continuació, fem clic a l’enllaç “Crea un galeria” ( Create Gallery ) que apareix en el menú de l’esquerra.
  3. En la pantalla que apareixerà a continuació, veure’m dues opcions:
    • Upload File : utilitzarem aquesta opció si les imatges encara no estan penjades.
    • Mediateca : utilitzarem aquesta opció si la galeria s’ha de construir amb imatges que ja estan al servidor.
  4. Amb les imatges penjades, seleccionem les que formaran la galeria. Cal seleccionar-les, amb un clic del ratolí. Per seleccionar més d’una imatge, caldrà fer-ho mitjançant control+clic (si treballem amb un PC) o command-clic (si treballem amb Mac).
  5. A continuació, clic al boto “Crea nova galeria”  que trobem en l’extrem inferior dret de la finestra.
    Crea nova galeria
  6. A continuació, s’obrirà una nova finestra que ens permetrà:
    • editar cadascuna de les imatges per afegir un títol (caption), el text alternatiu (alt), el title (text que apareix quan situem el cursor del ratolí a sobre de la imatge) i la descripció (description);
    • reordenar les imatges, arrossegant-les a la posició que interessi.
  7. Opcions de la galeria En el formulari de la part dreta de la finestra indicarem altres aspectes importants:
    • a on ha d’enllaçar la imatge del mosaic: a una pàgina del blog que mostrarà la imatge dins d’una pàgina amb el format preparat pel tema o a la imatge dins de la mediateca.
    • el nombre de columnes en què s’han de presentar les miniatures;
    • si volem o no que les imatges es mostrin de manera aleatòria, és a dir, independentment de l’ordre que presentin dins de la mediateca (cada cop que es carregui la pàgina, les imatges seran mostrades en un ordre diferent) i
    • finalment, podrem especificar el tipus de galeria que ens interessa.
  8. Per finalitzar, clic al botó “Insereix la galeria”   que trobem en l’extrem inferior dret de la finestra d’opcions.
    Botó insereix galeria

Botons per editar i esborrar la galeria Un cop la galeria ha estat inserida, en seleccionar-la, apareixeran dos botons: el primer serveix per editar-la i el segon, per esborrar-la.

En editar-la, entrem en la mateixa finestra descrita en els punts 6 i 7 i que ens permetrà canviar aquells aspectes que convingui.

El botó a la part inferior dreta de la pantalla, ens permetrà desar els canvis que s’hagin fet.
Actualitza galeria

Edició de les imatges inserides en les entrades del blog (amb WordPress.com)

Un cop inserida una imatge en una entrada del blog, podrem editar-la en qualsevol moment per canviar els paràmetres establerts en inserir-la.

Per fer-ho, fem clic a sobre de la imatge. Apareixeran dos botons:

Els botons d'edició i esborrat

El primer ens permet editar-la, el segon esborrar-la.

En fer clic en el primer botó, “Edita la imatge”, accedim a una finestra on establirem els paràmetres que interessin. La finestra d’edició té dues pestanyes: “ Edita la imatge ” i “ Opcions avançades “.

Les opcions de la primera pestanya són les següents:

  1. Mida :  en fer clic en l’escala de percentatges, podrem canviar la mida de la imatge. A la dreta, una vissualització prèvia mostrarà els efectes que produeix el redimensionament.
  2. Alineació :  podrem indicar una nova posició per a la imatge. La visualització prèvia ens indicarà quin efecte provoca cadascun dels alineaments possibles (cap, esquerra, centrat i dret).
  3. Títol : podem escriure el títol de la imatge. Aquest és el text que es mostrarà als navegants quan situïn el cursor del ratolí a sobre.
  4. Text alternatiu :  podem escriure el text que es llegirà si la imatge no està disponible, o que utilitzaran els lectors de pantalla per interpretrar el contingut de la imatge.
  5. Llegenda : podem escriure el text que apareixerà com a peu de la imatge.
  6. URL : podem escriure la URL amb la qual ha d’enllaçar la imatge.

Les opcions de la pestanya “ Opcions avançades ” són les següents:

Relatives a la imatge

  1. Codi font :  es refereix a la URL real de la imatge en cas que es desitgi un control total sobre els seus paràmetres.
  2. Mida : control de l’amplada i l’alçada de la imatge, amb l’opció de restablir els valors originals de la imatge fent clic al botó “Mida original”.
  3. Classe CSS : el control del format de les imatges es fa mitjançant el llenguatge CSS. Segons el tema escollit, les imatges tindran aplicades unes regles CSS que podríem anul·lar des d’aquesta opció.
  4. Styles : amb aquesta opció podem indicar regles CSS pròpies per a la presentació de les imatges.
  5. Propietats de la imatge : amb aquesta opció podem proporcionar algunes opcions de format a les imatges. Podem indicar que la imatge tingui una vora (donarem un valor que serà interpretat en píxels), que se separi verticalment (en píxels) o horitzontalment (també en píxels) dels elements que tingui al seu voltant. Els canvis que farem en aquest apartat es visualitzaran automàticament com a regles CSS en l’apartat “Styles”.

Relatives a l’enllaç (si la imatge és un àncora que ha de portar a alguna destinació web)

  1. Títol : text per al títol que es mostrarà en situar el cursor del ratolí a sobre de la imatge.
  2. Relatiu a l’enllaç : els enllaços poden tenir diversos atributs que podem especificar en aquest apartat. Per exemple podríem afegir l’atribut “nofollow”, per evitar que els robots de Google segueixin l’enllaç. Llegiu-ne més sobre aquest atribut en aquest enllaç .
  3. Classe CSS : regles CSS aplicades als enllaços que, si escau, podem eliminar.
  4. Styles : regles CSS pròpies per a canviar el format dels enllaços.
  5. Destinació : indicació de si l’enllaç s’ha d’obrir en la mateixa finestra (o pestanya) o en una de nova.

Inserir imatges en les entrades del blog (amb WordPress.com)

Les imatges que inserirem en les entrades d’un blog poden estar emmagatzemades en el mateix espai que el web o en URL externes. Els tipus d’imatges que poden utilitzar són els següents:

  • .jpg / .jpeg
  • .gif
  • .png

Inserir una imatge que allotjarem al servidor del propi blog

Per inserir una imatge seguim el procediment següent:

  1. Situem el cursor allà on ha de visualitzar-se la imatge i fem clic al botó “Afegeix un mèdia” que trobem a sobre de les barres d’eines de l’editor.

    Icona Afegeix un mèdia

  2. A continuació, apareixerà una pantalla amb diverses opcions. Una d’elles, “Upload Files”, dóna accés a un aplicatiu que ens permet penjar la imatge de dues maneres diferents:
    • arrossegant-la des d’un dels dispositius d’emmagatzematge del nostre ordinador, o bé
    • fent clic al botó “Selecciona” per seleccionar-la utilitzant el quadre de diàleg que obrià el nostre ordinador per donar-nos accés a les imatges que hi tinguem emmagatzemades.
  3. Un cop penjada la imatge el procés ja s’ha completat.
  4. A l’esquerra de la pantalla apareix un formulari amb informacions diverses (nom de la imatge, data en què ha estat penjada i mida original en píxels) i diversos camps de text amb informació sobre la imatge que haurem de completar:
    • Títol : donem un títol a la imatge. Aquest títol, però no és el text que es mostrarà si els navegants situen el cursor a sobre de la imatge, si volem que això passi haurem d’escriure el títol editant la imatge un cop inserida (Vegeu l’entrada “ Edició de les imatges inserides en les entrades del blog (amb WordPress) “).
    • Llegenda : text que apareixerà com a peu de la imatge.
    • Alt text : si la imatge no està disponible, el text que s’escrigui en aquest camp serà el que es visualitzarà en el seu lloc. Aquest és també el text que utilitzen els lectors de pantalla per interpretar el contingut de la imatge.
    • Descripció : podem incloure una descripció més completa de la imatge o fer comentaris sobre ella. En completar aquest apartat estarem creant una pàgina a la qual es podrà accedir en fer clic a sobre d’ella.
    • Alineació : indicarem la posició de la imatge en relació al text. Hi ha 4 alineaments possibles:
      • Esquerra : la imatge flota a l’esquerra del text, el text flueix a la seva dreta.
      • Centrat : la imatge se situa en el centre de l’entrada i el text queda a dalt i a baix de la imatge.
      • Dreta : la imatge flota a la dreta del text, el text flueix a la seva esquerra.
      • Cap : la imatge se situa en línia amb el text.
    • Link to : és la URL amb la qual ha d’enllaçar la imatge. Hi ha quatre opcions:
      • Custom URL : podem indicar una URL, dins o fora del nostre blog.
      • Media File : les imatges poden inserir-se en la seva mida original o més petites. Si les hem inserit en una mida reduïda i volem que els navegants puguin veure la imatge amb la seva mida original, llavors utilitzarem aquesta opció, ja que la imatge queda emmagatzemada amb la seva mida real en un enllaç permanent del lloc web on tenim el blog.
      • Pàgina adjunta : si hem afegit una descripció a la imatge, en fer clic a sobre de la imatge, hi accedirem.
      • Cap : la imatge no enllaçarà amb cap recurs.
    • Mida : quan pengem una imatge, aquesta tindrà una mida que pot excedir l’espai disponible en la nostra entrada. És per això que l’aplicatiu realitza un redimensionament. En aquest cas ens pots oferir diverses mides que escollirem en funció de les nostres intencions de disseny. Segons de la grandària del fitxer penjat, les mides que ens pot arribar a oferir seran “miniatura”, “mitjana”, “gran” o “mida original”.
  5. Per finalitzar fem clic al botó “ Insert into post “.

La imatge ha quedat inserida. Si volem modificar algun dels paràmetres introduïts, haurem d’editarla (Vegeu l’entrada “ Edició de les imatges inserides en les entrades del blog (amb WordPress) “).

Un cop les imatges ja han estat penjades en el servidor, les tindrem disponibles per inserir-les en qualsevol entrada del blog ja que estaran emmagatzemades a la nostra mediateca.

Inserir una imatge del web

Si la imatge que volem penjar està en una ubicació fora del nostre lloc web, seguirem el procediment següent:

  1. Situem el cursor allà on ha de visualitzar-se la imatge i fem clic al botó “Afegeix un mèdia” que trobem a sobre de les barres d’eines de l’editor.

    Icona Afegeix un mèdia

  2. En la pantalla que apareixerà a continuació, fem clic a l’opció “ Insert from URL “.
  3. Un formulari ens permetrà establir els paràmetres de la imatge:
    • URL de la imatge (adreça completa de la imatge que es troba en un altre servidor d’Internet).
    • Llegenda : text que apareixerà al peu de la imatge.
    • Alt text : text alternatiu que es llegirà si la imatge no està disponible i que serà utilitzat pels lectors de pantalla.
    • Alineació : posició de la imatge respecte del text (esquerra, centrat, dreta, cap).
    • Link to : crearà l’enllaç al recurs que indiquem (l’adreça URL on està la imatge, una URL diferent a la que conté la imatge i que pot apuntar a qualsevol altre recurs d’Internet o, finalment, cap).