display static html asset in jekyll + github pages - github-pages

I want to add a link to a static html page (which I have created, not hosted anywhere). I added the html file to my images folder (contains the images which are being rendered in my jekyll blog). Then I make a hyperlink to the html files which I just added in the images folder, like this:
<a href=https://raw.githubusercontent.com/USERNAME/USERNAME.github.io/master/images/time.vs.score.html>View plots here</a>
Where username is my github username. This does not open a new html page, instead I just see the plain text of the html file. How can I add static html files are part of the assets? Thanks!

Thats what raw.githubusercontent.com is made returning raw file.Files are returned with Content-Type:text/plain; and then displayed as text by your browser.
You'd better link to github pages published content at https://USERNAME.github.io/images/time.vs.score.html

I found an easy solution using this tool: https://rawgit.com/
just replace:
<a href=https://raw.githubusercontent.com/USERNAME/USERNAME.github.io/master/images/time.vs.score.html>View plots here</a>
with:
<a href=https://cdn.rawgit.com/USERNAME/USERNAME.github.io/master/images/time.vs.score.html>View plots here</a>

Related

How can I make gifs show up on Github Pages posts?

I've found that I can make a gif show up on the README.md page like so:
![gif](https://github.com/jss367/antools/blob/gh-pages-2.3.4/assets/images/cat.gif)
or like so:
<img src='https://github.com/jss367/antools/blob/gh-pages-2.3.4/assets/images/cat.gif' />
However, those same lines of code don't work when I add them to a blog post. Do I need to add something to the layout? Or is it turned off in Github Pages?
I've found that they show up on the blog post when the gif is hosted on gifs.com but not when hosted on Github. For example, this works:
<iframe src='//gifs.com/embed/k8A5jN' frameborder='0' scrolling='no' width='1280px' height='720px' style='-webkit-backface-visibility: hidden;-webkit-transform: scale(1);' ></iframe>
but this doesn't:
<iframe src='https://github.com/jss367/antools/blob/gh-pages-2.3.4/assets/images/cat.gif' frameborder='0' scrolling='no' width='1280px' height='720px' style='-webkit-backface-visibility: hidden;-webkit-transform: scale(1);' ></iframe>
I'd like to host it directly on github.com.
Your link goes to a webpage. Use a direct link or proper directory
Try this:
<img src='https://github.com/jss367/antools/blob/gh-pages-2.3.4/assets/images/cat.gif?raw=true' />

How to download file from local directory using python

I want to download a file from the local directory when the user clicks on a particular link. How I can do it using python.
Try this on click of link:
location.replace('your_loacal_filepath')
For Example:
location.replace('/files/out.txt')
if you are rendering HTML, then you should read about the HTML download Attribute
Quoting
The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.
This attribute is only used if the href attribute is set.
else if(currentobj.filename != null){
var xy = '{% static "/documents/dataset/" %}' + currentobj.filename;
alert(xy);
var $tr = $('<tr><td style="padding:5px;"><a href="'+ xy +'"
target="_blank" download>' + currentobj.filename.slice(0,25) +
"....." +'</a></td> </tr>');
$tbl.append($tr);
}
just add download tag along the hyperlink
if you want to specify a specific name for the download file then just mention it like this
<a href="/images/myw3schoolsimage.jpg" download="w3logo">
You can try this.
The download attribute instructs browsers to download a URL instead of navigating to it.
Check out. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes

Regex help for Page monitor

I want to check for the particular text below in a webpage
<img class="highlights" src="http://www.carsportal.com/images/highlights/green.jpg">
Using this regex for doing so,
<img class="highlights" src="[^]*green.jpg">
I am trying to monitoring the changes on this webpage using Page Monitor(Chrome extension). I tested it here.
But its not working on this extension.
Somethings like this:
<img class="highlights" src="[^\"]*green\.jpg">

WYSIWYG editor pastes html tags in output textfield

I use this redactor for admin site django-wysiwyg-redactor
But when I enter some text, it pastes it with html tags. When discovering my source code, I noticed that html code that is responsible for my input data, is placed in quotes.
I think you have to use "safe", the built-in template filter to render the html properly in your template. Example:
{{ myTextField|safe }}
Safe in django docs

Custom image in Django template via static

I am programming a website powered by Django 1.6.3. Under news you always see a big story and on the side recent articles. Therefore, I used Bootstrap 3 and wrote a static html page serving my requirements.
Now I would like to program the logic behind this. I save all my files under static that consists of the folders css, fonts (from Bootstrap), img and js. The image folder has some subfolder e.g. news. To create a new entry on the news page I would like to open the admin page, add a news_entry and select one image that should be under the titel. How is it possible to include the image in the page? My approach was:
<img src="{% static {{ news.image_name }} %}" class="img-title">
Unfortunately I get an parsing error. Image_name is a property of my news model.
You need to access the url attribute of your image_name.
Try:
<img src="{{ news.image_name.url }}" class="img-title">
Similar question here.