XML Feeds
Link: http://wirehopper.com/cc_image-1.0-1.ezpkg
Using Creative Commons licensed images allows you to include some beautiful photos and illustrations on your site.
It’s really important to add the appropriate credits when you’re using the images, to comply with the license, but more importantly, to give credit to the creator. To properly credit the work, review this.
To make it easier to credit the images in eZ publish, I created a class and supporting templates. The content class package export (the link above) includes the class definition. The templates I used are below:
design/site/override/templates/full/cc_image.tpl
Code:
{* CC_Image - Full view *} | |
{let sort_order=$node.parent.sort_array[0][1] | |
sort_column=$node.parent.sort_array[0][0] | |
sort_column_value=cond( $sort_column|eq( 'published' ), $node.object.published, | |
$sort_column|eq( 'modified' ), $node.object.modified, | |
$sort_column|eq( 'name' ), $node.object.name, | |
$sort_column|eq( 'priority' ), $node.priority, | |
$sort_column|eq( 'modified_subnode' ), $node.modified_subnode, | |
false() ) | |
previous_image=fetch_alias( subtree, hash( parent_node_id, $node.parent_node_id, | |
class_filter_type, include, | |
class_filter_array, array( 'cc_image' ), | |
limit, 1, | |
attribute_filter, array( and, array( $sort_column, $sort_order|choose( '>', '<' ), $sort_column_value ) ), | |
sort_by, array( array( $sort_column, $sort_order|not ), array( 'node_id', $sort_order|not ) ) ) ) | |
next_image=fetch_alias( subtree, hash( parent_node_id, $node.parent_node_id, | |
class_filter_type, include, | |
class_filter_array, array( 'cc_image' ), | |
limit, 1, | |
attribute_filter, array( and, array( $sort_column, $sort_order|choose( '<', '>' ), $sort_column_value ) ), | |
sort_by, array( array( $sort_column, $sort_order ), array( 'node_id', $sort_order ) ) ) )} | |
| |
<div class="content-view-full"> | |
<div class="class-image"> | |
| |
<h1>{$node.name|wash}</h1> | |
| |
{if is_unset( $versionview_mode )} | |
<div class="content-navigator"> | |
{if $previous_image} | |
<div class="content-navigator-previous"> | |
<div class="content-navigator-arrow">« </div><a href={$previous_image[0].url_alias|ezurl} title="{$previous_image[0].name|wash}">{'Previous image'|i18n( 'design/base' )}</a> | |
</div> | |
{else} | |
<div class="content-navigator-previous-disabled"> | |
<div class="content-navigator-arrow">« </div>{'Previous image'|i18n( 'design/base' )} | |
</div> | |
{/if} | |
| |
{if $previous_image} | |
<div class="content-navigator-separator">|</div> | |
{else} | |
<div class="content-navigator-separator-disabled">|</div> | |
{/if} | |
| |
{let forum=$node.parent} | |
<div class="content-navigator-forum-link"><a href={$forum.url_alias|ezurl}>{$forum.name|wash}</a></div> | |
{/let} | |
| |
{if $next_image} | |
<div class="content-navigator-separator">|</div> | |
{else} | |
<div class="content-navigator-separator-disabled">|</div> | |
{/if} | |
| |
{if $next_image} | |
<div class="content-navigator-next"> | |
<a href={$next_image[0].url_alias|ezurl} title="{$next_image[0].name|wash}">{'Next image'|i18n( 'design/base' )}</a><div class="content-navigator-arrow"> »</div> | |
</div> | |
{else} | |
<div class="content-navigator-next-disabled"> | |
{'Next image'|i18n( 'design/base' )}<div class="content-navigator-arrow"> »</div> | |
</div> | |
{/if} | |
</div> | |
{/if} | |
| |
<div class="attribute-image"> | |
<p>{attribute_view_gui attribute=$node.data_map.image image_class=large}</p> | |
</div> | |
| |
<div class="attribute-caption"> | |
{attribute_view_gui attribute=$node.data_map.caption} | |
</div> | |
| |
<div class="attribute-attribution"> | |
{'Image credit'|i18n( 'design/base' )} » {attribute_view_gui attribute=$node.data_map.attribution} | |
</div> | |
| |
<div class="attribute-creative-commons-license"> | |
{'Creative Commons License'|i18n( 'design/base' )}: {attribute_view_gui attribute=$node.data_map.creative_commons_license} | |
</div> | |
| |
</div> | |
</div> | |
{/let} |
design/site/override/templates/line/cc_image.tpl
Code:
{* CC_Image - Line view *} | |
| |
<div class="content-view-line"> | |
<div class="class-image"> | |
| |
<div class="content-image"> | |
<p style="float:left;width:125px">{attribute_view_gui attribute=$node.data_map.image image_class=small href=$node.url_alias|ezurl()} </p><h2>{$node.name}</h2> | |
{attribute_view_gui attribute=$node.data_map.caption} | |
</div> | |
| |
</div> | |
</div> |
design/site/override/templates/galleryslide/cc_image.tpl
Code:
{* CC_Image - Gallery slide view *} | |
| |
<div class="content-view-galleryslide"> | |
<div class="class-image"> | |
| |
<h1>{$parent_name|wash()}: {$node.name|wash()}</h1> | |
| |
<div class="attribute-image"> | |
<p>{attribute_view_gui attribute=$node.data_map.image image_class=large}</p> | |
</div> | |
| |
<div class="attribute-caption"> | |
{attribute_view_gui attribute=$node.data_map.caption} | |
</div> | |
| |
</div> | |
</div> |
design/site/override/templates/embed/cc_image.tpl
Code:
<div class="content-view-embeddedmedia"> | |
<div class="class-image"> | |
| |
<div class="attribute-image"> | |
<p> | |
{if or( is_set( $link_parameters.href ),$object.data_map.attribution.has_content )} | |
{attribute_view_gui attribute=$object.data_map.image image_class=first_set( $object_parameters.size,ezini( 'ImageSettings', 'DefaultEmbedAlias', 'content.ini' ), '' ) href=first_set( $link_parameters.href,$object.main_node.url )|ezurl target=$link_parameters.target link_class=first_set( $link_parameters.class, '' ) link_id=first_set( $link_parameters['xhtml:id'], '' ) link_title=first_set( $link_parameters['xhtml:title'], $object.data_map.attribution.content.data_text, '' )} | |
{else} | |
{if is_set($object_parameters.size)} | |
{attribute_view_gui attribute=$object.data_map.image image_class=$object_parameters.size} | |
{else} | |
{attribute_view_gui attribute=$object.data_map.image image_class=ezini( 'ImageSettings', 'DefaultEmbedAlias', 'content.ini' )} | |
{/if} | |
{/if} | |
</p> | |
</div> | |
| |
{if $object.data_map.caption.has_content} | |
{if is_set($object.data_map.image.content[$object_parameters.size].width)} | |
<div class="attribute-caption" style="width: {$object.data_map.image.content[$object_parameters.size].width}px"> | |
{else} | |
<div class="attribute-caption"> | |
{/if} | |
{attribute_view_gui attribute=$object.data_map.caption} | |
</div> | |
{/if} | |
</div> | |
</div> |
Template override settings. I used the default image class for some cases.
settings/siteaccess/site/override.ini.append.php
Code:
[cc_image_full] | |
Source=node/view/full.tpl | |
MatchFile=full/cc_image.tpl | |
Subdir=templates | |
Match[class_identifier]=cc_image | |
| |
[cc_image_galleryslide] | |
Source=node/view/galleryslide.tpl | |
MatchFile=galleryslide/cc_image.tpl | |
Subdir=templates | |
Match[class_identifier]=cc_image | |
| |
[cc_image_embed] | |
Source=content/view/embed.tpl | |
MatchFile=embed/cc_image.tpl | |
Subdir=templates | |
Match[class_identifier]=cc_image | |
| |
[cc_image_embed-inline] | |
Source=content/view/embed-inline.tpl | |
MatchFile=embed-inline/image.tpl | |
Subdir=templates | |
Match[class_identifier]=cc_image | |
| |
[cc_image_embed_node] | |
Source=node/view/embed.tpl | |
MatchFile=embed/cc_image.tpl | |
Subdir=templates | |
Match[class_identifier]=cc_image | |
| |
[cc_image_embed-inline_node] | |
Source=node/view/embed-inline.tpl | |
MatchFile=embed-inline/image.tpl | |
Subdir=templates | |
Match[class_identifier]=cc_image | |
| |
[cc_image_line] | |
Source=node/view/line.tpl | |
MatchFile=line/cc_image.tpl | |
Subdir=templates | |
Match[class_identifier]=cc_image | |
| |
[cc_image_galleryline] | |
Source=node/view/galleryline.tpl | |
MatchFile=galleryline/image.tpl | |
Subdir=templates | |
Match[class_identifier]=cc_image |
I tested this with a custom site design, but it was based on one of the eZ site styles, and very few of the templates were modified. It should integrate well with most designs, but customization is ‘eZ’ enough. 
I used the standard, default eZ publish image class as the base for the templates.
Permalink