Uso interno

Kit del Journal

Elegí la pieza, tocá Copiar y pegala en la nota. Lo de arriba de cada bloque es exactamente como se va a ver publicado.

Creá la nota en Shopify → Contenido → Blogs → Tiempos de Frères.
Elegí el template article.journal en el panel de la derecha. Si te olvidás de este paso, la nota sale con el diseño viejo.
Escribí normal. Para meter una pieza, tocá el botón </> del editor y pegá el bloque ahí.

Las fotos: copiá el link de la foto desde Contenido → Archivos y pegalo donde dice PEGAR-LINK-DE-FOTO. Dejá el ?width= que ya viene puesto — es lo que hace que la nota cargue rápido en el celular.

Sección numerada

Para abrir cada bloque del número. Cambiá el número y la palabra.

01 · Cine

Título de la sección

<p class="fr-jr-num">01 · Cine</p>
<h2>Título de la sección</h2>

Título con ficha

Para cada película, serie o evento: reparto, dirección, dónde verla.

Spider-Man: Brand New Day

Tom Holland · dirigida por Destin Daniel Cretton

<h3>Spider-Man: Brand New Day</h3>
<p class="fr-jr-credits">Tom Holland · dirigida por Destin Daniel Cretton</p>

Agenda

Para "en cartelera" y "lo que se viene". La fecha es opcional.

Nombre de la película23/9 · Apple TV
Una línea de qué va, sin spoilers.
Otra más
Esta no lleva fecha ni plataforma.

<ul class="fr-jr-list">
  <li><strong>Nombre de la película</strong><em>23/9 · Apple TV</em><p>Una línea de qué va, sin spoilers.</p></li>
  <li><strong>Otra más</strong><p>Esta no lleva fecha ni plataforma.</p></li>
</ul>

Grilla de fotos

La que ya usás. Agregale fr-img-grid--3, --4 o --full para cambiar cuántas entran por fila.

<div class="fr-img-grid">
  <img src="PEGAR-LINK-DE-FOTO?width=900" alt="" loading="lazy" decoding="async">
  <img src="PEGAR-LINK-DE-FOTO?width=900" alt="" loading="lazy" decoding="async">
</div>

Galería que se desliza

Para lookbooks. En el celular se arrastra con el dedo. Poné todas las fotos que quieras.

<div class="fr-jr-gallery">
  <img src="PEGAR-LINK-DE-FOTO?width=900" alt="" loading="lazy" decoding="async">
  <img src="PEGAR-LINK-DE-FOTO?width=900" alt="" loading="lazy" decoding="async">
  <img src="PEGAR-LINK-DE-FOTO?width=900" alt="" loading="lazy" decoding="async">
</div>

Cita grande

Aparece palabra por palabra al scrollear. El <cite> es opcional.

La frase que querés destacar.Quién lo dijo

<blockquote class="fr-jr-quote">La frase que querés destacar.<cite>Quién lo dijo</cite></blockquote>

Banda negra

Para cortar el ritmo. El menú de arriba se aclara solo cuando pasa por detrás.

El texto que va sobre fondo negro, de lado a lado de la pantalla.

<div class="fr-jr-band fr-block-ink">
  <p>El texto que va sobre fondo negro, de lado a lado de la pantalla.</p>
</div>

Número que cuenta

Cuenta desde cero al aparecer. Poné el mismo número en data-fr-to y adentro.

800parejas de más de 45 países

<p class="fr-jr-stat" data-fr-to="800"><span class="fr-jr-n">800</span><span>parejas de más de 45 países</span></p>

Pregunta y respuesta

Para entrevistas. Un bloque por pregunta.

¿La pregunta?

La respuesta.

<div class="fr-jr-qa">
  <h3>¿La pregunta?</h3>
  <p>La respuesta.</p>
</div>

Foto fija con scroll

La pieza fuerte: la foto se queda quieta y va cambiando mientras el texto avanza. Una foto por paso, máximo 5. Guardala para el momento importante de la nota — si la usás todo el tiempo pierde el efecto.

Se ve en la nota, no acá: ocupa toda la pantalla.

<div class="fr-jr-scrolly">
  <figure class="fr-jr-scrolly__media">
    <img src="PEGAR-LINK-DE-FOTO?width=1400" alt="" loading="lazy" decoding="async">
    <img src="PEGAR-LINK-DE-FOTO?width=1400" alt="" loading="lazy" decoding="async">
    <img src="PEGAR-LINK-DE-FOTO?width=1400" alt="" loading="lazy" decoding="async">
  </figure>
  <div class="fr-jr-scrolly__step"><p>Lo que se lee sobre la primera foto.</p></div>
  <div class="fr-jr-scrolly__step"><p>Sobre la segunda.</p></div>
  <div class="fr-jr-scrolly__step"><p>Sobre la tercera.</p></div>
</div>

Productos dentro de la nota

Va en un párrafo solo, sin nada más. Cambiá los nombres por los de tus productos: son el final de la dirección web de cada uno (freres.ar/products/esto-de-acá). Hasta 6 por bloque.

[[shop:remera-regular-freres-negro, jean-wide-acido]]

Video de YouTube

Va arriba de todo, apenas debajo del título. Reemplazá PEGAR-ID-DEL-VIDEO por el código que aparece en la dirección del video de YouTube (lo que va después de v=).

<div class="fr-jr-video">
  <iframe src="https://www.youtube.com/embed/PEGAR-ID-DEL-VIDEO" title="" allowfullscreen loading="lazy"></iframe>
</div>

Cita grande — tres formas de aparecer

Bajá despacio y mirá cómo entra cada una. Elegí la que más te guste y usamos esa en todo el Journal.

Aparecer: las palabras suben de tono, de a poco.

<blockquote class="fr-jr-quote">La frase que querés destacar.<cite>Quién lo dijo</cite></blockquote>

Caer: cada palabra baja a su lugar con un rebote.

<blockquote class="fr-jr-quote fr-jr-quote--caer">La frase que querés destacar.<cite>Quién lo dijo</cite></blockquote>

Enfocar: entran borrosas y se resuelven.

<blockquote class="fr-jr-quote fr-jr-quote--foco">La frase que querés destacar.<cite>Quién lo dijo</cite></blockquote>

Clip de video (en vez de una foto)

Un video corto que se repite solo, sin sonido y sin controles — como una foto que se mueve. Arranca cuando entra en pantalla y se frena cuando sale, así no gasta batería ni datos de más.

<video class="fr-jr-clip" src="PEGAR-LINK-DEL-VIDEO.mp4" autoplay muted loop playsinline></video>

Dos clips lado a lado:

<div class="fr-jr-clips">
  <video src="PEGAR-LINK-DEL-VIDEO.mp4" autoplay muted loop playsinline></video>
  <video src="PEGAR-LINK-DEL-VIDEO.mp4" autoplay muted loop playsinline></video>
</div>

Antes de subirlo: un video del celular pesa entre 70 y 300 MB y no se puede publicar así. Pasámelo y te lo dejo en 1 o 2 MB, o corré ./scripts/clip-journal.sh video.MOV 8. Después lo subís en Contenido → Archivos, copiás el link y lo pegás acá. Máximo 20 MB por archivo, y no más de dos o tres clips por nota.

Video con texto al lado

Un video del celular al costado del texto, en vez de a todo el ancho. Sirve igual para los verticales (9:16) que para los apaisados: el video conserva su forma real, no se recorta. En el celular se apila solo: video arriba, texto abajo.

Refugio Frères, Cabrera 5801.

Detrás de escena

La mesa

Dos cámaras, cuatro sillas y una tarde entera. Así se grabó la primera entrevista de Tiempos de Frères.

<div class="fr-jr-vt fr-jr-vt--alto">
  <div class="fr-jr-vt__media">
    <video src="PEGAR-LINK-DEL-VIDEO.mp4" autoplay muted loop playsinline></video>
    <p class="fr-jr-vt__pie">Pie del video, si hace falta.</p>
  </div>
  <div class="fr-jr-vt__txt">
    <p class="fr-jr-vt__label">Etiqueta corta</p>
    <h3>Un título de dos o tres palabras</h3>
    <p>Dos o tres renglones que cuenten lo que se ve en el video. Corto: si es largo, el texto queda más alto que el video y se desarma.</p>
  </div>
</div>

Para un video vertical va fr-jr-vt--alto (ocupa menos ancho). Para uno apaisado o un YouTube, sacale esa clase. Con fr-jr-vt--der el video pasa al otro lado: si ponés dos seguidos, alterná — si van todos iguales queda plano.

<div class="fr-jr-vt fr-jr-vt--alto fr-jr-vt--der">
  <div class="fr-jr-vt__media">
    <iframe src="https://www.youtube.com/embed/PEGAR-ID-DEL-VIDEO" title="Video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
  </div>
  <div class="fr-jr-vt__txt">
    <p class="fr-jr-vt__label">Etiqueta corta</p>
    <h3>Un título de dos o tres palabras</h3>
    <p>Dos o tres renglones que cuenten lo que se ve en el video.</p>
  </div>
</div>

El texto tiene que ser corto. Tres o cuatro renglones como máximo: si se pasa, queda más alto que el video y el bloque se desbalancea. Si tenés más para contar, poné el video solo y seguí con un párrafo normal abajo.

Frase que se corrige sola

La palabra vieja se tacha y aparece la nueva. Sirve cuando hay un antes y un después de verdad: lo que era y lo que terminó siendo. Si no hay ese cambio real, es adorno y se nota. Una sola corrección por frase — dos no se siguen con la vista.

Veinte años ~~tocando~~ cantando cumbia con los mismos amigos.

<p class="fr-jr-reescribe">Veinte años <s>tocando</s> <b>cantando</b> cumbia con los mismos amigos.</p>

Lo tachado va entre <s> y lo nuevo entre <b>. Si alguien tiene el celular en modo "menos movimiento", ve la frase ya corregida y se entiende igual.

Aparte que se despliega

Para el dato que suma pero frena la lectura: queda cerrado y lo abre el que quiere. No usa nada raro, así que anda en cualquier celular y Google lo lee igual.

Por qué el buzo es cábala

Lo estrenó en Dallas y ganaron. Después lo llevó a Kansas con cuarenta grados, en la mochila, sin ponérselo. Con ese buzo está en la foto con Scaloni.

<details class="fr-jr-nota">
  <summary>El título del aparte</summary>
  <p>El dato de más: el que enriquece pero corta el hilo si va en el medio del cuerpo.</p>
</details>

Si algo no se ve como esperabas, avisame y lo arreglo.