I don't know if what I want it's possible or not, but what I'm looking for is a way of displaying content differently, using tags.
If I have a post with a tag #movies, I would want to display an image of a camera. If the tag is #music, I would like to display an image of a radio.
Try this immediately under {block:Posts}, or before {/block:Posts} depending on where you want the signifier to be.
{block:HasTags}
{block:Tags}
<script type='text/javascript'>
var {Tag} = '{Tag}'; if ({Tag} == 'movies')
{document.write('Movies blah blah');}
</script>
{/block:Tags}
{/block:HasTags}
This should display the text "Movies blah blah" wherever you put the code on posts you tag with the tag "movies" (case sensitive).
Simply repeat for other tags.
Related
I'm trying to make all picture posts on my homepage not clickable, so they can't link to the permalinks. (I just want them to stay as miniatures with the hover cycle effect already provided by the theme)
I've tried removing {LinkOpenTag} and {LinkCloseTag} from:
{block:Photo}
<div class="wide-sizer">
<div class="image">
{LinkOpenTag}
<img src="{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}{block:IndexPage}{PhotoURL-500}{/block:IndexPage}" alt="{PhotoAlt}"
data-high-res="{PhotoURL-HighRes}"
data-width="{PhotoWidth-HighRes}"
data-height="{PhotoHeight-HighRes}"
/>
{LinkCloseTag}
</div>
But photos and photosets are still clickable.
This is my page: http://woodstudiofr.tumblr.com
I'm using the "Spectator Theme".
UPDATE: ok so i tried removing as data-permalink={Permalink}as lharby suggested, but now all the links redirect to /undefined.
Any ideas?
thanks again for your time !
As mentioned in my comment, the data-permalink attribute has been removed, but there is still some custom javascript which is casing the url to be returned undefined.
Go to the bottom of your template, before the closing <body> tag and add this code:
<script type="text/javascript">
$(document).ready(function(){
$('.post').unbind('click').click(function(){});
});
</script>
(Basically instead of binding the post to a click function which is in the custom javascript we are now attempting to unbind it on click).
I tested it in the browser and it looks to be working (although a couple of other methods I thought would work didn't).
EDIT
In order to change the cursor on the post element. Remove the clickable class from the .post div from the template (if you can, if it is hard coded in).
Alternatively inside the style tags at the bottom, add the following css:
.post-grid .post.photo.clickable a,
.post.clickable {
cursor: default;
}
The theme I use lets photoset images pop up to the grey gallery slide show.
If I post only a single photo nothing happens, even when I insert a clickthrough URL.
I'd like to have the grey slide show gallery for all images.
On the dashboard it works, but not in the theme.
I think there's some code missing, but I don't know it.
Could somebody have a look on it, please?
I use this theme http://mindspalace.tumblr.com
There's no official way for doing this, but you could 'piggyback' tumblr's Lightbox function Tumblr.Lightbox.init() since it's already loaded on your blog for photosets.
It accepts an array containing the urls of all the photoset images, but in this case there is only one image so you can just pass that.
A quick edit of the javascript tumblr appends to every photoset, to allow single photos:
<script class="inline_embed" type="text/javascript">
var domain = document.domain,
photo_{PostID} = [{
"width": "{PhotoWidth-HighRes}",
"height": "{PhotoHeight-HighRes}",
"low_res": "{PhotoURL-250}",
"high_res": "{PhotoURL-HighRes}"
}];
function event_is_alt_key(e) {
return ((!e && window.event && (window.event.metaKey || window.event.altKey)) || (e && (e.metaKey || e.altKey)));
};
document.getElementById('photo_{PostID}').onclick = function (e) {
if (event_is_alt_key(e)) return true;
window.parent.Tumblr.Lightbox.init(photo_{PostID});
return false;
}
</script>
In the Edit HTML screen of your theme's Customize, search for the {Block:Photo} and inside, look for the <img or {PhotoURL tag. You'll need to add an id="{PostID} to the <img /> so it will resemble something like this:
<img id="photo_{PostID}" src="{PhotoURL-500}" />
Once you've done that, copy the modified javascript code block at the top and paste it after the image code, and save. When you click an image post, it should bring up the Lightbox that tumblr uses for photosets and show the vignette background.
Creating a custom HTML theme
I have a tumblr blog. I want to put a Google Translate Tool & Button on my tumblr blog. How can I do? Unfortunately, I cant find it in tumblr help pages.
Go here: https://translate.google.com/manager/add
Follow all of the instructions and you'll get two pieces of code, one that looks like this:
<meta name="google-translate-customization" content="272b1f36bdc17cf1-0221013045ec1abb-gfd965ee1275b4499-14"></meta>
You'll want to place the <meta> code before the closing </head> tag, this will be at the top of your theme.
The other piece of code looks like this:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
For this piece of code you'll need to place it where you want the tool to appear on your theme, likely this will be near the top of your page, just after the opening <body> tag. Your blog will likely have some sort of 'wrapping' div, so you maybe want to place it inside of that.
You'll need to fiddle around a little bit to position it how you like.
To put both of these bits of code into your theme, you'll need to go to the 'Customize Theme' page and click on 'Edit HTML'.
The code I use to render share button is:
<a name="fb_share" share_url="http://www.XYZ.com" type="button_count"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
The above code exists in the page and works fine and when users clicks a button, that action will add the above code (with a different url) to the dom and My goal is to render another facebook button with count. However the problem is that the FB.Share js seems to somehow know it has already did the job and will not render again.
After poking around with the FB.Share script a bit I found this methoe FB.Share.renderAll() can force a re-render but without count numbers.
Anyone has any insights? Thanks!
try calling the JavaScript SDK's FB.XFBML.parse();
See: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
When you re-add facebook share script, it renders again the share button.
for example: $.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share");
What is different of having a facebook share button just by having an anchor tag:
<a href="http://www.facebook.com/sharer.php?u=<url to share>&t=<title of content>">
<img src="custom.jpg" />
</a>
than having one with the javascript provided by FB follow by the anchor tag?
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
I just want to verify I'm not missing any of the basic functionality of sharing a link by using the anchor tag only because I want to use the anchor tag way to customize my button image.
The end result of the share is the same, as when you click the button it ends up taking you to the same endpoint. The difference is in how the button looks (and the count that shows up if that's the layout you've chosen).