Angular - Display Only Sortable Filtered Categories Without Showing Images « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Angular

closed

not a support question

Angular - Display Only Sortable Filtered Categories Without Showing Images

7 posts from 2 voices

Started 3 months ago by mbesh
Latest reply from mbesh
This topic is closed
This topic is not a support question

Tags:

mbesh
Member

The filtered categories that show above a particular portfolio 'grid' of pics works just fine when there's a maximum of 20-30 items in the portfolio [like our "web sites" portfolio: http://visualimpact.wpengine.com/web-sites/. [ Screen grab: http://www.4VIS.com/WebSitesPortfolio-WithSortableFilter.jpg ].

But, we have over 100 videos to show, and are concerned that most people won't know to select a 'filter' before they start looking at the examples, and will get frustrated scrolling down so many videos.

So, what we would like to do is 'break up' all the videos into 'separate' portfolios (of 5-20 videos each) [ Like on this "landing page": http://visualimpact.wpengine.com/video-production/ ], then after they are on one of these specific portfolios, there can be 'links' to the other specific portfolios shown just above the grid of images, so they don't have to hit the back arrow a couple of time to get back to the Video Production "landing page" to select another category to look at. (Like this: http://www.4VIS.com/CapabilitiesOverviewsPortfolio-WithSortableLinksFilter.jpg ). [ This is the actual page: http://visualimpact.wpengine.com/capabilities-overview-video/ ].

[ Essentially, we want to create a portfolio in Template Builder with all the video categories, have it be sortable, and NOT show the images ]. We also want any 'ajaxed' page to open below this 'new' categories filter list, just like a normal page would 'act' with a 'normal' sortable filtered category 'list' -- i.e. when a 'project' like "Add IMPACT! is selected on this page: http://visualimpact.wpengine.com/web-sites/ ).

I hope this is clear (like mud!) ;^D

Thanks for your efforts on this!
Mark

Posted 3 months ago #
Devin
Moderator

Hi Mark,

The theme doesn't really have anything to accommodate that exact layout. Your best bet would be to experiment with the template builder to find a navigation scheme that suits your overall goal while working within its limitations.

Otherwise, you would need to look into have a developer customize things for you.

Regards,

Devin

Posted 3 months ago #
mbesh
Member

Devin,

Is there at least a "breadcrumb" link that can be put up there? Some kind of widget that would do this? Or, maybe just put the links to the other pages in the 'description' area above the pics? Suggestions?

Mark

Posted 3 months ago #
Devin
Moderator

You could use a text area element on those dynamic templates and populate it with links or html showing the type of output you want. Then use the page-id-### selector to make a specific link active for each page. Its a bit hacky, but its the only way I can think of to get a new secondary navigation system inside templates.

Posted 3 months ago #
mbesh
Member

Devin,

This is what I came up with—a "direct" link back to the "landing page" for the video categories. It seems to work properly on all screens, and does what we want. But, I want to be sure this will not give us any 'problems' down the road.

http://visualimpact.wpengine.com/capabilities-overview-videos/

Also, why did you suggest the page-id-### selector?

Mark

Posted 3 months ago #
Devin
Moderator
Hi Mark, I just mean you could do something like an unordered list for the various category home pages. Basically, a hard coded navigation list of links for the user to click on. It could be identical for each page to make it super simple to implement.

Then, you could use page id specific css to activate one of those links in a "your are here" sort of fashion.

For example:
```
<ul class="my-custom-cat-nav">
  <li class="cat1">Category 1</li>
  <li class="cat2">Category 2</li>
  <li class="cat3">Category 3</li>
</ul>
```
Then use css like:
#top.page-id-44 .cat1 {background-color: red;}

Looking at it now though, its actually more work than just doing an active-cat-nav-link class on the current page if you are already doing a custom template for each video page.

So,
```
<ul class="my-custom-cat-nav">
  <li>Category 1</li>
  <li class="active-cat-nav-link">Category 2</li>
  <li>Category 3</li>
</ul>
```
That is a super bare bones example, but hopefully it illustrates what I was talking about a bit further.

Regards,

Devin
Posted 3 months ago #
mbesh
Member

Devin,

WOW...just remember you're talking to a bunch of designers.

Although what you proposed would be much better, it seems that what we did with a simple link back to "landing page" is working okay.

Thanks for all your efforts!

Mark

"SOLVED"

Posted 3 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top