I'm modifying a Tumblr theme. I have a page newsletter and only on this page I want to add a sign up form (hard coded).
Is it possible in Tumblr to see if the current page == 'newsletter' or something? Maybe by ID?
I know it is possible for posts but I need it for a page.
Thanks!
A (slightly) safer solution/hack -
{block:PermalinkPage}{block:Posts}{block:PostTitle}
<script>
var postID = '{PostID}',
postTitle = {JSPostTitle};
if (!postID && postTitle === 'Name of your Newsletter Page') {
// Tumblr custom "pages" have no post ID
// Dynamically insert your HTML, or Dynamically "Show" a hidden element
}
</script>
{/block:PostTitle}{/block:Posts}{/block:PermalinkPage}
Where Name of your Newsletter Page is the Page Title you assign your newsletter page on Tumblr.
Wrapping this <script> in {block:PermalinkPage}...etc ensures the script only renders on the right kinds of pages.
Then, to be safe we must then check this permalink page does not have a Post ID, so we don't accidentally match an actual Post. The only other possibility for a permalink page with no Post ID is a custom tumblr Page, so it suffices to check the Page Title to some preset value.
In general, switching based on the window.location of a page is really not a good solution.
As for creating / showing the signup form -- I'd personally go with hard-coding the form on the Tumblr Theme with display: none and just toggle the form visible with the JavaScript -- but that's my opinion. You could insert it into the DOM with the script as well.
Unfortunately, that function does not exist in Tumblr. What you'll need to do is check the URL of the page that you're on, which is pretty simple.
You should be able to do something like this in JavaScript:
var currentPath = window.location.pathname; // store current path
if( currentPath.indexOf('newsletter') ) { // check if 'newsletter' is in our path
// add your sign up form here
}
Related
I use custome template in confluence with Task list elements to create a page
Description of content using checkboxes - is very important for me
After creating any page the user can click on an item by chance and thereby change the value of the field
How can I protect a page from accidental changes ?
I don't want to use Page Restrictions, maybe there is another solving of this problem ?
The only method I found for achieving this was to write JavaScript inside a {html} macro which gets the current userid, checks the userid against a list of allowed users, if the userid is not on the list then disables or hides the HTML code on the page in this DOM so the current user can't change it. This is not the best way or recommended but it can work quite well.
For example, to hide the checkbox from users who are not logged in:
{html}
<script>
AJS.$(document).ready(function() {
if(jQuery(".login-link").size()>0) {
AJS.$(".checkboxeditclass").hide();
}
});
<script>
{html}
there was a similar question to this one asked a while back - but for some reason the comment that contained specific instructions for the workaround was deleted.
I am attempting to create a landing page on a tumblr page using the redirect code below.
<script type="text/javascript">
if(location.href == 'http://labellablog.com/') location.replace('http://labellablog.com/welcome');;
</script>
The issue that I'm experiencing is the same as the person who posted the question in the first place - by putting the redirect code in the index page, it creates a loop. i.e. In trying to click the link on the 'welcome page' in order to get to the home page containing blog posts, navigation etc., it simply re-directs to the 'welcome' page.
The solution that is mentioned (not in great detail) on another question states that you must set the cookies to expire in a certain amount of time. Unfortunately I'm a huge amateur when it comes to coding and am not entirely sure how to achieve this.
Thanks in advance for any advice.
Method 1
Based on your question this is how I would resolve it (this is not using the cookie method at all, but I will come to that).
Make sure jquery is installed in your theme, alot of themes already have it, if not you can add it to the head of the document like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Lets look for the index page:
var primaryDir = document.location.pathname.split("/")[1]; // get the first directory
if (!primaryDir){ // if the primary directory is empty (index page) lets redirect to another page
window.location('/welcome');
}
You can use /welcome and that will work if you change the name/url of your site/tumblr.
So this method means this will always run (unless you disable javascript) for every client that connects to your site. This means effectively that the index page is never visible.
Now if you wanted a cookie method, this would mean that you would create the redirect on the first visit, then set the cookie and then after that the index page would be visible.
If that is what you want, let me know, but that involves quite a bit more code, slightly more complex solution.
EDIT
Another way to achieve this is to create a hidden div in the main template that only shows on the index page and is hidden on all other pages, this means you don't have to rely on a slightly slower redirect.
I only posted an answer to that issue the other day: How can I make a Tumblr background image only for one page?
Method 2
OK here is a method adopting cookies.
First I recommend downloading this jquery cookie plugin
You will then need to link to that as a resource in your theme, so you need somewhere to host that file. I use dropbox, but tumblr also has a repository for linking to files (well it used to seems to have disappeared).
Now create an element that will sit over the main page:
Enter
You can style this to fill the whole page if required (modify to your needs):
#entry {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:#CCC;
color:#FFF;
// yadda yadda
}
Now we need some click event to create the cookie when we click on this huge anchor:
$(document).ready(function(){
var entry = $('#entry'); // lets cache the selector in a variable
entry.on('click',function(){
$.cookie('deadlyrhythm', '1', { path: '/', expires: 1}); // set a cookie with the name deadlyrhythm to the value of 1 on the entire site for 1 day.
$(this).hide();
return false;
});
});
Now we need a method to check if the cookie exists, so inside the same document ready function:
if ($.cookie('deadlyrhythm') != '1'){
entry.hide();
}
This should mean that for 24 hours the cookie is set and the entry will not display if the same user revists the site, but it will after one day, of course you can set that value to anything you like.
As I mentioned this is slightly more complex to implement, but in the console of the browser you can check to see if a cookie exists and delete it manually (I use chrome for this) this is really useful for testing.
In tumblr, is it possible to show only posts with a certain tag in the home page?
If so, how is it done?
I just wrote up the solution to the opposite problem here:
How to hide the posts with a given tag from the homepage.
You can take inspiration from there and implement the opposite. Alternatively, you can simply add a "hidden" tag to each one of the things that you don't want displayed on the homepage.
I know that this topic is quite old, but I figured I'd share what I did for anyone who is still looking for an answer to this problem.
First, paste the following code after the "</title>" in your theme HTML.
<meta name="text:Default Tag" content="" />
Next, right after the "<body>" in your theme's HTML, paste the following:
{block:IndexPage}<script type="text/javascript">
var url = location.href;
if (url == "{BlogURL}") {
window.location = "{BlogURL}tagged/{text:Default Tag}";
}
</script>{/block:IndexPage}
In your theme settings, you should see a box labeled "Default Tag". Put the tag you'd like posts to appear for in that box (without a hashtag) and click save.
Now, if someone visits your blog, it will forward them to the page that shows posts with your specified tag. Of course, this probably isn't the best way of doing it, but it's the best way I could come up with that wouldn't mess up themes.
Another thing I like about this way of doing this, is that you can send someone your blog URL with a "/?" appended to it (e.g. "myblog.tumblr.com/?") and it will show all of your posts.
Using mircealungu's suggestion worked perfectly for me! Here's how I did it:
1. Find the article tag, and add the classname:
class="notfeatured {TagsAsClasses}"
If it already has a classname, add the part in bold above inside the classname quotes. Mine ended up looking like this:
<article id="{PostID}" class="post notfeatured {TagsAsClasses} {PostType}{block:PermalinkPage} {block:Date}not-{/block:Date}page{/block:PermalinkPage}">
2. Find the div tag that precedes the article tag, and add the classname:
class="{block:TagPage} tag_page {/block:TagPage}{block:PermalinkPage}perma_page{/block:PermalinkPage}"
Again, if a class already exists, just add the part in bold above inside the classname quotes. Mine ended up like this:
<div id="posts" class="{block:TagPage} tag_page {/block:TagPage}{block:PermalinkPage}perma_page{/block:PermalinkPage}" >
3. Finally, add this to your CSS:
article.notfeatured {display: none;}
article.featured, .tag_page article.notfeatured, .perma_page article.notfeatured {display: block;}
Now any post tagged as "featured" will display on your home page, but nothing else. So far no issues for me, it works great! You can see it here.
You can also use javascript to reorder the display so you can make the featured posts appear first in a list. The script is very simple:
$('article.featured').prependTo('#posts');
And here is a demo. Just place that inside javascript tags and put it right before the /body tag in your theme. In this case don't use the CSS above, because you don't want to hide the posts. I implemented a .top class for the script and kept the .featured class for the CSS, and I use both the CSS and the script.
Tumblr’s Custom Themes don’t provide such a functionality.
You could use JS or CSS to (visually) hide all posts without a specific tag on the index page, but that way you won’t have the full 10 (or whatever you configured) posts per page anymore.
You could probably use Tumblr’s API to create a list of matching posts (with Javascript) and display that content instead of the default posts (so your custom theme would only contain the script for the index page content). You would have to make sure that the pager still works, though.
Actually, it is possible, but it might not work how you want.
1st. Identify the id of your individual posts (usually something like #post or #entry, lets call yours #entry)
2nd. Replace your opening post div with this:
2nd. Add this bit of css
{block:IndexPage}
#entry (or whatever name it is) {display:none}
.featured {display:inline !important}
{/block:IndexPAge}
3rd. Tag all the posts you want to show on your homepage without quotes as "featured"
This should work, but it will most likely hide all the non "featured" posts on your search page and tag page as well, which you may not want.
If you want your users to be directed to a specific 'splashpage' when they visit your blog, you could always use a jquery redirect script. Hope some of this helped!
Im sorry to say, with their existing theme options as of today, you cannot achieve this without horribly ruining your seo reputation.
I have tried many ways to do this, using tumblr php api and other,
This worked for me: I am using a page outside tumblr and loading the tagged posts via curl php calls.
It can be done via ajax but for SEO reasons I wanted to use php.
Here is the code:
$oath = 'xxx';
$blogName = 'yyy.tumblr.com';
$tag='tagname';
$apiLink = "http://api.tumblr.com/v2/blog/$blogName/posts/?api_key=$oath&tag=$tag";
// Initializing curl
$ch = curl_init( $apiLink );
// Configuring curl options
$options = array(
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => array('Content-type: application/json') ,
);
// Setting curl options
curl_setopt_array( $ch, $options );
// Getting results
$result = curl_exec($ch); // Getting JSON result string
$data = json_decode($result);
$posts = $data->response->posts;
I realise this is old, but I've just had to do it, so here is my solution. At the end of the theme, in the script tags add:
{block:IndexPage}
$( ".the-posts" ).load( "tagged/home .the-posts article" );
{/block:IndexPage}
Where home is the tag you have given the posts you wish to see on the index page. This will basically load the correct articles into the posts div, replacing what it there. See the jquery man page: http://api.jquery.com/load/ for more info.
I'm creating a website using multiple views.
The tag and the tags of the page get changed through a a $rootScope variable.
so I have something like
<html>
<head>
<title ng-bind="page_title"></title>
<meta property="og:title" content="{{page_title}}">
</head>
Whenever each view get loaded on the website, the page_title variable changes and the title and the og:title tags get updated (everything works as expected).
The problem is that I need, on some views to load a facebook, a google+ and a twitter button.
I can display them properly but if I click on each them the page title appear to be something like:
{{page_title}}
I've tried to delay the execution of the scripts of each button using setTimeOut but to no good.
But the scripts just read whatever is written, they don't parse the page_title.
Does anyone know a workaround to this?
Thank you
This can't be done using javascript. Some people think that Facebook is reading what's currently on the page. It's not. It makes a separate request to your server using the same url (from window.location.href) using it's Scraper, and the Facebook Scraper does not run javascript. That's why you get {{page_title}} when clicking on something like a Facebook share button. Your content will have to be generated by the server so when Facebook goes to hit the url it gets the content it needs up front without the need for javascript. You can tackle the server side rendering in a fews ways.
You can allow your server side technology to render the content.
You can use the PhantomJS approach https://github.com/steeve/angular-seo.
There's also a possibility that you can re-render Facebook widgets. Use their parse method:
FB.XFBML.parse();
after your angular stuff has completed. It's not working for my share button (yet!!), but I tested it on likes, and it's cool. Basically it re-scans the DOM and renders the Facebook widgets. You can also pass it a single element, something like this directive:
'use strict';
angular.module('ngApp')
.directive("fbLike", function($rootScope) {
return function (scope, iElement, iAttrs) {
if (FB && scope.$last) {
FB.XFBML.parse(iElement[0]);
}
};
});
This snippet would rescan the DOM for html5 facebook fb-like widgets when creating the last element in angular repeater.
I have a page where users must initiate actions on multiple objects, but Facebooks design limits you to just one object per page using the required meta property tags.
Has anyone found a solution to this problem?
The Open Graph uses the URL as the object identifier, so its not possible to have several objects on one page, the page is the object.
Instead, you'll need a URL for each object, and that URL's HTML should contain the correct OG markup.
You can put multiple like buttons on one page, and make them point at each of your objects by specifying the 'href' parameter for each like button.
However, if you want the user to end up back at the SAME page when they click on the link to each of these objects, you can do this, but its a bit tricksy...
On your object pages, on your server, look at the incoming request useragent. If the useragent contains the string 'facebookexternalhit' then render the HTML and the OG markup - this is how the Facebook scraper sees your page. If the useragent does not contain this string, perform a 302 redirct to the page you want the user to see.
Result? Many objects, but only one user-visible page. Win.
And this is how you would do it:
<?php
if ($_SERVER["HTTP_USER_AGENT"] != "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)") {
redirect('http://www.somesite.com', 302);
}
function redirect($url, $type=302) {
if ($type == 301) header("HTTP/1.1 301 Moved Permanently");
header("Location: $url");
die();
}
?>
<html...
https://stackoverflow.com/a/7659770/1354666 This is a great answer, but a few things about it aren't working out well for me, so I've tried an alternative.
Instead of using href's in button tags I'm using Iframes.
Make a series of html pages for each of OG objects.
In Each of these pages add the necessary facebook header scripts and facebook root elements to call the facebook api.
Create form input elements that will call the actions for each of these OG objects. Give each of these elements an id.
Include a small script that will determine if you're and Iframe or a page, so you can redirect users back to your home page if they click on the facebook feed.
Finally, place and your sized iframe with a style set to no frame on the page and set it to no scroll. Use the ids of the form elements to target which action should be in the iframe view.
I'm still working on refining this for my mobile phones output, but it's working as I it should for most browsers.
FB uses the URL you assign to the object to scrape it for information. The only way around this would be to have the objects shown via an iframe or some approach similar. If the object was referenced directly you'd need a way to redirect back to the appropriate wrapper page for the combined object view. As long as everything is in the same domain you could work out a method for communication between the children frames via the parent.