6 replies to this topic

[RichardC]

I would like to have a new hook for the garage done. We are moving away from using sidebars and more towards blocks that are board width, but narrrow in height.

I have attached a mocked up screen shot of what we are after
 garage-category-block.PNG   13.75K   13 downloads

points to note:

# 4 x blocks to be displayed in a row so it matches up with existing blocks
 garage-category-block2.PNG   86.49K   14 downloads

# use category header expand/collapse
# display on board index

I don't know whether it would be better to use it to replace the existing sidebar hook and make use of the garage applications ACP settings, or whether it should be an independant hook with its own ACP settings.

Alternatively, combine the existing side bar hook and this new linear hook together within the same hook and have it as a 'choose either/or' in the garage ACP settings?

our Dev site if you want to get a feel fo what we are up to HERE

[Michael]

Have you considered modifying the global garage hook instead? It already hooks into the top of the board and is horizontal like your mockup. Styling can be changed like you have it.
Expand/collapse will be supported in a future version when I have some updated code to use.

[RichardC]

Michael, on 09 November 2011 - 08:05 PM, said:

Have you considered modifying the global garage hook instead? It already hooks into the top of the board and is horizontal like your mockup. Styling can be changed like you have it.
Expand/collapse will be supported in a future version when I have some updated code to use.

I'm taking a look at it now. First thing I am encountering is that our board index is on:

/index.php?app=forums

so my only option is to display the hook on all pages, which isn't ideal

I have actually played about with the sidebar hook as well and just changed its insertion point, which puts it where I want (also on our board index page)

I am just scratching my head on how to get the 4 x entries in line, is there a 'new line' in a php file I need to remove?

Edited by RichardC, 10 November 2011 - 06:33 AM.

[Michael]

Everything should be able to be changed through the hook template bit  So I give you the correct edit, have you altered the the template at all yet?

[RichardC]

Michael, on 11 November 2011 - 02:20 AM, said:

Everything should be able to be changed through the hook template bit  So I give you the correct edit, have you altered the the template at all yet?

I have tried various edits in the global garage hook template bit, but none worked so it is currently reverted to default.

I have also moved the sidebar hook hook insertion point by editing the hook settings so it displays where I want it (it also uses the small thumbnail and IMO looks nicer) but again I couldnt get it to display the 4 blocks inline. The sidebar hook also displays ok on our board index, where the garage global hook won't show (unless I select 'all pages')

So basically, everything is back to default (except the sidebar hook insertion point).

[Michael]

Only tested this quickly but appears to work fine.

Open the Garage sidebar hook template bit.

Find:

<ul class='hfeed block_list'>

Replace With:

<ul class='ipsList_inline'>

Save.

[RichardC]

Thanks Michael.

Based on your post above, I have been playing with it a little - still a few things to fix, but have also got it to expand/collapse (but only on the board index so far) as there is something breaking the end of the code

this is as far as I have got so far:
sidebarhooktemplate

<link rel='stylesheet' type='text/css' title='Main' media='screen' href='{$this->settings['public_dir']}style_css/{$this->registry->output->skin['_csscacheid']}/ipb_garage.css' />
<div class='category_block block_wrap'>
<h3 class='maintitle'>{$this->lang->words['garage_vehicles']}
<a class='toggle right' href='#' title="{$this->lang->words['toggle_cat']}">{$this->lang->words['toggle_cat']}</a> <a href="{parse url="showforum={$_data['cat_data']['id']}" seotitle="{$_data['cat_data']['name_seo']}" template="showforum" base="public"}" title='{$this->lang->words['view_cat']}'>{$_data['cat_data']['name']}</a>
</h3>
   <div class='ipsBox table_wrap'>
<ul class='ipsList_inline2'>
  <if test="hasvehicles:|:is_array( $vehicles ) && count( $vehicles )">
   {parse striping="vehicle_row" classes="row1,row2 altrow"}
   <foreach loop="vehicle_row:$vehicles as $r">
	<li class='hentry {parse striping="vehicle_row"} clearfix'>
<if test="display_style:|:$this->settings['gs_sidebar_display_style'] == 'list'">
<span class='left' style='margin-right: 5px;'>
<a href='{parse url="app=garage&amp;do=view&amp;id={$r['id']}" seotitle="{$r['seo_name']}" template="garage_view_vehicle" base="public"}' title='{$this->lang->words['view']} {$r['vehicle_name']}'>
<if test="has_thumbnail:|:$r['thumb_location']">
<img src='{$this->registry->getClass('garage_functions')->images['url']}{$r['thumb_location']}' width='{$r['thumb_width']}px' height='{$r['thumb_height']}px' alt='{$r['image_name']}' class='garage_thumb' />
<else />
<img src='{$this->settings['img_url']}/garage_system/no_image.png' width='{$r['thumb_width']}px' height='{$r['thumb_height']}px' alt='{$this->lang->words['no_image']}' class='garage_thumb' />
</if>
</a>
</span>
<span class='date'>{$this->lang->words['added']}: {parse date="$r['date_added']" format="short"}</span><br />
<if test="vehicle_owner:|:$r['member_id'] AND $r['member_name']">{$this->lang->words['owner']}:
<a href='{parse url="showuser={$r['member_id']}" base="public" template="showuser" seotitle="{$r['member_seo_name']}"}' title='{$this->lang->words['view_profile']}'>{$r['member_name']}</a>{parse template="user_popup" group="global" params="$r['member_id'],$r['member_seo_name']"}
</if><br /><br />
<a href='{parse url="app=garage&amp;do=view&amp;id={$r['id']}" seotitle="{$r['seo_name']}" template="garage_view_vehicle" base="public"}' title='{$this->lang->words['view']} {$r['vehicle_name']}'>
<span><strong>{IPSText::truncate( $r['vehicle_name'], $this->settings['gs_name_character_limit'] )}</strong></span></a>
<else />
<div style='text-align:center;'>
<a href='{parse url="app=garage&amp;do=view&amp;id={$r['id']}" seotitle="{$r['seo_name']}" template="garage_view_vehicle" base="public"}' title='{$this->lang->words['view']} {$r['vehicle_name']}'>
<if test="has_thumbnail:|:$r['thumb_location']">
<img src='{$this->registry->getClass('garage_functions')->images['url']}{$r['thumb_location']}' width='{$r['thumb_width']}px' height='{$r['thumb_height']}px' alt='{$r['image_name']}' class='garage_thumb' />
<else />
<img src='{$this->settings['img_url']}/garage_system/no_image.png' width='{$r['thumb_width']}px' height='{$r['thumb_height']}px' alt='{$this->lang->words['no_image']}' class='garage_thumb' />
</if>
</a><br /><br />
<a href='{parse url="app=garage&amp;do=view&amp;id={$r['id']}" seotitle="{$r['seo_name']}" template="garage_view_vehicle" base="public"}' title='{$this->lang->words['view']} {$r['vehicle_name']}'><h4>{IPSText::truncate( $r['vehicle_name'], $this->settings['gs_name_character_limit'] )}</h4></a> {$this->lang->words['owner']}: <if test="vehicle_owner:|:$r['member_id'] AND $r['member_name']">
<a href='{parse url="showuser={$r['member_id']}" base="public" template="showuser" seotitle="{$r['member_seo_name']}"}' title='{$this->lang->words['view_profile']}'>{$r['member_name']}</a>{parse template="user_popup" group="global" params="$r['member_id'],$r['member_seo_name']"}
</if></strong><br />
<span class='date'>{$this->lang->words['added']}: {parse date="$r['date_added']" format="short"}</span>
</div>
</if>
	</li>
   </foreach>
  <else />
   <li>{$this->lang->words['no_vehicle_results']}</li>
  </if>
</ul>
</div>
</div>

ips-styles.css  (I added new as I didnt want to mess up the existing ipslist_inline)

add to the bottom of the list

.ipsList_inline2 > li { display: inline-block;
margin: 0 3px;
border: 0px solid BLUE;
width: 24%;
float: left;
overflow: hidden;
padding: 5px 5px 5px 5px;
}
.ipsList_inline2 > li:first-child { margin-left: 0; }
.ipsList_inline2 > li:last-child { margin-right: 0; }
.ipsList_inline2.ipsList_reset > li:first-child { margin-left: 3px; }
.ipsList_inline2.ipsList_reset > li:last-child { margin-right: 3px; }
.ipsList_inline2.ipsList_nowrap { white-space: nowrap; }
.ipsList_inline2 li { margin: 0;} /* remove spacing from default ipsList_inline */
.ipsList_inline2 > li > a { margin-right: 0px; padding: 4px 3px; }

you can see how far I have got on our DEV site

Edited by RichardC, 14 November 2011 - 11:40 AM.