Make Tumblr Photo Post Act As Photoset - html

I am new to Tumblr. I have such problem:
I am using Indy theme. When I post several photos, by clicking it acts like slideshow, I mean it's posted as {block:Photoset}. But when I post one photo, after clicking, it redirects me to another page.
All I want is to make even one photo act as photoset and after clicking be displayed on the same page.
Thans in advance.
Here is part of the html of the theme:
{block:Photo}
<article class="post-photo" id="{PostID}">
<div class="post-content">
{block:IndexPage}<img src="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" alt="{PhotoAlt}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}{/block:PermalinkPage}
{block:Caption}<p>{Caption}</p>{/block:Caption}
{/block:Photo}
{block:Photoset}>
<article class="post-photoset" id="{PostID}">
<div class="post-content">
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
{block:Photos}
<div class="photo-data">
<a rel="post-{PostID}" href="{PhotoURL-HighRes}" {block:Caption}title="{Caption}"{/block:Caption}>
<div class="pxu-photo">
<img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
</div>
</a>
</div>
{/block:Photos}
</div>
{block:Caption}<p>{Caption}</p>{/block:Caption}
{/block:Photoset}

It looks like you might be able to use the already existing Tumblr lightbox by wrapping your image in the same div -
<div class="photo-slideshow">
If that doesn't work then you could use a third party library to make it happen, for instance, here's a pretty simple lightbox -
http://lokeshdhakar.com/projects/lightbox2/
After you get that linked into your code, then just use their docs to make your images load into the lightbox!

Related

Post on Tumblr without Text - HTML

I'm making a new blog and I'm having a big issue. So far I could create the front page, but when I try to post something it doesn't display anything.
This is the code I have:
{block:Posts}
{block:PermalinkPage}{block:Date}
<a />
{/block:Date}{/block:PermalinkPage}
</a>
</div>
{/block:Posts}
This is the post/permalink: http://lifeafterpixel.tumblr.com/post/109350024127/here-1
As you can see, only the background appears as such the topbar. I need to show the text. It should appear only the text, images, audio, and anything like a normal post. Why is it not happening?
To show the title and body for a Text Post on the permalink page:
{block:Posts}
{block:PermalinkPage}
{block:Title}
<h2>{Title}</h2>
{/block:Title}
{Body}
{/block:PermalinkPage}
{/block:Posts}
However, in the spirit of StackOverflow, this question should be closed as too broad. The OP is asking for code for all post types, which is the bulk of the theme.
I suggest the OP reads the How to create a custom HTML theme by Tumblr before posting more questions.

Link tumblr photos on theme to permalink page?

My tumblr theme currently when you click on picutres just shows a bigger version of the picture itself, however I want the page to link to the permalink page instead.
{block:Photo}
<div class="tumblrset">
<div class="tumblrset-photo-frame" data-height="{PhotoHeight-HighRes}" data-width="{PhotoWidth-HighRes}">
<a class="tumblrset-photo-wrap" href="{PhotoURL-HighRes}" rel="{PostID}">
<img alt="{PhotoAlt}" class="tumblrset-photo" data-highres="{PhotoURL-HighRes}" src="{PhotoURL-250}"/>
</a>
</div>
</div>
{block:Photo}
Replace {PhotoURL-HighRes} with {Permalink}.
<a class="tumblrset-photo-wrap" href="{Permalink}" rel="{PostID}">
<img alt="{PhotoAlt}" class="tumblrset-photo" data-highres="{PhotoURL-HighRes}" src="{PhotoURL-250}"/>
</a>
This will work for Photo posts. I am not 100% sure on Photosets, as it depends on the implementation. If it doesn't please update the question with the markup.

Linking to video within website on two different pages

I want to know how I can link to a video using a thumb of a image from one page to another.
For instance if I wanted to link to the page only from one page to another I would simply put
<img src="theotherpage.html" />
But that doesnt quite do the job for me. I need to link to the video directly.
How can I do that?
Just wrap the image with <a> tag
<a href="link-to-direct-video">
<img src="image-thumb-src" />
</a>
If I understand your question correctly.
If you want to link to a page with one video, use YardenST's answer. If you want to link to a page with many videos, but you want to scroll to that video you can use an anchor.
On the videos page, say you have the following HTML:
<div id="video1"> ... </div>
<div id="video2"> ... </div>
If you wanted to link to the second video, you could use
<a href="/videos.html#video2">
<img src="image-thumb" />
</a>

How do I disable Tumblr Photosets or change the size of them? (there is no block:photoset in my html)

I have been searching for weeks for a resolution to my problem.
I know very little about editing html and I have tried the solutions posted on this site but none of them seems to work.
I am using the "Just Plain" theme and that is a theme that was created before the new photoset layout. I don't think it has been updated, because I cannot find {block:Photos} {/block:Photos} anywhere within the themes html.
I have edited the html to make the post size 750px but I'm afraid that's about as far as my skills with html go. I'm a complete novice.
If anyone could help me disable the photoset function or resize the images in a photoset to 750px and have them appear one after each other then I would be very grateful.
I would post the block of html that needs editing but like I said, there is no block whatsoever regarding photosets.
Sorry if this doesn't make sense.
The tumblr in question is http://nothingbutthe-truth.com
this is how I did it:
{block:Photoset}
{block:Photos}
<figure class="post-image">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
</figure>
{/block:Photos}
{block:Caption}
<div class="post-description">
{Caption}
</div>
{/block:Caption}
{/block:Photoset}
Everything inside the {block:Photos} tag will be rendered for each photo in the set.
So you can define your own markup instead of relying on the provided iframe.
Inside these tags you can work with the standard block-variables of the photo posts.
http://www.tumblr.com/docs/en/custom_themes#photo-posts
If you want to disable photosets entirely, just delete {block:Photoset} and everything in between.
In terms of resizing, you can actually change the size of the images used by selection by using {Photoset-700} like so:
{block:Photoset}
<li class="post photoset">
{Photoset-700}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}
This isn't 750px exactly, but 700px should be close enough. I don't think it's possible to get any higher resolution images anyway so it's the closest you can get to exact resolution.
You can learn more about creating themes here: http://www.tumblr.com/docs/en/custom_themes#photoset-posts

Linking tumblr photos directly to the source

I'm trying to make my tumblr posts link directly to the source when clicked rather than going to the post page and having the source link there to click.
Here's the code I have for the photo posts.
{block:Photo}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="photo">
<div class="photobox"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
I've tried changing the photobox 'permalink' to source etc with no avail.
Anyone got any ideas?
In the hope that someone who needs this will find it, here's a way I found to show {LinkURL} when it's available, and some other url when it's not.
Tumblr offers {block:LinkURL} to display some code when {LinkURL} is available, but there's no {block:NoLinkURL} to use when {LinkURL} is NOT available.
Ideally, this should be possible:
<a
{block:LinkURL}href="{LinkURL}"{/block:LinkURL}
{block:NoLinkURL}href="{Permalink}"{/block:NoLinkURL}> <!-- does NOT work -->
<img src="{PhotoURL-400}"/>
</a>
But {block:NoLinkURL} doesn't exist, so I'm using {block:LinkURL} to hijack the normal link instead:
<a {block:LinkURL} href="{LinkURL}" data-ignored-{/block:LinkURL}href="{Permalink}">
<img src="{PhotoURL-400}"/>
</a>
If {LinkURL} is available both links will be in the HTML, but only one is read.
Example output
This is the output when {LinkURL} is not available:
<a href="/permalink">
<img src="/image.jpg"/>
</a>
And this when is the output when {LinkURL} is available:
<a href="/linkurl" data-ignored-href="/permalink">
<img src="/image.jpg"/>
</a>
after comments edit
It should be <a href="{LinkURL}">
You have to make sure when you're adding the image that you've specified the target as outside of tumblr too.