Documentação para o endpoint - carrouselv2

Este documento descreve a estrutura do payload JSON usado para enviar solicitações de conteúdo para a geração de carrosséis. A estrutura JSON permite que você especifique o conteúdo, layout e estilo dos slides do seu carrossel.

Estrutura Básica

A estrutura básica do payload JSON é a seguinte:

{
  "generate_zip": false,
  "template": "001",
  "background_color": "",
  "background_image": "",
  "output_filename": "",
  "slides": [
      {
          "text": "COM NOSSAS FERRAMENTAS VOCÊ PODE"
      },
      {
          "text": "CRIAR CARROSÉIS PARA INSTAGRAM"
      },
      {
          "text": "NUM PISCAR DE OLHOS!",
          "fonts_color_all": "#FFFFFF",
          "background_image": "https://i.imghippo.com/files/T8SCq1722862049.png"
      },
      {
          "text": "EXPERIMENTE NOSSA API E OBTENHA RESULTADOS!"
      }
  ]
}

Descrição dos Campos

Todos os campos são opcionais, exceto: template e slides

generate_zip: Booleano que indica se deve gerar um arquivo zip das imagens do carrossel (padrão: false)
template: O ID do modelo a ser usado (por exemplo, "001", "002", "005").
background_image: URL da imagem de fundo padrão a ser usada para todos os slides (opcional), caso uma imagem não seja fornecida, a background_color padrão é recomendada (padrão: "")
background_color: Código de cor Hex (por exemplo, #FFFFFF) para a cor de fundo padrão (usada se nenhuma imagem de fundo for fornecida) (padrão: "#FFFFFF")
slides: Uma matriz de objetos de slides, cada um representando um slide no carrossel.
- title: O título principal do slide (usado apenas no primeiro slide).
- summary: Um breve resumo ou subtítulo (normalmente usado apenas no primeiro slide).
- text: O texto principal do slide (se o título for usado, o texto será desativado)
- background_image: URL da imagem de fundo para este slide específico (opcional, substitui a padrão).
- background_color: Código de cor Hex para o fundo deste slide específico (opcional, substitui a padrão).
- image_url: O URL da imagem a ser incluída no slide (opcional).
- image_verticalPosition: Posicionamento vertical da imagem ("top", "center", "bottom") (padrão: "bottom")
- image_horizontalPosition: Posicionamento horizontal da imagem ("left", "center", "right") (padrão: "center")
- image_horizontalDimension: Como a imagem deve ser dimensionada horizontalmente ("fit", ou número de pixels para largura, note que os pixels devem ser informados entre "", exemplo: "500") (padrão: "fit")
- image_textPosition: Posição do texto em relação à imagem ("top", "bottom") (padrão: "top")

Imagens dos Slides e Posicionamento da Imagem

As imagens dos slides não devem ser colocadas no slide de título.

url

Localização do arquivo de imagem. A imagem deve ser acessível publicamente para funcionar. Uma opção é usar https://i.postimg.cc

Nos exemplos a seguir, o tamanho da mídia é 1080 x 1350 pixels e todas as margens são definidas para 100 pixels.

verticalPosition e textPosition

verticalPosition pode ser definido como: top, center ou bottom - especifica onde a imagem será colocada na área de conteúdo
textPosition pode ser definido como top ou bottom - especifica a localização do texto em relação à imagem

Quando verticalPosition é definido como top ou bottom, o texto é posicionado no lado oposto automaticamente, então textPosition é ignorado. Dois exemplos:

Exemplo de imagem 1

Quando verticalPosition é definido como center, textPosition deve ser especificado como top ou bottom

Exemplo de imagem 2

horizontalDimension e horizontalPosition

horizontalDimension pode ser definido como fit ou um número inteiro representando o número de pixels - especifica a largura da imagem, a altura será ajustada para manter as proporções originais da imagem
horizontalPosition pode ser definido como: top, center ou bottom - especifica o alinhamento horizontal da imagem

Quando horizontalDimension é definido como fit a imagem usará a extensão da área disponível dentro das margens

Exemplo de imagem 3

Quando horizontalDimension é definido como um número inteiro menor que a largura disponível, a altura será ajustada para manter as proporções originais da imagem, e horizontalPosition definirá o alinhamento horizontal da imagem. Exemplo de imagem 4

Substituições

Substituições permitem personalizar vários aspectos da aparência e comportamento do carrossel. Você pode substituir configurações específicas sem alterar o modelo inteiro. As substituições podem ser incluídas no mesmo nível dos dados principais (por exemplo, "background_color") ou em cada slide, veja o exemplo no final deste documento.

Importante: o slide substitui as configurações globais que substituem as configurações do modelo.

Chaves de Substituição Especiais

layout.margins.all: Define todas as margens (esquerda, direita, superior, inferior) para o mesmo valor.
fonts.all: Altera a fonte para todos os tipos de texto (título, resumo, conteúdo).
fonts.color.all: Altera a cor para todos os tipos de texto.

Exemplos de Substituições

{
  "layout_margins_all": 120,
  "fonts_all": "Arial.ttf",
  "fonts_color_all": "#000000",
  "fonts_title_size": 30,
  "layout_alignment": "left",
  "standard_dimensions": [1080, 1080],
  "layout_title_space": 80,
  "fonts_summary_color": "#FF0000"
}

Estrutura de Substituição

Aqui está uma lista abrangente de possíveis substituições:

Dimensões:

standard_dimensions (matriz de pixels que representam o tamanho da imagem, não é necessário se uma imagem de fundo for fornecida - exemplo [1080,1080], o padrão é [1080,1350])

Layout:

layout_margins_left (pixels)
layout_margins_right (pixels)
layout_margins_top (pixels)
layout_margins_bottom (pixels)
layout_margins_all (substituição especial para definir todas as margens de uma vez)
layout_title_space (% do espaço a ser usado pelo título principal, o espaço disponível sem as margens, exemplo: 60)
layout_section_spacing (espaço em pixels entre o título e o resumo)
layout_alignment (como o texto é alinhado: ("left", "center", "right"))
layout_vertical_alignment (como o texto dentro de seus limites é posicionado verticalmente: ("top", "center", "bottom"))

Fontes (veja mais sobre as fontes disponíveis abaixo):

fonts_all (substituição especial para alterar todas as fontes de uma vez)
fonts_color_all (substituição especial para alterar todas as cores das fontes de uma vez)
fonts_title_name
fonts_title_max_size - tamanho inicial que a ferramenta usará para ajustar ao espaço desejado
fonts_title_color
fonts_summary_name
fonts_summary_max_size - tamanho inicial que a ferramenta usará para ajustar ao espaço desejado
fonts_summary_color
fonts_content_name
fonts_content_max_size - tamanho inicial que a ferramenta usará para ajustar ao espaço desejado
fonts_content_color

Saída:

output_filename - define o nome de saída do arquivo

Debug:

debug - usado para desenhar linhas para verificar as margens (definir como true ou false)

Exemplo de imagem 3

Modelos

Template - 001

Template - 002

Template - 003

Template - 004

Template - 005

Fontes Disponíveis

Estas são fontes do Google, verifique mais detalhes no site do Google Fonts: https://fonts.google.com/

BebasNeue-Regular.ttf
Montserrat-Regular.ttf
OpenSans_Condensed-Bold.ttf
OpenSans_Condensed-Regular.ttf
OpenSans-Bold.ttf
OpenSans-Italic.ttf
OpenSans-Light.ttf
OpenSans-Medium.ttf
OpenSans-Regular.ttf
Oswald-Bold.ttf
Oswald-Light.ttf
Oswald-Medium.ttf
Oswald-Regular.ttf
PlaywriteAR-Regular.ttf
PlaywriteAR-Thin.ttf
Poppins-Bold.ttf
Poppins-Regular.ttf
Poppins-Thin.ttf
RobotoSlab-Black.ttf
RobotoSlab-Bold.ttf
RobotoSlab-Light.ttf
RobotoSlab-Regular.ttf
RobotoSlab-Thin.ttf

Notas Importantes sobre Substituições

Apenas as substituições especificadas serão aplicadas. Configurações não especificadas usarão os valores padrão do modelo selecionado.
Chaves de substituição inválidas serão ignoradas.
Substituições especiais como layout.margins.all, fonts.all e fonts.color.all fornecem maneiras convenientes de fazer alterações amplas.
A substituição de debug pode ser útil para solução de problemas, mas normalmente deve ser definida como false para uso em produção.
Tenha cautela ao substituir configurações de layout, pois mudanças significativas podem afetar o design geral e a legibilidade das suas imagens.

Melhores Práticas

Comece com um modelo que se aproxime do resultado desejado.
Use substituições com moderação para fazer ajustes específicos.
Teste seu carrossel com diferentes comprimentos de conteúdo para garantir o formato adequado.
Esteja atento aos contrastes de cores para legibilidade ao substituir cores.
Ao usar imagens, certifique-se de que elas sejam de alta qualidade e relevantes para o conteúdo.

Seguindo esta estrutura e diretrizes, você pode criar carrosséis personalizados e visualmente atraentes, adaptados às suas necessidades de conteúdo e branding.

Exemplo de JSON com várias configurações possíveis

{
  "generate_zip": false,
  "template": "001",
  "background_color": "",
  "background_image": "",
  "output_filename": "",
  "layout_margins_left": 100,
  "layout_margins_right": 100,
  "layout_margins_top": 135,
  "layout_margins_bottom": 135,
  "layout_title_space": 70,
  "layout_section_spacing": 50,
  "layout_alignment": "center",
  "layout_vertical_alignment": "top",
  "fonts_title_name": "Oswald-Bold.ttf",
  "fonts_title_max_size": 150,
  "fonts_title_color": "#FFFFFF",
  "fonts_summary_name": "RobotoSlab-Regular.ttf",
  "fonts_summary_max_size": 60,
  "fonts_summary_color":"#DDDDDD",
  "fonts_content_name": "OpenSans-Regular.ttf",
  "fonts_content_max_size": 80,
  "fonts_content_color": "#224466",
  "slides": [
    {
          "title": "O Som Hipnotizante das Baleias",
          "summary": "As vocalizações das baleias são melodias complexas e encantadoras que servem a vários propósitos em seu mundo subaquático.",
          "layout_alignment": "right",
          "layout_margins_all": 50,
          "layout_vertical_alignment": "center",
          "fonts_title_name": "Poppins-Bold.ttf"
      },
      {
          "text": "COM NOSSAS FERRAMENTAS VOCÊ PODE"
      },
           {
          "text": "CRIAR CARROSÉIS PARA INSTAGRAM",
          "layout_alignment": "left",
          "image_url": "https://example1.png",
          "image_verticalPosition": "top",
          "image_horizontalPosition": "right",
          "image_horizontalDimension": "fit",
          "image_textPosition": "bottom"
      },
      {
          "text": "NUM PISCAR DE OLHOS!",
          "fonts_color_all": "#7acc90",
          "background_image": "https://example2.png",
          "layout_alignment": "right",
          "image_url": "https://example3.png",
          "image_verticalPosition": "top",
          "image_horizontalPosition": "right",
          "image_horizontalDimension": "fit",
          "image_textPosition": "bottom"
      },
      {
          "text": "EXPERIMENTE NOSSA API E OBTENHA RESULTADOS!"
      }
  ]
}

Guia Básico

Templates