Simplify Liferay - Vídeo: Estilizando o Publicador de Conteúdos e Mídias | Método 1 - DDMFormFieldValuesMap

Notícias em Cards - Widget Template - DDMFormFieldValuesMap.ftl

<#if entries?has_content>
	<div class="container"> 
  <#list entries as entry>
		<#assign assetRenderer = entry.getAssetRenderer() />
		<#assign DDMFormFieldValuesMap = assetRenderer.getDDMFormValuesReader().getDDMFormValues().getDDMFormFieldValuesMap() />
    <#assign DDMFormFieldsReferencesMap = assetRenderer.article.DDMStructure.DDMForm.getDDMFormFieldsReferencesMap(true) />

    <div class="box">
      <h2>
        <#assign titleField = DDMFormFieldsReferencesMap['titulo'].name />
        <#assign title = DDMFormFieldValuesMap[titleField][0].getValue().getString(locale) />
        ${title} </h2>
      <p>
        <#assign authorField = DDMFormFieldsReferencesMap['autor'].name />
        <#assign author = DDMFormFieldValuesMap[authorField][0].getValue().getString(locale) />
        ${author}
      </p>
      <p>
        <#assign dateField = DDMFormFieldsReferencesMap['data'].name />
        <#assign date = DDMFormFieldValuesMap[dateField][0].getValue().getString(locale) />
        ${date}
      </p>
    </div>
  </#list>
  </div>
</#if>


<style>

.container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    align-content: space-between;
    gap: 30px 10px;
}

.container .box {
    border-radius: 5px;
    padding: 30px;
    border-top: 3px solid var(--red);
    box-shadow: 0px 15px 40px -20px hsl(229deg 6% 66%);
    transition: 0.25s;

    width: 500px;
    height: 100%;
    flex: 0 0 32%;
}

.container .box:hover {
    box-shadow: 0px 30px 40px -20px hsl(229deg 6% 66%);
}

.container .box p {
    color: hsl(229, 6%, 66%);
}

.container h2 {
    color: hsl(234, 12%, 34%);
    font-weight: 600;
}

</style>