PixyBlog Discussion

In reference to this news article, the following will enable those who have customized their photoblog themes to have paging (next/previous) of photos in a gallery. Before this update, it was not possible to page through photos in a specific gallery.

Note: This does not effect photoblogs which have not been customized.

Two page templates need to be edited in order to get the photos paging in a gallery, they are:

• _thumb
• Blog

_thumb page template

The _thumb page template has the same edits no-matter what Theme you are using. Open your _thumb page template and add the follow code to the very top:

Code: Select all

#set($galPath = "")
#if($model.weblogGallery)
   #set($galPath = $model.weblogGallery.path)
#end


Then, further-down in the same page template you should see the following:

Code: Select all

$url.entry($image.entry.anchor)

This needs to be changed to:

Code: Select all

$url.entry($image.entry.anchor, $galPath)

That's the _thumb template done. The result should be something like the following, although their are slight variations between the different themes:

Code: Select all

#set($galPath = "")
#if($model.weblogGallery)
   #set($galPath = $model.weblogGallery.path)
#end
#foreach( $image in $images )
   #set($thumb = $image.thumbSquare)
   #set($preview = '')
   #set($preview = $image.preview)
   #if($utils.isEmpty($preview)) #set($preview = $image) #end
   <a href="$url.entry($image.entry.anchor, $galPath)" title="$utils.removeHTML($image.entry.title)"><img src="$url.photo($thumb.path)" width="$thumb.width" height="$thumb.height" alt="#showImageAltTag($image)" class="thumb"></a>
#end


Blog page template

The edits to the Blog page template will be different depending upon the original Theme that was customized. The edits for each theme are shown below, just find the corresponding theme and compare the difference between your current Blog page template and the one below.

Arctic

Code: Select all

#includeTemplate($model.weblog "header")
#if($model.weblogGallery)
<div class="entryInfo" style="margin-bottom:10px;">
   <div class="galleryFeed"><a href="$url.feed.entries.atom($gal.path, false)" title="XML feed for gallery '$gal.name'"><img src="$url.absoluteSite/images/feed-icon-16x16.gif" alt="XML"/></a></div>
   <h3>#showWeblogGalleryPath($model.weblogGallery "Galleries" "|")</h3>
</div>
#end   
#set($pager = $model.getWeblogEntriesPager())
#showWeblogEntriesPager($pager)   
<div class="next-previous">#showNextPrevControl($pager)</div>
<script type="text/javascript">
<!--
   window.onload = function() {fadeIn('photo');window.name='main';}
//--!>
</script>
#includeTemplate($model.weblog "footer")


Basic

Code: Select all

#includeTemplate($model.weblog "header")
<center>
   #if($model.weblogGallery)
   <div id="page">
   <div class="galleryFeed"><a href="$url.feed.entries.atom($gal.path, false)" title="XML feed for gallery '$gal.name'"><img src="$url.absoluteSite/images/feed-icon-16x16.gif" alt="XML"/></a></div>
   <h3>#showWeblogGalleryPath($model.weblogGallery "Galleries" "|")</h3>
   </div>
   #end
    #set($pager = $model.getWeblogEntriesPager())
    #showWeblogEntriesPager($pager)
    <div class="next-previous">#showNextPrevControl($pager)</div>
</center>
<script type="text/javascript">
   window.onload = function() {fadeIn('photo');window.name='main';}
//--!>
</script>
#includeTemplate($model.weblog "footer")


Congo

Code: Select all

#includeTemplate($model.weblog "header")
<div align="center">
   #if($model.weblogGallery)
      <div id="galleriesContainer">
        <div id="Content">
          <div id="centercontent_wrap">
            <div id="centercontent">
              <h3 class="galleryTitle">#showWeblogGalleryPath($model.weblogGallery "Galleries" "::")</h3>
            </div>
          </div>
        </div>
      </div>
   #end
   #set($pager = $model.getWeblogEntriesPager())
   #showWeblogEntriesPager($pager)
   #showNextPrevControl($pager)
</div>
<script type="text/javascript">
<!--
   window.onload = function() {fadeIn('photo');window.name='main';}
//--!>
</script>
#includeTemplate($model.weblog "footer")


Curacao

Code: Select all

#includeTemplate($model.weblog "header")
<div id="mainContainer">
#if($model.weblogGallery)
<div id="sectionTitle">
<img src="http://localhost:8080/pdebug34/bobob/resource/images/round_left_turquoise.gif" width="5" height="32" class="navleft">
<div class="siteTitle">#showWeblogGalleryPath($model.weblogGallery "Galleries" "|")</div>
<img src="http://localhost:8080/pdebug34/bobob/resource/images/round_right_turquoise.gif" width="5" height="32" class="navright"></div>
#end
   #set($pager = $model.getWeblogEntriesPager())
   #showWeblogEntriesPager($pager)
   <div class="nextPrevious">#showNextPrevControl($pager)</div>
</div>
<script type="text/javascript">
<!--
   window.onload = function() {fadeIn('photo');window.name='main';}
//--!>
</script>
#includeTemplate($model.weblog "footer")


Intuition

Code: Select all

#includeTemplate($model.weblog "header")
#if($model.weblogGallery)
<div id="galleries" style="margin-bottom:10px;">
  <div class="galleryFeed"><a href="$url.feed.entries.atom($gal.path, false)" title="XML feed for gallery '$gal.name'"><img src="$url.absoluteSite/images/feed-icon-16x16.gif" alt="XML"/></a></div>
  <h3>#showWeblogGalleryPath($model.weblogGallery "Galleries" "|")</h3>
</div>
#end
#set($pager = $model.getWeblogEntriesPager())
#showWeblogEntriesPager($pager)
<div class="next-previous">#showNextPrevControl($pager)</div>
<script type="text/javascript">
<!--
   window.onload = function() {fadeIn('photo');window.name='main';}
//--!>
</script>
#includeTemplate($model.weblog "footer")


Jet

Code: Select all

#includeTemplate($model.weblog "header")
#if($model.weblogGallery)
<div class="galleryContainer">
  <div class="galleryHeading">
    <div class="galleryPath">#showWeblogGalleryPath($model.weblogGallery "Galleries" "|")</div>
  </div>
</div>
#end
#set($pager = $model.getWeblogEntriesPager())
#showEntriesPager($pager "day")
<div class="next-previous">#showNextPrevControl($pager)</div>
<script type="text/javascript">
window.onload = function() {fadeIn('photo');}

if (getRequestParameter('show') == 'commentsForm'){
    toggleSlide('commentsForm');
}
</script>
#includeTemplate($model.weblog "footer")


Mangosteen

Code: Select all

#includeTemplate($model.weblog "header")
<div id="Content">
   #if($model.weblogGallery)
      <h3>#showWeblogGalleryPath($model.weblogGallery "Galleries" "|")</h3>
   #end
   #set($pager = $model.getWeblogEntriesPager())
   #showWeblogEntriesPager($pager)
   <div class="next-previous">#showNextPrevControl($pager)</div>
</div>
<script type="text/javascript">
   window.onload = function() {fadeIn('photo');window.name='main';}
</script>
#includeTemplate($model.weblog "footer")


Pumpkin

Code: Select all

#includeTemplate($model.weblog "header")
<div id="container">
<div id="contentContainer">
   #if($model.weblogGallery)
   <div class="galleryDesc">
      <div class="galleryFeed"><a href="$url.feed.entries.atom($gal.path, false)" title="XML feed for gallery '$gal.name'"><img src="$url.absoluteSite/images/feed-icon-16x16.gif" alt="XML"/></a></div>
      <h3>#showWeblogGalleryPath($model.weblogGallery "nil" "|")</h3>
   </div>
   #end
    #set($pager = $model.getWeblogEntriesPager())
    #showWeblogEntriesPager($pager)
    <div class="bottom-next-prev">#showNextPrevControl($pager)</div>
</div>
<div id="navContainer">
    #includeTemplate($model.weblog "sidebar")
</div>
</div>
<script type="text/javascript">
   window.onload = function() {fadeIn('photo');window.name='main';}
</script>
#includeTemplate($model.weblog "footer")


Smoke

Code: Select all

#includeTemplate($model.weblog "header")
#if($model.weblogGallery)
<div id="contentContainer" style="margin-bottom:10px;">
  <div class="galleryPath">#showWeblogGalleryPath($model.weblogGallery "Galleries" "|")</div>
</div>
#end
#set($pager = $model.getWeblogEntriesPager())
#showEntriesPager($pager "day")
<div class="weblog-next-prev">#showNextPrevControl($pager)</div>
<script type="text/javascript">
window.onload = function() {fadeIn('photo');}

if (getRequestParameter('show') == 'commentsForm'){
    toggleSlide('commentsForm');
}
</script>
#includeTemplate($model.weblog "footer")


Zebra

Code: Select all

#includeTemplate($model.weblog "header")   
<div id="content">
<div id="middleContainer">
   #if($model.weblogGallery)
      <div class="title">#showWeblogGalleryPath($model.weblogGallery "Galleries" "|")</div>
   #end
   #set($pager = $model.getWeblogEntriesPager())
   #showWeblogEntriesPager($pager)
   <div class="next-previous">
      #showNextPrevControl($pager)
   </div>
</div>
</div>
<script type="text/javascript">
   window.onload = function() {fadeIn('photo');window.name='main';}
</script>
#includeTemplate($model.weblog "footer")


I don't want to hijack this thread, but I have a question about one of the photos in the news article. I like how the first gallery image is has one photo large and off to the side and the rest are thumbnails. Is that design with a particular theme? My gallery pages are all thumbnails.

Hi Laurie,

Yes, that's specific to the Smoke theme, however there's no reason you couldn't apply it to your theme (originally Arctic). You would need to edit your Galleries page template to look something like this:

Code: Select all

#includeTemplate($model.weblog "header")
<div id="contentContainer" style="text-align:left;">
#if($model.weblogGallery)
   <h3>#showWeblogGalleryPath($model.weblogGallery "nil" "|")</h3>
   #set($thisGal = $model.weblogGallery)
      #set($image = $thisGal.image)
      #set($thumb = $image.thumbLarge)
      <div class="galleryDesc">
         <a href="$url.entry($image.entry.anchor, $thisGal.path)" title="$utils.removeHTML($image.entry.title)"><img src="$url.photo($thumb.path)" width="$thumb.width" height="$thumb.height" class="galleryDescImage"/></a>
         <h2>$thisGal.Name | $thisGal.imageCount photos</h2>
         <p>$utils.formatDate($thisGal.date, "EEEE MMM dd, yyyy")</p>
         <p>$thisGal.description</p>
         <div class="galleryFeed"><a href="$url.feed.entries.atom($thisGal.path, false)" title="XML feed for gallery '$thisGal.name'"><img src="$url.absoluteSite/images/feed-icon-16x16.gif" alt="XML"/></a></div>
      </div>

    #set($galPage = $model.weblog.getPageByLink("gal"))
    #set($galleries = $model.weblogGallery.getWeblogGalleries()) 
    #parse($galPage.id)

   <div class="galleryThumbs">
      #set($pager = $model.getWeblogImagesPager("nil",48))
      #showImagesPager($pager "thumb")
      <div class="bottom-next-prev">#showNextPrevControl($pager)</div>
   </div>

#else
   <h3>Galleries</h3>
   #set($pager = $model.getWeblogGalleriesPager("nil", 12))
   #showGalleriesPager($pager "gal")
   <div class="bottom-next-prev">#showNextPrevControl($pager)</div>
#end
</div>
#includeTemplate($model.weblog "footer")


You would also need to add the following styles to both your light.css and dark.css style sheets:

light.css

Code: Select all

.galleryDesc {
   background-color: #EBEAEA;
   padding:10px;
   float:left;
   width:210px;
   margin:5px;
   text-align:center;
}

.galleryDescImage {
   border:5px solid #2E2E2E;
}


dark.css

Code: Select all

.galleryDesc {
   background-color: #0A0A0A;
   padding:10px;
   float:left;
   width:210px;
   margin:5px;
   text-align:center;
}

.galleryDescImage {
   border:5px solid #2E2E2E;
}


Note: Before you make any changes, backup/copy your page templates and style sheets. The above should work, but get back to me if there are any problems or styling issues.

Cheers,

Richard

Hi!

Thumb and Blog Templates changed! I don't remember 100% but I think my native theme was "basic" !

And I tried with "Photine" gallerie code, but I can't see the navigation gallery bar...

Any idea?

Thanks

Hi Joan,

Just had a look at your Blog template and it appears you have 2 with the same name. I've deleted one and now the changes work.

Cheers,

Richard