Jump to content

How do I create grid record listing in Articles

Featured Replies

Posted

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

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. 

  • Author
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?

 

  • Author

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}}

 

What's it look like? as-is?

  • Author

Articles Grid View.png

I want it 3 or 4 grid boxes wide

  • Author

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

  • 2 months later...
  • Author

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.

ipsTruncate on your title.

 

  • Author

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>

 

  • Author

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

Homepage - Tactical Advantage - Google Chrome 2016-08-01 08.18.43.png

Homepage - Tactical Advantage - Google Chrome 2016-08-01 08.19.15.png

 

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

Welcome! - A Test Forum - IPS Community Suite - Google Chrome 2016-08-01 08.25.13.png

  • Author

@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>

 

:( 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.  

  • Author

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

reviews.PNG

<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.

  • Author
10 minutes ago, Aiwa said:

class="ipsPos_left"

Doesn't seem to like that:

reviews.PNG

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.

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>

 

Archived

This topic is now archived and is closed to further replies.

Recently Browsing 0

  • No registered users viewing this page.