ENG/ESP]-Image Command Tutorial for COPY/ Tutorial de Comandos de Imágenes para COPIAR

over 3 years ago

[ENG/ESP]-Image Command Tutorial for COPY/ Tutorial de Comandos de Imágenes para COPIAR

English version

IMAGE COMMANDS

The image within #hive is fundamental, it makes the post more dynamic and less monotonous and we always place images in relation to the theme we are developing. For example if it's a poem and the writing itself is an analogy of chocolate; somewhere it must have a chocolate image.

Let's remember that the images to use can be your own or images with free usage rights (At the end, I leave a tutorial in which you can search some of the many that are hosted on the internet) It's my position, it's not the absolute truth. However, each author is looking for his own style when publishing. Less words and more action; let's start with the IMAGE COMMANDS, it's a reference that can be useful, at the end of the post, I will leave a list of previous tutorial posts either for new users learning or refreshing the not so new ones. So, let's start!

Line separator

`<hr>`

For example:

<center> Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos

<hr>

Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos </center>

It would look like this:

Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos Mariano viajaba al campo verde los llanos Venezolanos

Image at the sides

<div class="pull-left">image link-column </div> <div class="pull-right"> image link-column</div>

It would look like this:

I learned this from @josecarrerag when they are going to insert images be very careful in cleaning the code. Sometimes you pass the code as it is and the editor doesn't read it, for example:

![20200911_180943.jpg](https://files.peakd.com/file/peakd-hive/eleazarvo/GDkK4wb3-20200911_180943.jpg)

What we can do in this case is to delete everything outside the parenthesis and leave the heart of the code

It would look like this:

https://files.peakd.com/file/peakd-hive/eleazarvo/GDkK4wb3-20200911_180943.jpg

Here if we can use the code of this image and it will not give error, we will appreciate that in the commands below.

CLICK ON A WORD AND IT WILL TAKE US TO A SOURCE OF THE IMAGE

[IMAGE OF AN OWL](dirección web "URL")

Quedaría así:

IMAGE OF AN OWL

Another form of TEXT LINKED TO THE IMAGE SOURCE

<a href="SOURCE WHERE THE IMAGE OF THE OWL IS"> IMAGE OF AN OWL </a>

It would look like this:

IMAGE OF AN OWL

Hyperlinked image (only the image appears but you can click on it and it will take you to the Source where the image is hosted, first we insert the link to the Source and on the other side we load or paste the link to the image)

<a href="https://pixabay.com/es/photos/b%C3%BAho-aves-ojos-b%C3%BAho-real-las-aves-50267/"><img src= "https://files.peakd.com/file/peakd-hive/eleazarvo/iq4DAfag-image.png" border="0"></a>

It would look like this:

This command was taught to me by @miguelmederico, and it is: IMAGE SLIDER

<pre><img src="IMAGE LINK"> <img src="IMAGE LINK"> <img src="IMAGE LINK"></pre>

<pre><img src= "https://files.peakd.com/file/peakd-hive/eleazarvo/FKNK3jET-20200911_181020.jpg"> <img src="https://files.peakd.com/file/peakd-hive/eleazarvo/xpVmW6Qf-20200911_180027.jpg"> <img src="https://files.peakd.com/file/peakd-hive/eleazarvo/0OGPCRrv-20200911_180934.jpg"></pre>

It would look like this:

COMMAND FOR TABLES: This example is of 3 but if you want to remove any, just delete a line that begins with "td" and ends in "/td" with signs "<>" included.

<table><tr><td><center><img src="https://files.peakd.com/file/peakd-hive/eleazarvo/12EOTRb5-20200911_180002.jpg" alt="" /></center></td><td><center><img src="https://files.peakd.com/file/peakd-hive/eleazarvo/12EOTRb5-20200911_180002.jpg" alt="" /></center></td><td><center><img src="https://files.peakd.com/file/peakd-hive/eleazarvo/12EOTRb5-20200911_180002.jpg" alt="" /></center></td></tr></table>

It would look like this:

Another way to make paintings

|Post|User|
|---|---|
|Post|user|

Quedaría así:

Post	User
Post	user

These are the most basic, it's a matter of finding out in #hive that other commands exist and using creativity to do wonderful things with these.

Here I leave you a series of publications style: "Tutorial" that I have made that are of my authorship and can benefit you in that enigmatic, mysterious but friendly: "POST MODEL" and other things more.

[ENG/ESP]- Text Commands Tutorial + Personal Layout Tutorial Collection/Tutorial de Comandos de Texto + Colección de tutoriales personales para maquetar

[ENG/ESP]Crea tus separadores de párrafo transparentes y no mueras en el intento - Tutorial/Create your transparent paragraph separators and don't die trying - Tutorial

Bienvenidos a la plataforma 3.0 - Oportunidad de Emprendimiento para ti

Oportunidad de ingreso extra: Brave - El primer navegador que te paga con crypto, por usarlo y recomendarlo

Tutorial #1 - Letras de Colores para Steemit

Tutorial # 2 - Separadores transparentes para Steemit

Tutorial # 3 - La Fotografía en la maqueta de Steemit (Usos, Banco de imágenes libres de uso y Contornos Power Point)

VERSIÓN ESPAÑOL

COMANDOS DE IMÁGENES

La imagen dentro de #hive es fundamental, hace que el post sea más dinámico y menos monótono y siempre colocamos imágenes con motivo al tema que estamos desarrollando. Por ejemplo si es un poema y el mismo escrito es una analogía del chocolate; por algún lado debe tener una imagen de chocolate.

Recordemos que las imágenes a utilizar pueden ser propias o imágenes con libre derecho de uso (Al final, dejo un tutorial en el cual puedes buscar algunos de los tantos que se encuentran alojados en internet) Es mi posición, no es la verdad absoluta. No obstante, cada autor va buscando su estilo a la hora de publicar. Menos palabras y más acción; comencemos con los COMANDOS DE IMÁGENES, es una referencia que pueda ser útil, al final del post, dejaré un listado de los posts tutoriales anteriores ya sea para el aprendizaje de los nuevos usuarios o el refrescamiento de los no tan nuevos. Sin más ¡Comencemos!

Separador de línea

`<hr>`

Por ejemplo:

<hr>

Quedaría así:

Imagen a los lados

<div class="pull-left">link de la imagen-columna </div> <div class="pull-right"> link de la imagen-columna </div>

Quedaría así:

Esto lo aprendí de @josecarrerag, cuando vayan a insertar imágenes tengan sumo cuidado en la limpieza del código. A veces uno pasa el código tal cual y el editor no lo lee, Por ejemplo

![20200911_180943.jpg](https://files.peakd.com/file/peakd-hive/eleazarvo/GDkK4wb3-20200911_180943.jpg)

Lo que podemos hacer en este caso es borrar todo lo que está fuera del paréntesis y dejar el corazón del código

Quedaría así:

https://files.peakd.com/file/peakd-hive/eleazarvo/GDkK4wb3-20200911_180943.jpg

Acá si podemos utilizar el código de esta imagen y no dará error, eso lo apreciaremos en los comandos a continuación.

CLIKEAR UNA PALABRA Y QUE ESTA NOS LLEVE A UNA FUENTE DE LA IMAGEN

[IMAGEN DE BÚHO](dirección web "URL")

Quedaría así:

IMAGEN DE BÚHO

Otra forma de TEXTO ENLAZADO A LA FUENTE DE IMAGEN

<a href=" FUENTE DONDE ESTÁ LA IMAGEN DEL BÚHO"> IMAGEN DE BÚHO </a>

Quedaría así:

IMAGEN DE BÚHO

Imagen Hipervinculada (Que solo aparece la imagen pero puedes hacer clik y te lleva a la Fuente en donde está alojada la imagen, primero insertamos el link de la Fuente y en el otro aparte cargamos o pegamos el link de la imagen)

<a href="https://pixabay.com/es/photos/b%C3%BAho-aves-ojos-b%C3%BAho-real-las-aves-50267/"><img src= "https://files.peakd.com/file/peakd-hive/eleazarvo/iq4DAfag-image.png" border="0"></a>

Quedaría así:

Este comando me lo enseñó @miguelmederico, y es: DESLIZADOR DE IMÁGENES

<pre><img src="link DE IMAGEN"> <img src="link DE IMAGEN"> <img src="link DE IMAGEN"></pre>

<pre><img src= "https://files.peakd.com/file/peakd-hive/eleazarvo/FKNK3jET-20200911_181020.jpg"> <img src="https://files.peakd.com/file/peakd-hive/eleazarvo/xpVmW6Qf-20200911_180027.jpg"> <img src="https://files.peakd.com/file/peakd-hive/eleazarvo/0OGPCRrv-20200911_180934.jpg"></pre>

Quedaría así:

COMANDO PARA TABLAS: Este ejemplo es de 3 pero si desean quitar alguna, solo eliminen una linea que comienza por "td" y termina en "/td" con signos "<>" incluidos.

<table><tr><td><center><img src="https://files.peakd.com/file/peakd-hive/eleazarvo/12EOTRb5-20200911_180002.jpg" alt="" /></center></td><td><center><img src="https://files.peakd.com/file/peakd-hive/eleazarvo/12EOTRb5-20200911_180002.jpg" alt="" /></center></td><td><center><img src="https://files.peakd.com/file/peakd-hive/eleazarvo/12EOTRb5-20200911_180002.jpg" alt="" /></center></td></tr></table>

Quedaría así:

Otra manera de hacer cuadros

|Post|Usuario|
|---|---|
|Post|usuario|

Quedaría así:

Post	Usuario
Post	usuario

Estos son los más básicos, es cuestión de indagar en #hive que otros comandos existen y usar la creatividad para hacer cosas maravillosas con estos.

Aquí te dejo una serie de publicaciones estilo: "Tutorial" que he realizado que son de mi autoría y pueden beneficiarte en esa enigmática, misteriosa pero amigable: "MAQUETA DE POST" y otras cosillas más.

[ENG/ESP]- Text Commands Tutorial + Personal Layout Tutorial Collection/Tutorial de Comandos de Texto + Colección de tutoriales personales para maquetar

[ENG/ESP]Crea tus separadores de párrafo transparentes y no mueras en el intento - Tutorial/Create your transparent paragraph separators and don't die trying - Tutorial

Bienvenidos a la plataforma 3.0 - Oportunidad de Emprendimiento para ti

Oportunidad de ingreso extra: Brave - El primer navegador que te paga con crypto, por usarlo y recomendarlo

Tutorial #1 - Letras de Colores para Steemit

Tutorial # 2 - Separadores transparentes para Steemit

Tutorial # 3 - La Fotografía en la maqueta de Steemit (Usos, Banco de imágenes libres de uso y Contornos Power Point)

Créditos/Credits:

Las Fotografias de Flores son de mi autoría. El Resto de imágenes de búho, son de libre derecho de uso desde Pixabay.com, en algunos casos, está hipervinculado a su fuente.

El inglés idioma no es mi idioma nativo, por tanto puedo tener errores gramaticales, para ello usé el traductor: https://www.deepl.com/ .. Dios les bendiga...

The Photographs of Flowers are of my authorship. The rest of the owl images are free to use from Pixabay.com, in some cases, is hyperlinked to its source.

English language is not my native language, so I may have grammatical errors, so I used the translator: https://www.deepl.com/ . God bless you...

For more information about my universe, you can follow my social networks (click icons)

Para mayor información de mi universo, puedes seguir mis redes sociales (hacer clik iconos)

Discover the new Monetized Social Network that you can use and recommend (only for android phones) by clicking on the icon,

download it and register for free. (If you want to know the LIFETIME PROGRAM you can contact me at Whatssap:

Descubre la nueva Red Social Monetizada con la cual ganas por usarla y recomendarla (solo para celulares android) clik en el icono,

descárgala y registrate gratis. (Si quieres conocer el PROGRAMA DE GANANCIAS DE POR VIDA puedes comunicarte conmigo al Whatssap:

spanish cervantes tutoriales educacion education neoxian posh tutorials talentclub

0.000

11 comments

@poshbot 59

over 3 years ago

https://twitter.com/eleazarvho22/status/1314558571246477313

0.000

@stellae 49

over 3 years ago

Gracias por compartir tu contenido con la comunidad de El Arca (@elarca), el mismo ha sido votado por nuestra iniciativa de curación artística @stellae. Si deseas puedes delegar HP al proyecto: Delegate 25 HP Delegate 50 HP Delegate 100 HP Delegate 250HP Delegate 500HP

0.000