Drupal Page loading... what exactly is on page?

Question

Is there some sort of Module or something that I can set for only Administrators to show on a page, when it loads (like at the bottom or something) that tells me ALL CONTENT that gets loaded or something on that page? Like, I need Nodes, Modules, Taxonomy Terms, Templates, Views, URL Aliases, etc. etc. etc., EVERYTHING POSSIBLE.

Problem I'm having is that I didn't create this site I am now managing with the Drupal CMS, however, Drupal has so much damn content areas all over the place that it's literally impossible to track where the hell something is happening at. There is a Views Module, Blocks, etc. etc. on a page, but I need to find out all Drupal related content on a page somehow after it loads it should spit out everything that is related to Drupal that gets loaded on that page. The people that put the site together to begin with are uncooperative about helping with this, even as they are getting paid money to do site edits, they do not share any knowledge of what they do exactly! In my opinion, they are useless!

So, looking at the View for that page, it looks like it is outputting only the "ALL VIDEOS" section. Where should I be looking at to find out how they are being sorted in the years sections of that page?

Ok, so I see in the main.js file this bit of code:

  /* Isotope for Videos and Gallery */
  blam('#block-views-videos-block .view-content').isotope({itemSelector: '.views-row', animationEngine: 'jquery'});
  blam('#block-views-press-gallery-block .view-content').isotope({itemSelector: '.views-row', animationEngine: 'jquery'});

  /* Remove class 'active' from video menu items */
  removeActiveClass('.menu-name-menu-videos-menu ul li', 1);

  blam('.menu-name-menu-videos-menu ul li a').click(function(){
    var selector;
    var menu_item = blam(this).text();
    removeActiveClass('.menu-name-menu-videos-menu ul li', 0);
    /*Add 'active' class to video menu item*/
    blam(this).closest('li').addClass('active');

    if( menu_item.indexOf("2012") != -1 ) {
      selector = '.2012';
    } else if( menu_item.indexOf("2011") != -1 ) {
      selector = '.2011';
    } else if( menu_item.indexOf("2010") != -1 ) {
      selector = '.2010';
    } else if( menu_item.indexOf("2009") != -1 ) {
      selector = '.2009';
    } else if( menu_item.indexOf("2008") != -1 ) {
      selector = '.2008';
    } else if( menu_item.indexOf("2007") != -1) {
      selector = '.2007';
    }

    if(selector) {
      blam('#block-views-videos-block .view-content').isotope({filter: selector});
    } else {
      blam('#block-views-videos-block .view-content').isotope({filter: '.views-row'});
    }
    return false;
  });

});

/* Removes all Active classes from menu items */

function removeActiveClass(e, i){
  var elements = blam(e);

  for(var index = i; index < elements.length; index++) {
    blam(elements[index]).removeClass('active');
  }
}

And so, I changed this bit here:

    if( menu_item.indexOf("2012") != -1 ) {
      selector = '.2012';
    } else if( menu_item.indexOf("2011") != -1 ) {
      selector = '.2011';
    } else if( menu_item.indexOf("2010") != -1 ) {
      selector = '.2010';
    } else if( menu_item.indexOf("2009") != -1 ) {
      selector = '.2009';
    } else if( menu_item.indexOf("2008") != -1 ) {
      selector = '.2008';
    } else if( menu_item.indexOf("2007") != -1) {
      selector = '.2007';
    }

To this:

if( menu_item.indexOf("2013") != -1 ) {
  selector = '.2013';
} else if( menu_item.indexOf("2012") != -1 ) {
  selector = '.2012';
} else if( menu_item.indexOf("2011") != -1 ) {
  selector = '.2011';
} else if( menu_item.indexOf("2010") != -1 ) {
  selector = '.2010';
} else if( menu_item.indexOf("2009") != -1 ) {
  selector = '.2009';
} else if( menu_item.indexOf("2008") != -1 ) {
  selector = '.2008';
} else if( menu_item.indexOf("2007") != -1) {
  selector = '.2007';
}

But it still does not work. Am I missing something else?

Answer 1

They're actually outputting all videos using the Views module (it's a view called Videos I think and there's a block of that view which is what you can see here).

The filtering is actually not a Drupal thing, which is probably why you're struggling to find it. They're using a jQuery plugin called Isotope to do the filtering which changes the opacity of items, among other things and does the animation via CSS3. They apply a class to each item of the view, in this case each video, which has the year. For example, any item that is from 2013 will have '2013' as a class. I've highlighted in the attachment where I found that information from. Using Chrome inspector (or Firebug) you can see all the Isotope classes that are added and you can see the year class too.

Now, you can see that the first three do have the class 2013, so I think this could be an issue with Isotope. A good place to start debugging this would be to take a look at the JS file that calls the Isotope function. I'd like to point you to the correct file but Drupal has minified the js files so it's a bit hard.

The Isotope website is here: http://isotope.metafizzy.co/index.html