How to disabling Permalinks and odd “middle” page?

[CFX]

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 :)

[Sean Zhu]

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?

[CFX]

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

 

[Sean Zhu]

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?

[CFX]

Great, I like both options. 

I think I like the first option the best. Then I'd be able to continue with the black background theme. Are you saying that I'd be able to implement the same zooming feature as the one I see on the image page (second click = enlarge the entire image to full size), and then at the same time bypassing the image page all together?

Is there a place, or a site where I could copy and paste some code from, or to lean more about Tumblr code and features?

Also, I'm new to Tumblr, How often do they implement new features like this. It makes me feel that its a bit insecure to put too much trust in to Tumblr?

Best,

.e

[Sean Zhu]

On Saturday, August 4, 2012 2:12:07 PM UTC-7, CFX wrote:

Great, I like both options. I think I like the first option the best.

Me too!

 

Then I'd be able to continue with the black background theme. Are you saying that I'd be able to implement the same zooming feature as the one I see on the image page (second click = enlarge the entire image to full size), and then at the same time bypassing the image page all together?

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 to lean more about Tumblr code and features?

"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.
• 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 this. It makes me feel that its a bit insecure to put too much trust in to Tumblr?

 

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.) 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).

[CFX]

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

[CFX]

[CFX]

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.

[Sean Zhu]

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 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!