1. b2evolution CMS User Manual
  2. Developer Reference
  3. Website Skins/Themes
  4. Skin Tags / API
  5. Item Tags
  6. Template Tag: Item Images

Template Tag: Item Images

Display the images linked to the current Post/Item.

Example

Quick Template

[Item:images|before=<div class="evo_images">|after=</div>|image_size=fit-720x500]

PHP Template

$Item->get_images( array(
				'before'                     => '<div>',
				'before_image'               => '<div class="image_block">',
				'before_image_legend'        => '<div class="image_legend">',
				'after_image_legend'         => '</div>',
				'after_image'                => '</div>',
				'after'                      => '</div>',
				'image_size'                 => 'fit-720x500',
				'image_size_x'               => 1, // Use '2' to build 2x sized thumbnail that can be used for Retina display
				'image_link_to'              => 'original', // Can be 'original' (image) or 'single' (this post)
				'limit'                      => 1000, // Max # of images displayed
				'before_gallery'             => '<div class="bGallery">',
				'after_gallery'              => '</div>',
				'gallery_image_size'         => 'crop-80x80',
				'gallery_image_limit'        => 1000,
				'gallery_colls'              => 5,
				'gallery_order'              => '', // 'ASC', 'DESC', 'RAND'
				'gallery_link_rel'           => 'lightbox[p'.$this->ID.']',
				'restrict_to_image_position' => 'teaser,teaserperm,teaserlink,aftermore', // 'teaser'|'teaserperm'|'teaserlink'|'aftermore'|'inline'|'cover'
				'data'                       =>  & $r,
				'get_rendered_attachments'   => true,
				'links_sql_select'           => '',
				'links_sql_orderby'          => 'link_order',
    ) );

Parameters

Param

Default

Usage

before

<div>

Displayed before all the images.

before_image

<div class="image_block"> for PHP templates
<figure class="evo_image_block"> for quick templates

Displayed before each image.

before_image_legend

<div class="image_legend"> for PHP templates
<div class="evo_image_legend"> for quick templates

Displayed before the image legend.

after_image_legend

</div>

Displayed after the image legend.

after_image

</div>

Displayed after each image.

after

</div>

Displayed after all the images.

image_size

fit-720x500

Image size to fit.

image_size_x

1

Use 2 to build 2x sized thumbnail that can be used for Retina display

image_sizes

NULL

Simplified "sizes=" attribute for browser to select correct size from "srcset=". Must be set DIFFERENTLY depending on WIDGET/CONTAINER/SKIN LAYOUT. Each time we must estimate the size the image will have on screen. Sample values: (max-width: 430px) 400px, (max-width: 670px) 640px, (max-width: 991px) 720px, (max-width: 1199px) 698px, 848px

image_link_to

original

Where do we want to link to when the image is clicked. Possible values: original (image), single (post), a URL or empty.

target_blog

''

Used when image_link_to = single.

post_navigation

''

Used when image_link_to = single.

nav_target

NULL

Used when image_link_to = single.

limit

1000

Maximum of images displayed. If 'limit' => '#' then no limitation.

before_gallery

<div class="bGallery">

after_gallery

</div>

gallery_image_size

crop-80x80

gallery_image_limit

1000

gallery_colls

5

gallery_order

''

Possible values ASC, DESC, RAND

gallery_link_rel

'lightbox[p'.$this->ID.']'

restrict_to_image_position

teaser,teaserperm,teaserlink,aftermore

Possible values: teaser, teaserperm, teaserlink, aftermore, inline, cover.
#teaser_all => teaser,teaserperm,teaserlink,
#cover_and_teaser_all => cover,teaser,teaserperm,teaserlink

placeholder

''

HTML to be displayed if no image; possible codes: #folder_icon

data

& $r

get_rendered_attachments

true

links_sql_select

''

links_sql_orderby

link_order

Return value

This tag displays content only, it does not have a return value.

Created by • Last edit by on 2020-03-26 07:47 • •

No feedback yet