I'm having a problem with loading work section, on my web site. This is the repo: https://github.com/Vukasin90/test/blob/gh-pages/_includes/work.html
and this is the we site: https://vukasin90.github.io/test/
when you click thumbnails, it should open a bounch of images and paragraphs, basically a html document.
When I run it locally, it works just fine, but on gh-pages it wont load (there's only a spinner animation, which I've put to show when loading is slow).
I'm guessing that it can't be done this way on GitHub, but I don't have any idea how to go around this problem. Or maybe I made mistake with links, or something. I really don't know
I think this is an issue with your js, not Jekyll.
Jquery is requesting: https://vukasin90.github.io/work/work-1.html
Instead of https://vukasin90.github.io/test/work/work-1.html
There are other js errors too - other 404s and blocked resources.
If you want to reference full paths in jekyll, you should use site.url and site.baseurl with something like:
..data-folder="{{ site.url|append: site.baseurl }}/work/work-1" style="background-image: url({{ site.url|append: site.baseurl }}/Assets/img/work/proj-1/thumb.jpg"..)
Have fun.
EDIT:
Amended above to show on page changes better.
Alternately, if you want to fix keeping your inline relative references, then change these:
...data-folder="../work/work-1"...
To:
...data-folder="../test/work/work-1"...
However, keep in mind this path reference issue between Jekyll and your js could crop up in other ways. So id recommend using full path references throughout or change your js setup to include the baseurl.
Related
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
I've had my blog on github for a Jekyll. Out of nowhere, when I drill into a post, the formatting of the post is not right.
Any suggestions on what to tweak to get it back to it's defaults?
https://dfinke.github.io/
https://github.com/dfinke/dfinke.github.io
Your CSS is not loading.
AND your main.js isn't loading either, and it is being called twice, and it is being called from the posts directoy like the css above.
The problem appears to be paths.
For example, your path to the css is currently the individual post's path:
https://dfinke.github.io/2017/Microsoft-PowerShell-Yaml-and-VSTS/css/main.css
Whereas I think you want it from root (looking at your files):
https://dfinke.github.io/css/main.css
Your head.html include states this:
<link rel="stylesheet" href="{{ "css/main.css" | prepend: site.baseurl }}">
I note your _config sets site url as 'https://dfinke.github.io' and baseurl as '/'.
So that seems right to me from Jekyll perspective.
Something appears to be changing the url parts on your assets' paths.
I note you seem to have .ps1 powershell scripts.
I don't know powershell scripting, but looking through New-BlogPost.ps1 it does seem to be dealing with paths.
Perhaps github now runs powershell scripts, and that is now changing your paths somehow?
Hope that helps.
PS - If it is an issue caused by your powershell scripting, you may want to update the question title to reflect that for future readers.
I am trying to create a Editor component that will take inline javascript.
I understand that I can use clientlibs folder for loading JS, but some of the video CDN folks require you to put embed tags with JavaScript in the editor, and I think some of that is also used for rapid development. Currently with the state of RTE, I cannot put a script <script/> tag even after extending it, as it strips it out and only takes the html tags.
Could you please provide any insight if this could be doable in AEM 6.1
Here's what I have tried:
I looked at several post didn't got a clue
extended RTE using Adobe's documentation, but see a script button, that only takes html tags.
looked for hacks that could tell me what part of the code is tripping out </script> tags or could not execute js.
looked for some components out there that does that, found nothing
so far.
Sorry if maybe I'm asking something very basic. I'm having some problems when deploying this repository which is not under a User or Organization Github account. When I deploy to localhost I don't have any problems at all and the blog theme runs perfectly. But this is not the case when I deploy to this Project page. You can see the publication result here.
Any tips?
Many thanks for your help!
In your index.html page you have given the path to your css, js and images from the site root eg: /images/logo.png, but your files are inside the blog folder. Change the paths in your index.html page to document-relative paths like this: images/logo.png.
Saravana is right about the inconsistency of your URLs, however I would suggest the following solution which I believe is a bit cleaner.
There is a baseurl variable that can be set in your _config.yml file. This can then be referenced in your layouts and other files with the {{ site.baseurl }} liquid templating syntax.
You can then do something like the following to get consistency across development and deployment:
<img src="{{ site.baseurl }}/images/logo.png">
The other benefit here is that if for some reason you need to update the base URL, you can do it in one place (the _config.yml) rather than having to go through and modify every URL in your site.
Read more about Jekyll configuration here.
Plone 4.2.1.1
plone.tiles 1.2
plone.app.tiles 1.0.1
plone.app.blocks 1.0
plone.app.drafts 1.0a2
Products.TinyMCE 1.2.15
I have a Plone site with two rich text tiles on a page, created following Using tiles to provide more flexible Plone layouts.
The problem is that when editing the tiles, TinyMCE will not load.
In Firebug on the Net tab I see a whole slew of 404s that look like this:
http://example.com/en/front-page/##edit-tile//plugins/pagebreak/editor_plugin.js
By comparison, I know that the correct URLs should look like this:
http://example.com/portal_javascripts/MyTheme/plugins/xhtmlxtras/editor_plugin.js
When I set my portal_javascripts in Development Mode, it works, but when I turn Development Mode off, that's when I see this problem.
So apparently it's due to some kind of javascript conflict, but I don't know where to look for it.
I really need to solve this problem, so any help would be greatly appreciated!
Additional information:
When portal_javascripts has development mode turned off, the condition in this line is never true: https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L47
That's because the tiny_mce.js file is merged with other files and the name is randomized, and so looking it up by name will always fail. Consequently, the baseURL property of the tinymce object will not be set in init.
Instead, baseURL ends up being set here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8397
This is where the URL http://example.com/my-page/##edit-tile/ is used for baseURL.
I verified this by turning off merging and caching in portal_javascripts, but leaving development mode off. Then it works, because it finds tiny_mce.js by name.
Also, I found that when it fails, all of TinyMCE's plugins are added as explicit <script> elements in the head of the iframe (with the ##edit-tile URLs, which can't be loaded). By contrast, when it works, all the plugins are loaded here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8458
IOW, they are not added explicitly to the iframe as <script> elements.
(In case I wasn't clear, when I mention iframe, I'm talking about the tile's editing overlay, not TinyMCE's. There is an iframe inside an iframe....)