Update documentation to customize images

docs/en/customization/images.md

@@ -1,17 +1,21 @@
-# Images
+# Customizing images
 
-If you want to overwrite any image, firstly you need to find out the filename, and by default it will be located under `app/assets/images`. For example if you want to change the header logo (`app/assets/images/logo_header.png`) you must create another file with the exact same file name under `app/assets/images/custom` folder. The images and icons that you will most likely want to change are:
+If you want to overwrite any image, first you need to find out its filename, which will be located under `app/assets/images/`. For example, if you'd like to change the header logo (`app/assets/images/logo_header.png`), create another file with the exact same filename under the `app/assets/images/custom/` folder. Please note that, due to restrictions in the way Ruby on Rails loads images, **you will also have to rename the original file**. In the example, rename `app/assets/images/logo_header.png` to (for example) `app/assets/images/original_logo_header.png` and then create your custom image in `app/assets/images/custom/logo_header.png`.
 
-* apple-touch-icon-200.png
+The images and icons that you will most likely want to change are:
-* icon_home.png
+
-* logo_email.png
+* `apple-touch-icon-200.png`
-* logo_header.png
+* `icon_home.png`
-* map.jpg
+* `logo_email.png`
-* social_media_icon.png
+* `logo_header.png`
-* social_media_icon_twitter.png
+* `map.jpg`
+* `social_media_icon.png`
+* `social_media_icon_twitter.png`
+
+Note that, instead of customizing the image using the method explained above, many of these images can be customized in the admin area, under the "Site content custom images" section.
 
 ## City Map
 
-You'll find the city map at [`/app/assets/images/map.jpg`](https://github.com/consuldemocracy/consuldemocracy/blob/master/app/assets/images/map.jpg), just replace it with an image of your cities districts ([example](https://github.com/consuldemocracy/consuldemocracy/blob/master/app/assets/images/map.jpg)).
+You'll find the city map at `/app/assets/images/map.jpg`. You can replace it with an image of your city districts, like this [map image example](https://github.com/consuldemocracy/consuldemocracy/blob/master/app/assets/images/map.jpg).
 
-Afterwards we recommend you to use an online tool like <http://imagemap-generator.dariodomi.de/> or <https://www.image-map.net/> to generate the html coordinates to be able to generate a [image-map](https://www.w3schools.com/tags/tag_map.asp) for each of the districts. Those coordinates should be introduced on the respective Geozones at the admin geozones panel (`/admin/geozones`).
+Afterwards, we recommend you use an online tool like <http://imagemap-generator.dariodomi.de/> or <https://www.image-map.net/> to generate the html coordinates to be able to generate an [image-map](https://www.w3schools.com/tags/tag_map.asp) for each of the districts. Those coordinates should be introduced on the respective geozones at the admin geozones panel (`/admin/geozones`).

docs/es/customization/images.md

@@ -1,6 +1,8 @@
-# Imágenes
+# Personalización de imágenes
 
-Si quieres sobreescribir alguna imagen debes primero fijarte el nombre que tiene, por defecto se encuentran en `app/assets/images`. Por ejemplo si quieres modificar `app/assets/images/logo_header.png` debes poner otra con ese mismo nombre en el directorio `app/assets/images/custom`. Los iconos que seguramente quieras modificar son:
+Si quieres sobrescribir alguna imagen, primero debes fijarte en el nombre que tiene. Por defecto, se encuentran en `app/assets/images/`. Por ejemplo, si quieres modificar el logo de la cabecera (`app/assets/images/logo_header.png`), crea otro archivo con ese mismo nombre en el directorio `app/assets/images/custom/`. Ten en cuenta que, debido a restricciones en la forma en que Ruby on Rails carga imágenes, **tendrás que renombrar el archivo original**. En el ejemplo, renombra `app/assets/images/logo_header.png` a (por ejemplo) `app/assets/images/original_logo_header.png` y a continuación crea tu imagen personalizada en `app/assets/images/custom/logo_header.png`.
+
+Las imágenes e iconos que seguramente quieras modificar son:
 
 * apple-touch-icon-200.png
 * icon_home.png
@@ -10,8 +12,10 @@ Si quieres sobreescribir alguna imagen debes primero fijarte el nombre que tiene
 * social_media_icon.png
 * social_media_icon_twitter.png
 
+Ten en cuenta que, en vez de personalizar estas imágenes utilizando el método explicado anteriormente, muchas de estas imágenes pueden personalizarse desde el área de administración, en la sección "Contenido del sitio, personalizar imágenes".
+
 ## Mapa de la ciudad
 
-Puedes encontrar el mapa de la ciudad en [`/app/assets/images/map.jpg`](https://github.com/consuldemocracy/consuldemocracy/blob/master/app/assets/images/map.jpg), simplemente reemplazalo con una imagen de los distritos de tu ciudad ([ejemplo](https://github.com/consuldemocracy/consuldemocracy/blob/master/app/assets/images/map.jpg)).
+Puedes encontrar el mapa de la ciudad en `/app/assets/images/map.jpg` y reemplazarlo con una imagen de los distritos de tu ciudad, como esta [imagen de ejemplo de mapa](https://github.com/consuldemocracy/consuldemocracy/blob/master/app/assets/images/map.jpg).
 
-Después te recomendamos utilizar una herramienta online como <http://imagemap-generator.dariodomi.de/> o <https://www.image-map.net/> para generar las coordenadas para poder establecer un [image-map](https://www.w3schools.com/tags/tag_map.asp) sobre cada distrito. Estas coordenadas deben ser introducidas en la respectiva Geozona creada en el panel de administración (`/admin/geozones`)
+Después te recomendamos utilizar una herramienta como <http://imagemap-generator.dariodomi.de/> o <https://www.image-map.net/> para generar las coordenadas para poder establecer un [image-map](https://www.w3schools.com/tags/tag_map.asp) sobre cada distrito. Estas coordenadas deben ser introducidas en la respectiva geozona creada en el panel de administración (`/admin/geozones`).