It seems like {PreviousPost} and {NextPost} is not working on Tumblr for creating custom themes. Here's my code. Can someone point to my mistake...
<div>
{block:PreviousPost}<span>Previous Post</span>{/block:PreviousPost}
{block:NextPost}<span>Next Post</span>{/block:NextPost}
</div>
You need to wrap it in {block:PermalinkPagination}…{/block:PermalinkPagination} blocks, like this:
{block:PermalinkPagination}
{block:PreviousPost}
<a rel="prev" href="{PreviousPost}">{lang:Previous Post}</a>
{/block:PreviousPost}
{block:NextPost}
<a rel="next" href="{NextPost}">{lang:Next Post}<a/>
{/block:NextPost}
{/block:PermalinkPagination}
Related
I have a tumblr blog embedded into my website (iframe) and want all clicks to open in a new tab to land on the post detail url (e.g. https://diestadtgaertner.tumblr.com/post/657405245299818496). I already adapted the template to get this working for most post types by exchanging the respective href variable with "https://diestadtgaertner.tumblr.com/post/{PostID}" and add target="_blank". However, I can't get this to work for the pictureset. Does anyone know how this might work?
Help would be greatly appreciated!
Thanks & best,
Torge
You can edit your template so the photoset gets output into a normal div (I think the default is to load photosets inside an iframe themselves, which could be causing you issues.
This is the block from my tumblr template:
<ul>
...
{block:Photoset}
<li class="post photoset">
{block:Photos}
<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}
<img src="{PhotoURL-HighRes}" class="highres" />
{/block:HighRes}
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
<p>
<span class="icon-link ion-ios-infinite-outline"></span>
{block:Date}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}
</p>
</li>
{/block:Photoset}
</ul>
In any case you could wrap the entire block in the Permalink href. Something like:
<ul>
...
{block:Photoset}
<li class="post photoset">
<a href="{Permalink}"> // this permalink href now wraps the entire content of the post.
{block:Photos}
<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}
<img src="{PhotoURL-HighRes}" class="highres" />
{/block:HighRes}
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
</a>
</li>
{/block:Photoset}
</ul>
The issue now is that the default click links for the images inside this post (if they exist) will no longer function normally.
It is difficult to test this without the link to your site, but I think updating your tumblr template first should hopefully give you the result you are after, but of course I would recommend a backing up your code.
Im trying to figure out how can i improve my work with sass using BEM. Should i change anything in my code below? I think It's really clean in HTML but in SASS it's hard to find out what is nested in what block. I have one .c-header class at the top and all items in one line using '&'. How can i fix it and make it better?
<header class="c-header">
<nav class="c-header__nav">
<div class="c-header__logo">
<a href="#">
<div class="c-header__circle">
<i class="c-header____leaf fab fa-envira"></i>
</div>
<h1 class="c-header____title">treehouse</h1>
</a>
</div>
<i class="c-header____burger fas fa-bars"></i>
<ul class="c-header__menu">
<li class="c-header__item">home</li>
<li class="c-header__item">about</li>
<li class="c-header__item">blog</li>
<li class="c-header__item">portfolio</li>
<li class="c-header__item">contact</li>
</ul>
</nav>
<div class="c-header__content">
<h1 class="c-header__caption">creative digital solutions</h1>
<p class="c-header__paragraph">Lorem ipsum dolor sit amet consectetur.</p>
<button class="c-header__button">view portfolio</button>
</div>
</header>``
It's one of the purposes of BEM: Make your CSS less dependent of your HTML structure.
That's why we don't have special classes for grand children element. In other words, that's why the .block__element__sub-element classes are forbidden.
According to the official documentation:
Besides the fact that the classes look much nicer, it makes the elements be dependent on the block only. So, you can easily move them across the block when providing changes to the interface. The changes of the block DOM structure would not need corresponding changes to the CSS code.
So yes, your HTML is pretty clean here. And I'm sure your CSS is clean too ;)
PS: some of the classes have too much background, like c-header____burger.
With BEM you should aim to create a cascading hierarchy, so that you can leverage SASS nesting and write your SCSS in components-like structure.
c-header
c-header__nav
c-header__nav__logo
c-header__nav__logo__circle
c-header__nav__logo__title
In that way your SASS should be:
.c-header {
width:100px;
&__nav {
width:101px;
&__logo {
width:102px;
&__circle { width:103px; }
&__title { width:104px; }
}
}
}
Please note that the proposed structure is quite a guess, since I don't have a clear overview of how you project looks but I hope it helps to clarify your doubts.
It looks like mmenu does not link to any ID on the same page. Perhaps I am doing something wrong. Any help is appreciated!
Codepen
Open the menu
<div id="my-header"></div>
<div id="my-content"></div>
<div id="my-footer"></div>
<nav id="my-menu">
<ul>
<li>Pink</li>
<li>Orange</li>
<li>Tomato</li>
<li>External link works</li>
</ul>
</nav>
It seems you are looking for the page-scroll-addon: http://mmenu.frebsite.nl/documentation/addons/page-scroll.html
I am trying out Playframework with Polymer as a GUI tool. As a JSF developer, I am not really used to developing these ajax codes.
For now, I have this situation in my main.scala.html:
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Painel Administrativo</core-toolbar>
<nav>
<core-menu selected="0">
<paper-item noink>
<a href="#routes.ProjetoController.listar()">
<core-icon icon="settings"></core-icon> Projetos
</a>
</paper-item>
<paper-item noink>
<a href="#routes.TipoProjetoController.listar()">
<core-icon icon="settings"></core-icon>Tipos de Projetos
</a>
</paper-item>
</core-menu>
</nav>
</core-header-panel>
<div tool></div>
<div fit>#content</div>
</core-scaffold>
Question is: Is there a way of calling the routes I have into the paper-item elements and partially render it into #content ?? If so, how could I achieve this one page style behavior, without the page resfresh?
PS.: these are not static content.
ProjetoController.listar() should render projeto_listar.scala.html and TipoProjetoController.listar() should render tipoProjeto_listar.scala.html. Those are 2 different dynamic pages which implments main:
#()
#main("Page Title") {
}
Take a look at Page.JS, you can make all the routes in the single page format.
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>