How do I create grid record listing in Articles

NoGi · May 15, 2016

How can I create a recording listing template that will show results like this: https://invisionpower.com/third-party/providers/ but in a grid layout and with the image displayed (small square thumbnail).

From my previous post but I am lost with the suggestions. Needing a dummies guide to do or if someone already has a template I can use?

With the image inclusion, I've tried both:

{file="$record->record_image" extension="cms_Records"}
<p><img src="{file="$image" extension="cms_Records"}" /></p>

but a broken image is displayed as it's only returning forumurl/forum/uploads/ path instead of the image

opentype · May 15, 2016

40 minutes ago, NoGi said:


<p><img src="{file="$image" extension="cms_Records"}" /></p>

The $image should be $record->record_image or whatever variable is used in the specific template.

NoGi · May 15, 2016

57 minutes ago, opentype said:

The $image should be $record->record_image or whatever variable is used in the specific template.

OK sorted out the image issue:

<p><img src="{file="$row->record_image" extension="cms_Records"}" height="200" width="200" /></p>

It's $row, not $record in this case. I still can't get the grid layout to work though?

Aiwa · May 15, 2016

NoGi · May 16, 2016

Yes, that's the bit I can't get to work correctly:

{{$rowIds = array();}}
{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	{{$rowIds[] = $row->$idField;}}
{{endforeach}}
{{$iposted = ( $table AND method_exists( $table, 'container' ) AND $table->container() !== NULL ) ? $table->container()->contentPostedIn( null, $rowIds ) : array();}}

{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	<li class="cCmsRecord_row ipsDataItem ipsDataItem_responsivePhoto {{if $row->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $row, 'tableClass' ) && $row->tableClass()}}ipsDataItem_{$row->tableClass()}{{endif}} {{if $row->hidden()}}ipsModerated{{endif}}" data-rowID='{$row->$idField}'>
		{{if member.member_id}}
			<div class='ipsDataItem_icon ipsPos_top'>
				{{if $row->unread()}}
					<a href='{$row->url( 'getNewComment' )}' title='{lang="first_unread_post"}' data-ipsTooltip>
						<span class='ipsItemStatus'><i class="fa {{if in_array( $row->$idField, $iposted )}}fa-star{{else}}fa-circle{{endif}}"></i></span>
					</a>
				{{else}}
					{{if in_array( $row->$idField, $iposted )}}
						<span class='ipsItemStatus ipsItemStatus_read ipsItemStatus_posted'><i class="fa fa-star"></i></span>
					{{else}}
						&nbsp;
					{{endif}}
				{{endif}}
			</div>
		{{endif}}
		<div class='ipsGrid'class='ipsDataItem_main'>
			<h4 class='ipsDataItem_title ipsType_break'>
				{{if $row->locked()}}
					<i class='fa fa-lock' data-ipsTooltip title='{lang="content_locked_record"}'></i>
				{{endif}}

				{{if $row->isFutureDate() || $row->mapped('pinned') || $row->mapped('featured') || $row->hidden() === -1 || $row->hidden() === 1}}
					<span>
						{{if $row->isFutureDate()}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span>
						{{elseif $row->hidden() === -1}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span>
						{{elseif $row->hidden() === 1}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span>
						{{endif}}							
						{{if $row->mapped('pinned')}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span>
						{{endif}}
						{{if $row->mapped('featured')}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span>
						{{endif}}
					</span>
				{{endif}}
									
				{{if $row->prefix()}}
					{template="prefix" group="global" app="core" params="$row->prefix( TRUE ), $row->prefix()"}
				{{endif}}
				
				<a href='{$row->url()}'>
					{{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}
				</a>
			</h4>
          
			{{if $row->commentPageCount() > 1}}
				{$row->commentPagination( array(), 'miniPagination' )|raw}
			{{endif}}
			{{if count( $row->customFieldsForDisplay('listing') )}}
				<div class='ipsGrid_span3'>
				{{foreach $row->customFieldsForDisplay('listing') as $fieldId => $fieldValue}}
					{{if $fieldValue}}
						{$fieldValue|raw}
					{{endif}}
 				{{endforeach}}

                  <p><img src="{file="$row->record_image" extension="cms_Records"}" height="200" width="200" /></p>

				</div>
			{{endif}}
			<div class='ipsDataItem_meta ipsType_blendLinks'>
				<p class='ipsType_reset ipsType_light'>{lang="byline" htmlsprintf="$row->author()->link( $row->warningRef() )"}{datetime="$row->_publishDate"}</p>
			</div>
		</div>
		<ul class='ipsDataItem_stats'>
			{{foreach $row->stats(TRUE) as $k => $v}}
				<li {{if in_array( $k, $row->hotStats )}}class="ipsDataItem_stats_hot" data-text='{lang="hot_item"}' data-ipsTooltip title='{lang="hot_item_desc"}'{{endif}}>
					<span class='ipsDataItem_stats_number'>{number="$v"}</span>
					<span class='ipsDataItem_stats_type'>{lang="content_records_stat_{$k}" pluralize="$v"}</span>
				</li>
			{{endforeach}}
			{{if $row::database()->options['reviews']}}
				<li>
					<ul class='ipsList_inline ipsList_noSpacing_left ipsClearfix ipsRating ipsRating_{{if \IPS\Settings::i()->reviews_rating_out_of > 5}}small{{else}}large{{endif}}'>
						{{foreach range( 1, \IPS\Settings::i()->reviews_rating_out_of ) as $i}}
							<li class='{{if $row->averageReviewRating() >= $i}}ipsRating_on{{else}}ipsRating_off{{endif}}'>
								<i class='fa fa-star'></i>
							</li>
						{{endforeach}}
					</ul>
				</li>
			{{endif}}
		</ul>
		<ul class='ipsDataItem_lastPoster ipsDataItem_withPhoto ipsType_blendLinks'>
			{{if $row::database()->options['comments'] or $row::database()->options['reviews']}}
				<li>
					{{if $row->mapped('num_comments')}}
						{template="userPhoto" app="core" group="global" params="$row->lastCommenter(), 'tiny'"}
					{{else}}
						{template="userPhoto" app="core" group="global" params="$row->author(), 'tiny'"}
					{{endif}}
				</li>
				<li>
					{{if $row->mapped('num_comments')}}
						{lang="cms_row_commented_by" htmlsprintf="$row->lastCommenter()->link()"}
					{{else}}
						{lang="cms_row_added_by" htmlsprintf="$row->author()->link()"}
					{{endif}}
				</li>
				
				<li class="ipsType_light">
					<a href='{$row->url( 'getLastComment' )}' title='{lang="get_last_post"}'>
						{{if $row->mapped('num_comments')}}{datetime="$row->mapped('last_comment')"}{{else}}{datetime="$row->mapped('date')"}{{endif}}
					</a>
				</li>
			{{else}}
				<li>
					{template="userPhoto" app="core" group="global" params="$row->author(), 'tiny'"}
				</li>
				<li>
					{$row->author()->link()|raw}
				</li>
				<li class="ipsType_light">
					<a href='{$row->url()}' class='ipsType_blendLinks'>
						{datetime="$row->mapped('date')"}
					</a>
				</li>
			{{endif}}
		</ul>
		{{if $table and $table->canModerate()}}
			<div class='ipsDataItem_modCheck'>
				<span class='ipsCustomInput'>
					<input type='checkbox' data-role='moderation' name="moderate[{$row->$idField}]" data-actions="{expression="implode( ' ', $table->multimodActions( $row ) )"}" data-state='{{if $row->tableStates()}}{$row->tableStates()}{{endif}}'>
					<span></span>
				</span>
			</div>
		{{endif}}
	</li>

{{endforeach}}

Aiwa · May 16, 2016

What's it look like? as-is?

NoGi · May 16, 2016

I want it 3 or 4 grid boxes wide

NoGi · May 17, 2016

Got it worked out. Had the DIV int he wrong spot.

NoGi · July 27, 2016

OK, run into one little issue with this. If the title is too long it throws out my nice 3 column alignment. Is there a way to force the structure? Once the unread icon goes, it goes back to normal.

Aiwa · July 27, 2016

ipsTruncate on your title.

NoGi · July 27, 2016

Looks the goods but where exactly does it go? I tried a few places with no luck. I am new to this so apologies in advance if I am asking the obvious:

{{$rowIds = array();}}
{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	{{$rowIds[] = $row->$idField;}}
{{endforeach}}
{{$iposted = ( $table AND method_exists( $table, 'container' ) AND $table->container() !== NULL ) ? $table->container()->contentPostedIn( null, $rowIds ) : array();}}

<div class='ipsGrid ipsGrid_collapsePhone'>
{{foreach $rows as $row}}
  	<div class='ipsGrid_span4'>
	{{$idField = $row::$databaseColumnId;}}
	<li class="cCmsRecord_row ipsDataItem ipsDataItem_responsivePhoto {{if $row->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $row, 'tableClass' ) && $row->tableClass()}}ipsDataItem_{$row->tableClass()}{{endif}} {{if $row->hidden()}}ipsModerated{{endif}}" data-rowID='{$row->$idField}'>
		{{if member.member_id}}
			<div class='ipsTruncate ipsTruncate_line ipsDataItem_icon ipsPos_top'>
				{{if $row->unread()}}
					<a href='{$row->url( 'getNewComment' )}' title='{lang="first_unread_post"}' data-ipsTooltip>
						<span class='ipsTruncate ipsTruncate_line ipsItemStatus'><i class="fa {{if in_array( $row->$idField, $iposted )}}fa-star{{else}}fa-circle{{endif}}"></i></span>
					</a>
				{{else}}
					{{if in_array( $row->$idField, $iposted )}}
						<span class='ipsTruncate ipsTruncate_line ipsItemStatus ipsItemStatus_read ipsItemStatus_posted'><i class="fa fa-star"></i></span>
					{{else}}
						&nbsp;
					{{endif}}
				{{endif}}
			</div>
		{{endif}}
		<div class='ipsGrid'class='ipsDataItem_main'>
			<h4 class='ipsDataItem_title ipsType_break'>
				{{if $row->locked()}}
					<i class='fa fa-lock' data-ipsTooltip title='{lang="content_locked_record"}'></i>
				{{endif}}

				{{if $row->isFutureDate() || $row->mapped('pinned') || $row->mapped('featured') || $row->hidden() === -1 || $row->hidden() === 1}}
					<span>
						{{if $row->isFutureDate()}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span>
						{{elseif $row->hidden() === -1}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span>
						{{elseif $row->hidden() === 1}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span>
						{{endif}}							
						{{if $row->mapped('pinned')}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span>
						{{endif}}
						{{if $row->mapped('featured')}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span>
						{{endif}}
					</span>
				{{endif}}
									
				{{if $row->prefix()}}
					{template="prefix" group="global" app="core" params="$row->prefix( TRUE ), $row->prefix()"}
				{{endif}}
				
				<a href='{$row->url()}'>
					{{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}
            		<p><img src="{file="$row->record_image_thumb" extension="cms_Records"}" height="100" width="100" /></p>
				</a>
			</h4>
          
			{{if $row->commentPageCount() > 1}}
				{$row->commentPagination( array(), 'miniPagination' )|raw}
			{{endif}}
			{{if count( $row->customFieldsForDisplay('listing') )}}
				<div class='ipsDataItem_meta'>
				{{foreach $row->customFieldsForDisplay('listing') as $fieldId => $fieldValue}}
					{{if $fieldValue}}
						{$fieldValue|raw}
					{{endif}}
 				{{endforeach}}
				</div>
			{{endif}}
			<div class='ipsDataItem_meta ipsType_blendLinks'>
				<p class='ipsType_reset ipsType_light'>{lang="byline" htmlsprintf="$row->author()->link( $row->warningRef() )"}{datetime="$row->_publishDate"}</p>
			</div>
		</div>
		<ul class='ipsDataItem_stats'>
          	{{if $row::database()->options['reviews']}}
				<li>
					<ul class='ipsList_inline ipsList_noSpacing_left ipsClearfix ipsRating ipsRating_{{if \IPS\Settings::i()->reviews_rating_out_of > 5}}small{{else}}large{{endif}}'>
						{{foreach range( 1, \IPS\Settings::i()->reviews_rating_out_of ) as $i}}
							<li class='{{if $row->averageReviewRating() >= $i}}ipsRating_on{{else}}ipsRating_off{{endif}}'>
								<i class='fa fa-star'></i>
							</li>
						{{endforeach}}
					</ul>
				</li>
			{{endif}}
		</ul>

		{{if $table and $table->canModerate()}}
			<div class='ipsDataItem_modCheck'>
				<span class='ipsCustomInput'>
					<input type='checkbox' data-role='moderation' name="moderate[{$row->$idField}]" data-actions="{expression="implode( ' ', $table->multimodActions( $row ) )"}" data-state='{{if $row->tableStates()}}{$row->tableStates()}{{endif}}'>
					<span></span>
				</span>
			</div>
		{{endif}}
	</li>
	</div>
{{endforeach}}
</div>

NoGi · August 1, 2016

@Aiwa would you have a working example of how to use the truncate style?

Aiwa · August 1, 2016

Showing the actual truncation occurring. Note there is an 'aka WaX' in the name shown in the code, but it's been replaced by ...

NoGi · August 2, 2016

@Aiwa thanks for that, I must still be doing something wrong as it's not truncating. Where is that first span class inserted? Is it in the same file and how have you entered the == $0 in ACP as it didn't work for me.

This is what I currently have:

<span class="ipsTruncate ipsTruncate_line">
  <a class="ipsPos_left ipsTruncate ipsTruncate_line" style="text-align:left;" href='{$row->url()}'>
	{{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}
    <p><img src="{file="$row->record_image_thumb" extension="cms_Records"}" height="100" width="100" /></p>
  </a>
</span>

Aiwa · August 2, 2016

You're trying to truncate the content of an anchor that contains an image... You need to break it apart so it knows what it's trying to truncate.

NoGi · August 2, 2016

Don't want to confuse the terminology but the heading is what I want truncated, see image below for example of what happens currently

Aiwa · August 2, 2016

<span class="">
  <a class="ipsPos_left" style="text-align:left;" href='{$row->url()}'>
    <span class="ipsTruncate ipsTruncate_line">{{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}</span>
    <p><img src="{file="$row->record_image_thumb" extension="cms_Records"}" height="100" width="100" /></p>
  </a>
</span>

Use this...

To summarize what I wrote earlier... You're telling it to truncate your title AND the <p><img> element. Basically you're saying truncate my text + image and fit it on one row... Well, it can't do that. You need to tell it to truncate my text, then display my image after the truncated text.

NoGi · August 2, 2016

10 minutes ago, Aiwa said:

class="ipsPos_left"

Doesn't seem to like that:

11 minutes ago, Aiwa said:

<span class="">

Is an empty span required or can be removed?

I'm starting to understand the logic, feel so close to a solution now.

Aiwa · August 2, 2016

Was just trying to get you the gist of what was going on without modifying your code too much. Here it is cleaned up a bit.

<div>
  <a class="ipsType_left" href='{$row->url()}'>
    <span class="ipsTruncate ipsTruncate_line">{{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}</span><br />
    <img src="{file="$row->record_image_thumb" extension="cms_Records"}" height="100" width="100" />
  </a>
</div>

How do I create grid record listing in Articles

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Recently Browsing 0 members

Upcoming Events