Jump to content

Page List fields customisation


Marty Walker
 Share

Recommended Posts

I'm really liking the ability to use font awesome icons in the page list and on a recent site I utilised the display of fields in the Page List. It got me thinking that the information itself, although useful, could be styled/displayed better.

Would it be possible to allow the field title (and a small amount of custom styling) to be included in the Page List too? Sure, there's the potential to go overboard with something like this but if used with restraint it could be quite helpful.

Example:

PageList-titles.png

Link to comment
Share on other sites

@Marty Walker

with fontawesomePageLabel you can show an open or a close icon behind the title. (depending on the open or close state of the folder, or what ever icon you wish). The CSS  fully customisable.

FontawesomePageLabel has a JS approach, so you can use it in conjunction with all others know other PageLabelModules

Link to comment
Share on other sites

@Marty: I do this by using a module. It's a copy from somas PageListShowPageId.
 

post-1041-0-26835800-1381822545_thumb.jp

the PHP code is

public function init() {
	$this->addHookAfter('ProcessPageListRender::getPageLabel', $this, 'addPageArchivnummerLabel');
}

public function addPageArchivnummerLabel($event) {
	$page = $event->arguments('page');
	if('album'==$page->template) {
		//$event->return = str_pad(count($page->images), 3, '0', STR_PAD_LEFT) . "   " . $event->return;
		$event->return = $event->return .
			' <span class="jhpPageListArchivnummer">' . $page->archivnummer . '</span> ' .
			' <span class="jhpPageListImageCount">' . count($page->images) . '</span>';
	}
}

and the CSS is

.content .PageListItem > a span + span.jhpPageListImageCount:before {
    content: 'count: ' !important;
}
.content .PageListItem > a span + span.jhpPageListArchivnummer:before {
    content: '' !important;
}
.content .PageListItem > a span + span.jhpPageListImageCount,
.content .PageListItem > a span + span.jhpPageListArchivnummer {
    font-size:0.9em;
    background-color:#EEE;
    color: #777;
    padding: 2px 5px 1px 5px;
    border: medium none !important;
    border-radius: 3px 3px 3px 3px;
}
  • Like 6
Link to comment
Share on other sites

  • 8 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...