Phantomholocaust.org

[MatthewSchenker]

Greetings Everyone,

I just completed building a site which serves as a companion to a book published by Rutgers University Press.  The book is about Holocaust films.  The author uncovered these films during extensive research in Russia, Israel, and elsewhere.

This site is designed to be used as a college classroom resource.  Teachers will go to the site, play movie clips for their class, then use the chapter summaries and discussion questions as further materials.

For the video pages, I used the video.js player.  Every movie page includes an .mp4 and a .webm file, in order to cover as many browsers (and tablets) as possible.  The movies play in regular and full screen.

Although the site is launched, I am still planning to build additional sections for "educator resources."  I may also make some style changes in the coming weeks.

Using ProcessWire made the building of this site very smooth!  The author can easily log into the site, add or edit chapter text and discussion questions, and upload video files.  She can also easily edit any of the static pages.

This is a relatively simple site that will get a lot of practical use in college classrooms.

Here it is: www.phantomholocaust.org

Thank you,

Matthew

[Macrura]

Nice Job Matthew!

[asosking]

Hello Matthew,

Simple but beautiful page!

it would be really nice and helpful to offer this or a similar profile to download. I think this will help beginners quickly and the popularity of this magnificent system is increasing rapidly.

THANK YOU

[MatthewSchenker]

Greetings,

it would be really nice and helpful to offer this or a similar profile to download. I think this will help beginners quickly and the popularity of this magnificent system is increasing rapidly.

I would be happy to make this into a site profile if anyone is interested.

Thanks,

Matthew

[asosking]

I would be interested

Thanks, andreas

[MatthewSchenker]

Greetings,

I would be interested

Thanks, andreas

I'm still planning to add some features to this site, so I will get a site profile together just a bit later.

In the meantime, I would be happy to answer any questions. Are there particular methods you would like me to explain or share?

Thanks,

Matthew

[asosking]

Hi

first, Sorry for my Bad englisch and 2. How you make the tabs on the Film Site?

Thanks, andreas

[MatthewSchenker]

Greetings,

Sorry for the delayed response...

I build tabs as often as possible using straight Javascript.  It allows me to easily style the tabs.  It works great in ProcessWire using some of our favorite selectors.

Here is the layout code in my template for the film pages:

<div id="tab_container">
	<div id="tab_box">				
		<ul id="tab_headings">
			<li><a id="tab1">About</a></li>
			<li><a id="tab2">Discussion Questions</a></li>
		</ul>
			<div class="individual_tabs_container" id="tab1C">
				<?php echo $page->tab_heading; ?>
				<?php echo $page->about_tab_text; ?>
			</div>
			<div class="individual_tabs_container" id="tab2C">
				<?php echo $page->discussion_tab_text; ?>
			</div>
	</div> <!-- /tab_box -->
</div> <!-- /tab_container -->

Here is the Javascript that fires up the tabs, which you just need to place after the layout code above:

<script>
$(document).ready(function() {
$('#tab_headings li a:not(:first)').addClass('inactive');
$('.individual_tabs_container').hide();
$('.individual_tabs_container:first').show();
$('#tab_headings li a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')){ 
$('#tab_headings li a').addClass('inactive');           
$(this).removeClass('inactive');
$('.individual_tabs_container').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
});
</script>

Finally, here is the CSS for the tabs:

#tab_container {  /* Full-width container holding the tabs element */
	margin-top: 61px;
	display: inline;
	float: left;
	width: 100%;
}

#tab_box {  /* Box containing tabs element, inside tab_container */
	margin-left: 10%;
	display: inline;
	float: left;
	width: 80%;
}

#tab_headings {  /* Unordered list that forms the tab headings */
	width: 100%;
	height: 33px;
	margin: 10px 0 0 0;
}

#tab_headings li {   /* Text of the tab headings */
	float: left;
	text-align: center;
	width: 33%;
	height: 33px;
}

#tab_headings li a {  /* Active tab */
	cursor: pointer;
	font-size: 1em;
	font-weight: bold; 
	color: #fff;
	padding: 8px 0 9px 0;
	display: block; 
	background: #00698C;
}

#tab_headings li a.inactive {   /* Inactive tab(s) */
	padding: 8px 0 9px 0;
	color: #999;
	background: #888;
	text-align: center;
}

#tab_headings li a:hover,
#tab_headings li a.inactive:hover {  /* Hover effects of the tab headings */
	color: #A40000;
}

.individual_tabs_container {   /* DIVs holding actual content that appears when you click on a tab */
	clear: both;
	width: 100%;
	text-align: left;
	padding: 20px 0 20px 0;
	background: #666666;
}

.individual_tabs_container h2 {  /* <h2> inside individual tab areas (you can change <h2> to any element you want styled) */
	margin: 10px 15px 10px 15px;
	color: #5685bc;
        font-size: 1.5em;
}

.individual_tabs_container p {   /* <p> text inside individual tab areas (you can change <p> to any element you want styled) */
	margin: 10px 15px 10px 15px;
	line-height: 1.3em;
	color: #f6f6f6;
}

.individual_tabs_container ol li {  /*  Ordered list in discussion questions tab (you can change this as needed) */
	list-style-type: decimal;
	list-style-position: inside;
	margin: 0 15px 10px 30px;
	text-indent: -1.3em;
	color: #fff;
}

Play with the styles to get the color scheme or sizing you want.  The only part that can be tricky is making sure to do the math right for the tab borders.

Feel free to post follow-up questions.  I'm always happy to help!

Thanks,

Matthew

[asosking]

Thanks Matthew

[MatthewSchenker]

Greetings,

No problem! Of course, there are also lots of JQuery plugins that will also work. I just prefer to use straight JS if I can.

Let me know if there are other parts of the site I can describe.

This project is being reviewed in presentations. I am planning to expand the project in response to feedback over the next few weeks. I will be building an "educators" section. Also, I will be creating a front-end interface for managing the site. I'll report back on all this soon.

I also want to emphasize how wonderful it is to use ProcessWire for this kind of site. It is so natural to tie into good PHP/JS practices, I can give the client complete control of the system, and whenever necessary I can jump in to make improvements to the site with clean code.

Thanks,

Matthew

[Joe]

Nice looking site! I specifically like the way the videos are integrated. Are they hosted on Vimeo or YouTube or on your site´s sever? What player is this?

Thank you.

[diogo]

What player is this?

From the source, looks like it's this one http://www.videojs.com/

[Joe]

From the source, looks like it's this one http://www.videojs.com/

...could have looked myself I guess. Thanks, looks like a good one!

[MatthewSchenker]

Greetings.

Thanks diogo for answering! Yes -- video.js.

To answer your other question: the videos are hosted on my server. The client wanted to control where the videos are housed and seen, and there are some copyright demands.

In the future, I may store videos on an Amazon S3 directory.

I'm in the process of expanding this site. Will post again on this.

Let me know if you have other questions and I'll be happy to share!

Thanks,

Matthew