NoGi Posted May 15, 2016 Posted 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 Posted May 15, 2016 Posted 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 Posted May 15, 2016 Author Posted 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?
NoGi Posted May 16, 2016 Author Posted 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}} {{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}}
NoGi Posted May 17, 2016 Author Posted May 17, 2016 Got it worked out. Had the DIV int he wrong spot.
NoGi Posted July 27, 2016 Author Posted 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.
NoGi Posted July 27, 2016 Author Posted 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}} {{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 Posted August 1, 2016 Author Posted August 1, 2016 @Aiwa would you have a working example of how to use the truncate style?
Aiwa Posted August 1, 2016 Posted 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 Posted August 2, 2016 Author Posted 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 Posted August 2, 2016 Posted 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 Posted August 2, 2016 Author Posted 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 Posted August 2, 2016 Posted 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 Posted August 2, 2016 Author Posted 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 Posted August 2, 2016 Posted 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>
Recommended Posts
Archived
This topic is now archived and is closed to further replies.