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.
Related
I am making a portfolio page, which is going fine, except the uploading project link. This is the code I am working on (it's a free online template so cannot change much of the code)
<article class="from-left">
<a href="images/fulls/01.jpg" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
</a>
</article>
The issue is that when I replace the image with a link to a github page, nothing happens and the webpage goes into a loop type waiting image.
<article class="from-left">
<a href="www.google.com" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
</a>
</article>
My HTML and CSS skills are very basic level, not sure what is the issue. What I want is that when I click a picture it opens up the link provided. Below is the free html template I am using
https://html5up.net/big-picture
I've read your template readme file and understood what is happening. The problem is that the template uses a component called "jquery.poptrox". This component makes the gallery links to open a popup with that picture.
To do what you want, find the file "main.js". Then look for $gallery.poptrox
You have to comment this entire block. It will be like this:
//$gallery.poptrox({
// baseZIndex: 10001,
// useBodyOverflow: false,
// usePopupEasyClose: false,
// overlayColor: '#1f2328',
// overlayOpacity: 0.65,
// usePopupDefaultStyling: false,
// usePopupCaption: true,
// popupLoaderText: '',
// windowMargin: 50,
// usePopupNav: true
//});
Notice that I put a double slash to comment each line. This should disable that component and your links now will open what you want instead of opening a popup. You can also delete this block of code, but I don't know if you would like the original behaviour back in the future. So, it's up to you.
Important:
Your links should start with "https://". So, it'll be like this:
<article class="from-left">
<a href="https://www.google.com" class="image fit">
<img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
</a>
</article>
If you want your link to open in a new tab of the browser, add the target="_blank" attribute.
<article class="from-left">
<a href="https://www.google.com" target="_blank" class="image fit">
<img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
</a>
</article>
Try changing "www.google.com" to "https://www.google.com", right now the link may be sending you to [your website]/www.google.com
You can add https:// in URL and target="_blank" so that the link will open in a new tab.
<article class="from-left">
<a href="https://www.google.com" target="_blank" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="Sample Image" />
</a>
</article>
Here is link of JSBin
I have a problem with CKEditor 4 adding additional HTML tags. I've been using v3 for a few years without any problems, and I've built my own plug-ins, so I'm not a complete novice but this has me stumped. For instance the following block of HTML:
<section class="component2">
<div class="">
<div class="component2__row">
<a class="component2__item component2__item--primary" href="#">
<img class="component2__item__image" src="http://MyServer/webmedia/Images/Components/component2/image-1.jpg" alt="IMG"/>
<h4 class="component2__item__title">Light Vehicle</h4>
</a>
</div>
</div>
</section>
Gets saved as:
<section class="component2">
<div>
<div class="component2__row">
<a class="component2__item component2__item--primary" href="#">
<img alt="IMG" class="component2__item__image" src="http://MyServer/webmedia/Images/Components/component2/image-1.jpg" />
</a>
<h4 class="component2__item__title">
<a class="component2__item component2__item--primary" href="#">Light Vehicle</a>
</h4>
<a class="component2__item component2__item--primary" href="#"> </a>
</div>
</div>
</section>
Any ideas? (Note for example the additional anchor tags!) Is there something in the HTML
it doesn't like? Is there a setting in config.js that I can use?
Thanks
If someone else stumbles across this I worked round it. As it was already my default (from v3) I'd already tried:
config.allowedContent = true;
I went through the documentation in detail, and even tried editing the dtd to allow headers to be in divs and anchors:
CKEDITOR.dtd['div']['h'] = 1;
CKEDITOR.dtd['a']['h'] = 1;
All to no avail. Eventually I gave up and replaced the <h4> tag in my sample with a <span> and styled it accordingly. That worked and CKEDITOR now leaves my source HTML untouched. Irritating that there isn't a feature whereby you can tell the Editor "Look, I know my HTML is valid, leave it alone and I'll deal with any consequences."
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 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.
Guys I am about to get a massive headache here. First of all, I am working on a website and everything seems to be runng. So, I had difficulties with making them links etc. so I tried to add the addthis.com plugin which would do all of that automatically. But, when I add that everything seemed to crash so I have made a quick jsFiddle to show you what I want. Here: http://jsfiddle.net/cSP9Q/1/ the problem is that I want to change those icons to mine which you can see on the first link and I just can't seem to change the spacings in between the icons. Furthermore, is there anyway of deleting the bubble with the counter because that just looks ridiculous.
HTML
<div id="social"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"><img src="your_image_url" /></a>
<a class="addthis_button_preferred_2"><img src="your_image_url" /></a>
<a class="addthis_button_preferred_4"><img src="your_image_url" /></a>
<a class="addthis_button_google_plusone"><img src="your_image_url" /></a>
<a class="addthis_button_compact"><img src="your_image_url" /></a>
</div>
<!--javascript goes here-->
</div>
Example and Reference.
NOTE: your link http://www.aasingercom.ipage.com/php/ doesn't work, anyway.