Ferramentas Pessoais
Você está aqui: Página Inicial → Artigos → Criando um esquema de banners rotativos usando o Type: Image
Navegação
Acessar


Esqueceu sua senha?
Novo usuário?
 

Criando um esquema de banners rotativos usando o Type: Image


Neste arquivo, iremos demonstrar um pequeno exemplo de banners rotativos usando o tipo Image do plone.

O primeiro passo é você criar uma pasta chamada "banners" ou outra de acordo com a sua necessidade, mais não se esqueça de mudar no seu page_template caso crie com um nome diferente do sugerido. Depois da sua pasta criada, adicione algumas imagens dentro dela, e não se esqueça de publicar os objetos criados. Segue algumas imagens para testar este artigo:

BANNER 1

BANNER 2

BANNER 3

O passo seguinte crie um page_template com o seguite código:

<html xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      i18n:domain="plone">
<body>
<div metal:define-macro="busca_banners"
     tal:define="physical_path python: getattr(context,'banners').getPhysicalPath();
                 path python:'/'.join(physical_path);
                 banners python:here.portal_catalog(path=path,portal_type='Image',review_state='published');
                 results python:random.sample(banners,2);">

     <tal:links tal:repeat="obj results">
       <img src="#" tal:attributes="src string:${path}/${obj/id}/image;
                                    title obj/Title;" title="#"/>
     </tal:links>
</div>
</body>
</html>

Explicando o código


Definindo uma macro:

<div metal:define-macro="busca_banners"
Definindo o path de onde será efetuada a busca dos banners:
tal:define="physical_path python: getattr(context,'banners').getPhysicalPath();
            path python:'/'.join(physical_path);
Efetuando a busca no catalogo, passando o path, o tipo de conteúdo e o status em que o objeto se encontra:
banners python:here.portal_catalog(path=path,portal_type='Image',review_state='published');
Passando o resultado da busca "banner" para a variavel results e que ele execute de forma randômica e o número "2" que está no código é o número de imagens que ele vai buscar:
results python:random.sample(banners,2);">
Está linha de comando fará com que este bloco de comando seja repetido enquanto houver resultado:
<tal:links tal:repeat="obj results">
Recuperando a imagem do objeto em loop, a string "path" está inclusa para que o caminho da imagem fique completa.Para acessar um atributo do objeto em loop, basta colocar "obj/o_atributo_desejado" olhe o código abaixo:
<img src="#" tal:attributes="src string:${path}/${obj/id}/image;
                             title obj/Title;" title="#"/>
Fechando a tal:links
</tal:links>
Fechando a div da macro "busca_banners"
</div>

Pronto, agora é só você usar está macro aonde desejar!