Dynamic Content Gallery Mod

I recently added the Dynamic Content Gallery WordPress Plugin to one of my friends sites. He isn’t to savvy with moving around and adding stuff to his server. So I had to add some stuff to this wonderful plugin so it would do thinks automatically.

First thing I did was add this: <img src=”<?php echo $featured; ?>”/>

That way I could upload the image inside WordPress and add a custom field key called featured with out having to go to the server and upload to the custom folder like the stock plugin says.

Another thing I changed is the this: I added this to the plugin <p> php the_content_rss(”, TRUE, ”, 50); </p>

What that does is instead of having to add a custom key with text for the description in the Content Gallery now you do nothing. What you write in your post will be automatically added to the Gallery image descriptions.

So instead of this :

dfcg_post_custom_fields_750

You have this:
thumb11

I also added the Get The Image WordPress Plugin function to the Dynamic Content Gallery.

So you can ether add from the custom key ( featured)  or just upload an image in WordPress and it will show up automatically! Make sure the image dimensions are right!

If you have the Dynamic Content Gallery installed and want to try my files. Please remember that this could break your Gallery.

Remember to back up everything first!!

You might want to backup the whole folder dynamic-content-gallery-plugin

Remember to rename the file that you are going to use dynamic-gallery.php

Download
Good luck and let me now what you think!!

Customized Dynamic AJAX Tabs for Prototype

I found these cool AJAX Tabs for Prototype and added some of my own style to them. If you need something like this then you might want to check these tabs out,  they are slick!  These AJAX tabs where built by 20bits.com. I needed to add more style to them for the new TMS theme that I was building yesterday.  Anyway take a look at the before and after screen shots. IF you install theme why not try out my CSS located at the bottom of this post.

Don’t forget to check out the Live Demo!!

Prototype AJAX Tabs Before
Prototype AJAX Tabs Before
Prototype AJAX Tabs After
Prototype AJAX Tabs After

Install the tabs by following the directions at this site. 20bits.com

Once you have installed the tabs grab the CSS below and have some fun!

.tabbed-pane * {
	margin: 0;
	padding: 0;
}
.tabbed-pane {
	margin:0 0 0 2px;
	width:305px;
	text-align:left;
        background: #222;
	color:#888;
	border:1px solid #333;
    padding:3px;
}

.tabbed-pane img
{
	width:300px;
	height:200px;
	margin:0 0 8px 0px;
	padding:1px;
	float:left;
	border:1px solid #000;
}

 .tabs {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #111;
	border-bottom: 1px solid #333;

}

.tabbed-pane ol {
       height:28px;
       margin-bottom:5px;
}
 .tabs li a.active {
	float: left;
	display: block;
	padding: 6px 8px 6px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #EEE;
	background: #222;
        border: 1px solid #222;
}
 .tabs li {
	float: left;
	margin: 0 0px 0 0;
}

 .tabs li a {
	float: left;
	display: block;
	padding: 6px 8px 6px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	background: #111;
        color:#FFF000;

}

 .tabs li a:hover {
	float: left;
	display: block;
	padding: 6px 8px 8px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #EEE;
	background: #333;
}

.tabbed-container {
	position: relative;
	clear: both;
	min-height: 10em;
}
.tabbed-container .overlay {
	position: absolute;
	clear: both;
	padding: 0px 5px 0px 5px;
	width: 290px;
        height: 100%;
	top: 0;
	left: 0;
	opacity:.70;
	filter:alpha(opacity=70);
	background:#222;
	text-align: center;
	z-index: 100;

}

.tabbed-container .overlay h3{
       	font-size:18px;
	font-weight:700;
        color:#ffF000;
}