A quick question in regards permalinks, and clicking on an image in themes
like Tessellate.

When clicking on a image, it will open a large image.  A second click will
enlarge the image. If I then would like to go back to the index page. I
then have to click back through a different " odd middle page", for then
click on my main logo in order for me to get back onto the index page?

I’d like to keep the “larger picture function”, but Is there a way to avoid
this odd middle page and the permalinks all together?    

As I see it, It’s just a bunch of unnecessary clicks that IMHO create
confusion for the viewer, and myself :)

I'm not exactly sure what you're describing. Can you give me a link to the
blog using this theme where I can try to replicate what you're seeing?

This is the site:   hjortstudio(dot)com

I realized that I might have confused the term "Permalinks" with the small
hearts and the small number next to the heart. I would like to get rid of
them both.

But most of all, I would like to change the "middle" page. Either to be
able to customize it, or to get rid of it all together.
Example of the middle page:  http://hjortstudio.com/post/28527970325

.e

Ah. From hjortstudio.com I click the first post and get to
hjortstudio.com/image/28675183223. Then no matter how many times I click
the image, clicking the back link me to hjortstudio.com/post/28675183223.
This is the *permalink page*.

You cannot change the markup of hjortstudio.com/image/28675183223.
Yesterday was the first time I've seen something like this; it looks like a
new Tumblr feature. Let's call it the '*image page*' for now.

You cannot change the image page, so you cannot change what page it links
to. You, however, can change the permalink page. You can also change the
index page (your home page). So I see two options:

   - Add the zooming feature to your permalink page, then set your index
   page to link to permalink pages instead of image pages.
   - Have your permalink pages automatically redirect to the index page,
   for when people click the back link. This saves you the trouble to having
   to redesign your permalink page but requires JavaScript.

Which one sounds better to you?

Me too!

Exactly. You can write your own code that does exactly what the image page
does. And you can bypass the image page by not linking to it.

Is there a place, or a site where I could copy and paste some code from, or

"Tumblr code" is ambiguous. (Usually, it's not ambiguous and means the
following first interpretation, but in the context of this thread, I find
it a bit ambiguous… sorry!)

   - *Tumblr theme code is code that defines a Tumblr theme. It's written
   in a special markup, which is HTML augmented with Tumblr theme blocks and
   variables (the things inside braces).* It's what you see when you go to
   Tumblr » your blog name » Customize » Edit HTML. Tumblr wants everyone to
   customize their theme, so these blocks and variables are rather well
   documented <http://www.tumblr.com/docs/en/custom_themes/>.
   - The (assumedly proprietary) code that powers the Tumblr dashboard, the
   image page and other features that *you can't change* is… well, not for
   you to change. (Because you can't.) However, because HTML, CSS, and
   JavaScript must be sent to your web browser for your browser to use it, you
   can certainly examine how certain parts of Tumblr work. In particular, it
   shouldn't be hard at all to duplicate what the image page does.

Actually, I think I can see how the image page works. *I think it simply
uses JavaScript to toggle between {Photo-500} and {Photo-HighRes}.* If you
want, I can write some code to do the same thing.

Also, I'm new to Tumblr, How often do they implement new features like

I'm not sure, but my take is that Tumblr comes up with a lot of this stuff
without announcing it, but usually it's backwards-compatible (i.e., nothing
will break).
*
*
*So what does this mean in context of the images page?* For a photo post,
you can set a click-through link, which is a webpage you to when you click
the photo. (See here. <http://www.tumblr.com/new/photo>) If you don't set a
click-through link, the image page becomes the click-through link. The
images page appears to be backwards-compatible, because before, you're
taken to the image itself. Now you're taken to a page that has the image.
No big deal (at least I think).

It all make sense. I've already changed 1 link to point directly to the
permapage. Works perfect.

Is the code for the permapage located / intermingled with the same code
used on the index page?

Yes, I'd very much like some help with the code. I'm very appreciative for
your help.

.e

It all make sense. I've already changed 1 link to point directly to the
permapage. Works perfect.

Is the code for the permapage located / intermingled with the same code
used on the index page?

Yes, I'd very much like some help with the code. I'm very appreciative for
your help.

.e

Sorry for the re-post.   The list has deleted 3 of my previously post and
it looked for a moment as if my last post has been deleted as well.

No worries about the re-post.

Oh, I was actually mistaken about toggling between {Photo-500} and
{Photo-HighRes}. What the image page does it exactly what most web browsers
do when you navigate to an image file like this one<http://media.tumblr.com/tumblr_m83w82sZOn1rcgguuo1_1280.png> and
the brower's window size is smaller than the image: it initially fits to
screen, but when you click it, it becomes full size.

However, zoomed-out part is tricky unless you either know the height of all
other things on the webpage, or you know the zoomed-out height of the image.

Anyway. I think my original idea can work and it's simple. Insert the
following in the appropriate places.

<style>
.resizingPhoto {display: block;} /* Or use inline-block, whichever one
looks better with your theme. */
.resizingPhoto img.smallVersion {display: none;}
.resizingPhoto img.largeVersion {display: block;}
.resizingPhoto.small img.largeVersion {display: none;}
.resizingPhoto.small img.smallVersion {display: block;}
</style>

<script>
resizingPhotoToggle = function(element) {
if (element.className.indexOf(' small') == -1) {element.className += '
small'} /* If class 'small' isn't found, then add it. */
else {element.className = element.className.replace(/ ?\bsmall\b/g, '')} /*
Otherwise, remove it. */

</script>

{block:Photo}
…
{block:PermalinkPage}
<a href="{Permalink}" class="resizingPhoto small"
onclick="resizingPhotoToggle(this)">
<img src="{PhotoURL-500}" class="smallVersion" alt="{PhotoAlt}"/>
<img src="{PhotoURL-HighRes}" class="largeVersion" alt="{PhotoAlt}"/>
</a>
{/block:PermalinkPage}
…
{/block:Photo}

I haven't tested this; let me know if it works!