Customizando os portlets "Notícias e Ultimas Notícias" para visualizar thumbnails (imagen reduzida)

Um item interessante é o fato de podermos visualizar as imagens das notícias junto a chamada das mesmas na página inicial e também junto a página de notícias. Para conseguirmos isso no Portal Modelo 1.0 temos que customizar os portlet_noticias e o portlet_noticia_destaque. Mas façamos isso no passo a passo.

1o Passo - Acesse a ZMI do Zope (/manage), através do endereço http://IPDOSEUSERVIDOR:8180/manage

2o Passo - Na barra do lado esquerdo, clique sobre a pasta portal_skins.

3o Passo - Na aba contens, clique sobre a pasta ILPortalCasas_public

4o Passo - Agora iremos customizar o portlet_noticia_destaque, para isso clique sobre o mesmo, ao abrir clique no botão customize

5o Passo - Substitua o código do portlet pelo código abaixo:

<html xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      i18n:domain="plone">

<body>

<!-- The news box -->

<div metal:define-macro="portlet"
     tal:define="box_id string:destaque;
                 portal_publicator nocall:here/portal_publicator;
                 pb python:portal_publicator.getPublicationBoxById(box_id);
                 isVisible pb/visible;"
     tal:condition="python:template.getId()!='destaque' and isVisible">

    <div tal:define="box_items python:pb['items']">

          <a href=""
             tal:condition="python:checkPermission('Review portal content', here)"
             tal:attributes="href string:${portal_url}/publicator_edit_form?box_id=${box_id}">
              <img src="" alt="Edit" title="Edit" height="16" width="16"
                   tal:attributes="src string:${portal_url}/publicator_edit_icon.gif"
                   i18n:domain="publicator"
                   i18n:attributes="alt; title;" />
          </a>

            <tal:block tal:repeat="obj box_items">

                <div tal:define="item_id obj/Id;
                                 item_title obj/Title;
                                 item_description obj/Description;
                                 item_image_caption obj/ImageCaption|python:0;
                                 item_url obj/RelativeContentURL;
                                 new_window obj/NewWindow;
                                 item_icon obj/Icon;
                                 item_date obj/Date;"
                     tal:condition="python:item_url">
                    <h1><span tal:replace="python:test(item_title, item_title, item_id)">Title</span></h1>

                    <div metal:use-macro="here/document_byline/macros/byline">
                       Get the byline - contains details about author and modification date.
                    </div>

                    <div tal:condition="not:item_image_caption">
                    <div class="newsImageContainer">
                      <img src=""
                           alt="Imagem da Noticia"
                           tal:attributes="src string:${item_url}/image_mini" />
                    </div>
                    </div>

                    <div>
                      <a href=""
                         tal:attributes="href string:${portal_url}/${item_url};
                                         title item_description;
                                         target python:test(new_window, '_blank', None);">
                          <span tal:replace="python:test(item_description)">Description</span>
                      </a>
                    </div>
                   <br />

                </div>

            </tal:block>

            <div class="portletFooter">

                <a href=""
                   tal:attributes="href string:${portal_url}/noticias">
                    Leia mais ...
                </a>

            </div>


    </div>

</div>

</body>

</html>

6o Passo - Agora iremos customizar o portlet_noticias, para isso clique sobre o mesmo, ao abrir clique no botão customize.

7o Passo - Substitua o código do portlet pelo código abaixo:

<html xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      i18n:domain="plone">

<body>

<!-- The news box -->

<div metal:define-macro="portlet"
     tal:define="box_id string:noticia;
                 portal_publicator nocall:here/portal_publicator;
                 pb python:portal_publicator.getPublicationBoxesInfo(box_id);
                 isVisible pb/visible;"
     tal:condition="python:template.getId()!='noticia' and isVisible">

    <dl class="portlet" id="portal-noticia"
         tal:define="box_items python:pb['items']">

        <dt class="portletHeader">Ultimas Noticias


          <a href=""
             tal:condition="python:checkPermission('Review portal content', here)"
             tal:attributes="href string:${portal_url}/publicator_edit_form?box_id=${box_id}">
              <img src="" alt="Edit" title="Edit" height="16" width="16"
                   tal:attributes="src string:${portal_url}/publicator_edit_icon.gif"
                   i18n:domain="publicator"
                   i18n:attributes="alt; title;" />
          </a>

        </dt>
            <tal:block tal:repeat="obj box_items">

                <dd tal:define="oddrow repeat/obj/odd;
                                 item_id obj/Id;
                                 item_title obj/Title;
                                 item_description obj/Description;
                                 item_image_caption obj/ImageCaption|python:0;
                                 item_url obj/RelativeContentURL;
                                 new_window obj/NewWindow;
                                 item_icon obj/Icon;
                                 item_date obj/Date;"
                     tal:attributes="class python:test(oddrow, 'portletItem', 'portletItem')"
                     tal:condition="python:item_url">
                    <b><span tal:replace="python:test(item_title, item_title, item_id)">Title</span></b>

  <div tal:condition="not:item_image_caption">
  <div class="newsImageContainer1">
  <img src=""
  alt="Imagem da Noticia"
  tal:attributes="src string:${item_url}/image_thumb" />
  </div>
  </div>
     
                   <a href=""
                       tal:attributes="href string:${portal_url}/${item_url};
                                       title item_description;
                                       target python:test(new_window, '_blank', None);">
                        <span tal:replace="python:test(item_description)">Description</span>
                    </a>

<div class="portletFooter">
           <div align="right"><a href=""
               tal:attributes="href string:${portal_url}/${item_url}">
               <font color="#666666">leia mais..</font>
            </a></div>
</div>

                </dd>

            </tal:block>

            <dd class="portletFooter">

                <a href=""
                   tal:attributes="href string:${portal_url}/noticias">
                    Todas as noticias
                </a>

            </dd>


    </dl>

</div>

</body>

</html>

8o passo - Para finalizar abra o arquivo portalCasas.css, que está dentro da pasta /portal/portal_skins/custom/ e adicione o seguinte código. Ao finalizar clique no botão "Save Changes"

/************ IMAGENS DAS NOTICIAS **************/
.newsImageContainer {
   float:left;
   margin: 0em 1em 0em 0;
   width: 200px;
   height: 150px;
}
.newsImageContainer .discreet {
   margin: 0em 0em 0em 0em;
}
.newsImageContainer1 {
   float:left;
   margin: 0em 2em 0em 0;
   width: 120px;
   height: 90px;
}
/********** FIM DA IMAGENS NOTICIAS ***********/

Observação: Caso esteja alterando o código dos portlets pela ZMI e utilizar acentos no portlet header, poderá haver erros, que podem ser contornados removendo os acentos ou substituindo por html.

Última modificação 10 anos atrás Última modificação em 02/12/2009 08:25:28
 

The contents and data of this website are published under license:
Creative Commons 4.0 Brasil - Atribuir Fonte - Compartilhar Igual.