Construye galerías de imágenes con Hive Translator 🇪🇸 🇬🇧

noakmilo(72)

Published in

HiveDevs

Words

349

Reading

2 min

Listen to this post

~2 min

ENGLISH VERSION

Hello dear HiveDevs friends, today I come to present you one of the last functions I have added to HiveTranslator.com. But first let me have a small pitch.

Hive Translator is a translator and text formatter for Hive, developed by me, from Cuba 🇨🇺 for the blockchain. It is an accessibility tool that allows users to build bilingual posts for communities that allow it. And by the way, overcome the language barrier.

The feature I present to you today has little to do with the main function of the app. But it has been quite demanded by the community. It is an option of format to add image galleries to our posts. For this, it simply uses some javascript running on Flask to concatenate the markdown codes of images with those of a table and build a gallery. Next I show you the code fragment of said function.

Hola queridos amigos de HiveDevs, hoy vengo a presentarles una de las últimas funciones que he agregado a HiveTranslator.com. Pero antes permítanme un pequño pitch.

Hive Translator es un traductor y maquetador de textos para Hive, desarrollado por mí, desde Cuba 🇨🇺 para la blockchain. Se trata de una herramienta de accesibilidad que permite a los usuarios construír posts bilingues para las comunidades que así lo permitan. Y de paso, sortear la barrera lingüística.

El feature que les presento hoy no tiene mucho que ver con la función principal del app. Pero sí ha sido bastante demandada por la comunidiad. Se trata de una opción de formato para agregar galerías de imágenes a nuestros posts. Para ello, simplemente utiliza algo de javascript corriendo sobre Flask para concatenar los códigos markdown de imágenes con los de una tabla y construir una galería. A continuación les muestro el fragmento de código de dicha función.

function buildGallery() {
   var textarea = document.getElementById('input-text');
   var startPos = textarea.selectionStart;
   var selectedText = textarea.value.substring(startPos);
   var img1 = document.getElementById('image1');
   var img2 = document.getElementById('image2');
   var img3 = document.getElementById('image3');
   var dialogo = document.getElementById("gallery");
   var replacement;
                
   if (img3.value !== "") {
      replacement = '|' + img1.value + '|' + img2.value + '|' + img3.value + '|' + '\n' + '|-|-|-|' + '\n';
      } else {
            replacement = '|' + img1.value + '|' + img2.value + '|' + '\n' + '|-|-|' + '\n';
      }

      textarea.value = textarea.value.substring(0, startPos) + replacement + selectedText;
   dialogo.style.display = "none";
 }