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.
Related
I'm using Real Homes theme, and I have this weird problem. After finishing up my website, I've noticed that some titles are not H1 tag, but H2. As I said, not everyone. I thought it might be the template, but some of the ones with H1 title use a template. So I checked them manually and I can't figure out where to edit this. So my question became: how do I override the banner title tag so that every banner title is H1 tag? Here is an example of a code in H1 and H2 tags. Thanks!
</div>
<section id="rh-banner-attachment-parallax" class="rh_banner rh_banner__image" style="background-image: url('');">
<div class="rh_banner__cover"></div>
<div class="rh_banner__wrap">
<h2 class="rh_banner__title">Real Estate</h2>
<div class="rh_banner__controls">
</div>
<section id="rh-banner-attachment-parallax" class="rh_banner rh_banner__image" style="background-image: url('');">
<div class="rh_banner__cover"></div>
<div class="rh_banner__wrap">
<h1 class="rh_banner__title">News</h1>
</div>
</section> <section class="rh_section rh_section--flex rh_wrap--padding rh_wrap--topPadding">
<div class="rh_page rh_page__listing_page rh_page__news rh_page__main">
I tried editing some files in editor theme, the one inside wordpress, but nothing worked. In the end, I couldn't even find the exact line I was looking for. I guess I was hoping to find a line do edit, but I'm not skilled enough I'm afraid. That's why I want to override the info. I also tried searching for a solution here, but nothing seems to work for this theme. Thanks in advance.
Edit: you can see the problem in the demo of this theme as well: https://modern.realhomes.io
The Contact page and News page have the banner title in H1 tag, while the other pages are in H2 tag.
I was wondering - I have a theme on my tumblog where photos stick to the background while text posts can scroll. It can be found here, if my description is confusing. I was wondering how to make it so that on the theme, the caption appears as a separate text post - if captions are turned on currently, they look like this:
To fix this, right now I am posting separate text posts to caption each photo. I've changed the post block from this
{block:Caption}
<div class="text post-bg">
<div class="text-block"><span>{Caption}</span></div>{/block:Caption}
to this
{block:Caption}
<div class="text post-bg">
<div class="text-block"><span>{Caption}</span></div>{/block:Caption}
</div>
but this just makes a transparent description in the style of a text post appear above the photo.
Is it possible to change it so that this description appears as a separate post, below the photo post, without actually going in and making text posts for each one?
Thank you for your help! I appreciate it!
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!
I'm trying to edit Tumblr Custom HTML to add another header link to my Tumblr theme.
I have searched stackoverflow for "Tumblr" "Custom HTML" "block:Pages" and "link" but have not found the bug in my code that's leading to the following problem:
I copy and pasted
<li>{lang:Archive}</li>
I then changed
"/archive/"
to
"/submit/"
and
{lang:Archive}
to
{lang:Submit a Post}
I end up with a webpage with a header link that, when clicked on, takes you to the correct page, but there is no text for that link. Please see a screenshot of the problem and the website I'm trying to fix.
I've included a code snippet so that you can help me troubleshoot. Thank you!
<div class="container">
<div id="headerwrap">
<div class="span-18" id="header">
<div class="span-18 last"><ul>
<li>{Title}</li>
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{block:HasPages}
<li>{lang:Random post}</li>
<li>{lang:Submit a Post}</li>
<li>{lang:Archive}</li>
</ul></div>
</div></div>
{block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
<div class="span-24"><div class="span-5 blue_striped"> </div><div class="span-18 last"><p>{Description}</p></div></div>
<hr/>
The {lang:} tag lets you specify an English string that should be displayed in the user's language, but it only works with a predefined set of strings that can be found here:
http://www.tumblr.com/docs/en/localizing_themes
You can "request a string be added", but I have no idea how long that would take. Best would probably be to drop the {lang:} wrapper and just include the text directly:
<li>Submit a Post</li>
The string won't be localized for non-English users, but oh well!
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