Documentación Bootic

Todo la información para empezar a vender en línea.

Subiendo imágenes en el editor

Subir imágenes

Abajo a la derecha en el editor de plantillas puedes subir archivos de tipo .gif, .png y .jpg. Bootic te muestra los archivos subidos con su nombre completo.

Estas imágenes puedes ser usadas tanto en tus plantillas CSS como HTML.

Insertando imágenes en plantillas HTML

Abre la plantilla que quieras (por ejemplo layout.html) y agrega una etiqueta de image <img>. En el atributo src debes insertar el nombre del archivo que subiste, tal cual aparece en la lista de archivos subidos, usando el filtro asset_url, así:

<img src="{{ 'logo.png' | asset_url }}" alt="Logo de mi tienda" />

El filtro asset_url genera la URL al directorio donde Bootic guarda tus archivos. Una vez que guardas la plantilla, Bootic genera dinámicamentte la ruta completa, que se ve más o menos así:

<img src="http://static.bootic.net/uploads/themes/32/logo.png" alt="Logo de mi tienda" />
Tip: si situas el cursor donde quieres insertar la imagen y a continuación haces click en la imagen en la lista de archivos subidos, Bootic inserta el nombre de imagen por ti.

Insertando imágenes en plantillas CSS.

En CSS basta con usar el nombre de la imágen directamente. Bootic guarda las plantillas CSS y las imágenes subidas en el mismo directorio, por lo que no es necesario usar el filtro asset_url.

Este ejemplo situa la imagen "fondo.gif" como imagen de fondo del elemento body (por ejemplo en la plantilla master.css)

body {
  font-size: 12px;
  background: url(fondo.gif);
}

Favicon

El "favicon" es el ícono del sitio que aparece en la barra de título del navegador, y es simplemente una imagen que puedes insertar en la plantilla layout.html. Los favicons normalmente están optimizados y tienen la extensión ".ico", y los puedes generar a partir de una imagen en otro formato (png, gif, jpg) usando un editor de imágenes como Phothoshop o incluso herramientas gratuitas online (puedes encontrar muchas en Google: http://www.google.co.uk/search?gcx=c&ix=c1&sourceid=chrome&ie=UTF-8&q=favico+generator)

Sube una imágen de 16x16px a la lista de archivos de tu editor de plantillas Bootic e inserta el siguiente código HTML en la sección HEAD de la plantilla layout.html.

<link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}" type="image/x-icon" />

"favico.ico" es la convención para estos archivos pero en verdad puedes nombrarlo como quieras.

Imágenes de productos

La colección product.images contiene las imágenes subidas a un producto por los administradores de la tienda.

Cada imagen tiene atributos que puedes usar para construir una galería o simplemente mostrar la primera.

El siguiente ejemplo muestra las 2 primeras imágenes del producto.

{% if product.has_images %}
  <div id="ficha-right" class="clearfix">
    <!-- big images (2) -->
    <ul id="img-big" class="assets clearfix">
      {% for image in product.images limit:2 %}
      <li class="img-big-{{ forloop.index }}">
        <a href="{{ image.large }}" title="{{product.model}}'s details" rel="lightbox[ficha]">
          <img src="{{ image.small }}" alt="{{ product.model }}" />
        </a>
      </li>
      {% endfor %}
    </ul>
    <!-- /big images -->
  </div>
{% endif %}

Cada imagen muestra el tamaño "small" (240x180px) dentro de un link que apunta a la versión "large" (800x600px). Esto es útil para usar librerías JavaScript para galerías de imágenes (como las excelentes Lightbox o FancyBox) o simplemente mostra la imagen grande en el navegador.

El fragmento a continuación muestra el resto de las imágenes de un producto (si es que tiene) en un tamaño menor ("thumbnail", de 75x75px).

{% if product.images | size > 2 %}
<!-- small images -->
<ul id="img-small" class="assets clearfix">
  {% for image in product.images offset: 2 %}
  <li>
    <a href="{{ image.large }}" title="{{product.model}}'s details" rel="lightbox[ficha]">
      <img src="{{ image.thumbnail }}" alt="{{ product.model }}" />
    </a>
  </li>
  {% endfor %}
</ul>
<!-- /small images -->
{% endif %}

Cada imagen de producto tiene los siguientes tamaños predefinidos:

  • thumbnail: 75x75
  • small: 240x180
  • medium: 500x375
  • large: 800x600

Si quieres obtener tamaños específicos, revisa la documentación sobre control avanzado de imágenes de productos.

Crea tu tienda hoy mismo. Sin compromisos. Ver planes