Widget: Photo Galleries

The following describes what is necessary to create a “Recently Updated Photo Gallery Plugin Widget.”

Prerequisites:

Stylesheet

One needs to make sure that they substitute the proper URL in for the two background images needed for this widget. The URL should point to the base URL of your photo gallery.

/* =Gallery Index  ----------------------------------------------- */
.useslides ul li {
<b>background:url("<$MTBlogURL$>meta/img/bg_slide.gif") 0 0 no-repeat;</b>
}
.useslides>ul li {
<b>background-image:url("<$MTBlogURL$>meta/img/bg_slide.png");</b>
}
.galleries {
float:left;
margin:0 0 15px;
padding:1px 0;
}
.galleries ul {
float:left;
margin:0;
padding:0;
list-style:none;
text-align:left;
width: 160px;
}
.galleries li {
background-image:none;
position:relative;
float:left;
margin:0;
padding:75px 0 15px 15px;
width: 160px;
}
div.useslides ul li {
background-position:0px 0;
padding-top:130px;
text-align:center;
}
.galleries h3 {
margin:0 10px .25em 4px;
font:bold 100% Verdana,Sans-serif;
line-height:1.2em;
}
.useslides h3 {
margin-right:0;
} 
.galleries h3 a, .galleries a.img {
border-width:0;
}
.galleries li .img {
position:absolute;
top:0;
left:15px;
}
.useslides li .img {
/*  left:65px;*/
}
.galleries ul p {
margin:.35em 10px 0 4px;
}
.useslides ul p {
margin-right:0;
}
em.date {
font-style:normal;
}
.useslides a.img, .useslides a.img:visited, .useslides a.img:hover {
background-repeat:no-repeat;
/*  background-position:50% 103px;*/
background-position:50% 38px;
display:block;
width:92px;
height:70px;
padding:25px 17px 28px 0px;
border-width:0;
text-align:center;
}
.useslides a.v, .useslides a.v:visited, .useslides a.v:hover {
background-position:10px 50%;
width:70px;
height:92px;
padding:14px 28px 17px 25px;
}
.useslides .img img {
display:block;
border:1px solid;
border-color:#aaa #ddd #ddd #aaa;
}

Template Code

The following code presumes you have PHP installed, but it also assumes you have the Photo Gallery plugin installed, which has PHP as a prerequisite.

<?php
// Page Variables
$pgtitle = "<$MTBlogName smarty_pants="1"$>";
$section = "index";
$blogrelurl = "<$MTBlogRelativeURL$>";
$blogurl = "<$MTBlogURL$>";
// Functions
include ($_SERVER['DOCUMENT_ROOT']."<$MTBlogRelativeURL$>meta/functions/all.php");
?>
<$MTSetVar2 name="galleryno" value="0"$>
<$MTSetVar2 name="totalphotos" value="0"$>
<$MTSetVar2 name="titleimg" value=""$>
<MTCollateCollect>
<MTCategories><MTFilterCategories exclude="Favorites">
  <MTKeyValues source="[MTCategoryDescription]">
  <MTIfNoKeyExists key="hidden">
  <MTCollateRecord>
    <MTEntries lastn="1">
     <MTCollateSetField name="sortdate"><$MTEntryDate format="%Y-%m-%d-%H-%M-%S"$></MTCollateSetField>
      <MTCollateSetField name="date"><$MTEntryDate format="%b %Y"$></MTCollateSetField>
      <MTCollateSetField name="img"><$MTEntryMore$></MTCollateSetField>
    </MTEntries>
    <MTIfKeyExists key="titleimgid"><MTEntry id="[MTKeyValue key='titleimgid']"><MTCollateSetField name="img"><$MTEntryMore$></MTCollateSetField></MTEntry></MTIfKeyExists>
    <MTCollateSetField name="path"><$MTCategoryLabel dirifyplus="pld"$></MTCollateSetField>
    <MTCollateSetField name="title"><MTIfKeyExists key="title"><$MTKeyValue key="title" smarty_pants="1"$></MTIfKeyExists><MTIfNoKeyExists key="title"><$MTCategoryLabel smarty_pants="1"$></MTIfNoKeyExists></MTCollateSetField>
    <MTCollateSetField name="count"><$MTCategoryCount$></MTCollateSetField>
    <MTCollateSetField name="desc"><MTIfNonEmpty tag="MTKeyValuesStripped"><MTFirstNWords n="9" append="&#8230;" append_decode_html="1"><$MTKeyValuesStripped smarty_pants="1" remove_html="1"$></MTFirstNWords><MTElse><em>No description</em></MTElse></MTIfNonEmpty></MTCollateSetField>
  </MTCollateRecord>
    <$MTAddVar name="galleryno" value="1"$>
    <$MTAddVar name="totalphotos" value="[MTCategoryCount]"$>
  </MTIfNoKeyExists>
  </MTKeyValues>
</MTFilterCategories></MTCategories>
</MTCollateCollect>
<div class="galleries useslides">
<h2>Recently Updated Galleries</h2>
<MTIfGreater a="[MTGetVar2 name='galleryno']" b="0">
<MTGrid num_columns="1"><MTCollateList limit="6 sortdate:-" sort="sortdate:-"><MTGridCell><?php $thisimg = '<MTCollateField name="img" encode_php="q">'; ?>
<MTGridIfLeftColumn>
<ul>
</MTGridIfLeftColumn>
  <li>
    <a href="<$MTBlogArchiveURL relative_url="1"$><MTCollateField name="path">/" class="img<?php if (IsVertical($thisimg)) echo ' v'; ?>"><MTCollateField name="img"></a>
  </li>
<MTGridIfRightColumn>  </ul>
</MTGridIfRightColumn></MTGridCell></MTCollateList><MTGridTrailingCells><MTGridIfRightColumn>
</ul></MTGridIfRightColumn></MTGridTrailingCells></MTGrid>
<MTElse><p>No galleries published yet.</p></MTElse></MTIfGreater>
</div>

TrackBack

Listed below are links to weblogs that reference Widget: Photo Galleries:

» Photo Gallery - Sidebar Plugin Mashup -- Woot! from majordojo
Ok, I might be abusing the term “mashup,” but I spent the other night trying to create a sidebar widget to use with the Sidebar Manager Plugin and the photo galleries I have stored in the Photo Gallery Plugin. What... [Read More]

» Stylesheet from Stylesheet
It represents a single style sheet associated with a structured document. A stylesheet contains any number of separate rules, which ... [Read More]

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

About Majordojo

"Majordojo" is the name under which Byrne Reese releases the software he writes. Byrne Reese is a father, a product engineer, an open source hacker and an employee of Six Apart.

 Subscribe to this site's feed

View Byrne Reese's profile on LinkedIn

Recent Comments