Escenario

En este caso voy a escenificar el artículo en otra experiencia personal. En cuestión, utilizando el Content Query Web Part para mostrar un resumen de noticias publicadas en un subsitio, me vi en la obligación de personalizar los campos de éste para poder mostrar la imagen “Imagen de la página (PublishingPageImage)” que contiene cada una de las noticias.

Noticia

Content Query Web Part

 

NOTA: Aunque estoy escenificando la situación en mi caso personal, la solución propuesta se aplica a cualquier otro caso en el que necesitemos algún campo más, aparte de los que ya están accesibles por defecto cuando usamos el CQWP.

 

Solución

En primer lugar, lo que he hecho es configurar el CQWP para obtener los elementos de la lista tal y como muestro en las siguientes imágenes

NOTA: El estilo del elemento es el que describí en este otro artículo en el que añadí los campos que quería mostrar en un principio.

 

Una vez hecho esto, obtuve el resumen de noticias esperado con la siguiente forma:

 

En un principio, este formato es válido pero, ahora quiero que se muestre también la imagen que se añadió en la noticia.

Para ello, como la imagen no es un campo accesible por defecto desde el CQWP, tendremos que añadírsela mediante los siguientes pasos.

  • Exportar el CQWP a un fichero de texto
  • Guardar el fichero de texto que se genera
  • Editar el fichero, en este caso “Noticias.webpart” con cualquier editor como por ejemplo “Notepad” y buscar la propiedad CommonViewFields que, por defecto viene de la siguiente forma 
<property name="CommonViewFields" type="string"/>
  • Agregarle los campos que queramos obtener en el CQWP y guardar el fichero 
<property name="CommonViewFields" type="string">
    PublishingPageImage,Image;
</property>
  • Posteriormente, ir a la galería de elementos web que se encuentra en la administración del sitio principal “Acciones del sitio –> Galerías –> Elementos web”
  • Cargar el Content Query Web Part en la galería

  • Añadir el Content Query Web Part que acabamos de importar en la página donde lo necesitemos
  • Configurar el Content Query Web Part y añadir la imagen como campo a mostrar
  • Y por último añadir el campo al “Estilo del elemento (ItemStyle)” que se encuentra en Style Library –> XSL Style Sheets –> ItemStyle.xsl 
<xsl:if test="@PublishingPageImage != ''">
        <xsl:value-of select="@PublishingPageImage" disable-output-escaping="yes"/>
</xsl:if>

 

Con lo que nos quedaría: (Recordar que este estilo personalizado lo definí en este otro artículo)

     <xsl:template name="PromoturSummaryWithImage" match="Row[@Style='PromoturSummaryWithImage']" mode="itemstyle">
        <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="PlainBody">
            <xsl:call-template name="GSC.RemoveHtml">
                <xsl:with-param name="String" select="@Description" />
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="SafePublishingPageImage">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="PublishingPageImage"/>
            </xsl:call-template>
        </xsl:variable>

        <div class="divPromoturNew">
            <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
            <div class="divTitle">
                <a href="{$SafeLinkUrl}" title="{@LinkToolTip}" class="linkTitle">
                  <xsl:if test="$ItemsHaveStreams = 'True'">
                    <xsl:attribute name="onclick">
                      <xsl:value-of select="@OnClickForWebRendering"/>
                    </xsl:attribute>
                  </xsl:if>
                  <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
                    <xsl:attribute name="onclick">
                      <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                    </xsl:attribute>
                  </xsl:if>
                  <xsl:value-of select="$DisplayTitle" disable-output-escaping="yes" />
                </a>
            </div>
            <div class="divAdditionalData">
                por <xsl:value-of select="@Author" /> - <xsl:value-of select="ddwrt:FormatDateTime(string(@Created) ,1033 ,'dd-MM-yyyy')" />
            </div>            
            <div class="divDescription">
                <xsl:if test="@PublishingPageImage != ''">
                    <xsl:value-of select="@PublishingPageImage" disable-output-escaping="yes"/>
                </xsl:if>
                <xsl:value-of select="substring($PlainBody, 1, 350)" disable-output-escaping="yes" />...
                <a href="{$SafeLinkUrl}" title="{@LinkToolTip}" class="linkMore">Leer más</a>
            </div>
        </div>
    </xsl:template>

 

Resultado

Con esto habremos conseguido mostrar la imagen en nuestro resumen de noticias hecho con un Content Query Web Part (CQWP)