Here is a css code block.
<style type="text/css">
header.intro-header{
position: relative;
background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')
}
</style>
I want to do such thing : if site.baseurl contains http I want to remove site.baseurl prefix , otherwise I wan to add site.baseurl prefix.
Can anyone help me ? I am new to css
EDIT
Thanks for friends who has commented. I am using jeklly theme. In every markdown, there is such line: header-img: "xx". As you see, the actural url of header-img is above css code.
CSS is not a programming language so a traditional conditional block is not possible in that sense. You can achieve you goal still by using Javascript or your programming language of choice to check if the base URL contains a certain string and print your URL value based on the result.
Related
I need to alter the colour of an HTML element based on the text content of another element. However, the content is being generated with a Python for loop using a Jinja shortcut.
For example:
{% for article in articles %}
<div class="row article">
<div class="col s6">
<strong>{{ article.title }}</strong>
<p>Page count: {{ article.page_count }}</p>
<p>Layout code: <span id="layout">{{ article.layout }}</span></p>
</div>
<div id="show_layout" class="col s1 layout"></div>
</div>
{% endfor %}
I'm trying to use Javascript or jQuery to make the #show_layout element red if a layout code is present (ie. there is some text content in that span). The trouble is that I'm only able to make all or none show up red as the JS function runs once and affects every iteration of the for loop. For example, if 3 article listings are generated by the for loop (pulled from MongoDB) then each of the #show_layout elements turn red, if just one has any layout code content. I've tried experimenting with using the 'this' keyword, but I'm not getting anywhere.
Currently this is the basic function I'm altering, though there have been many different versions! I'm calling this on page load; calling it from the element itself doesn't seem to do anything!
function showLayout() {
let code = document.getElementById("layout").textContent;
let toChange = document.getElementById("show_layout");
if (code !== "") {
toChange.classList.add("layout-red");
console.log(code)
}
else {
console.log("arghghg")
}
}
I'm very new to Python and Jinja, so perhaps my approach is entirely wrong. Can anyone suggest a better way of doing this, or am I missing something obvious?
CBroe pointed me in the right direction here, by suggesting that I do this via Jinja, which had not occurred to me (I'm very, very new to Jinja!).
adding:
{% if article.layout != "" %}
<div id="show_layout" class="col s1 layout-red show_layout"></div>
{% endif %}
did the trick!
Thank you CBroe!
I have a script tag that is two levels removed from the html body element. For some reason when this script tag renders, all the text renders instead of being interpreted as JS:
So, the tag doesn't render properly. The script text is rendered to the screen instead of being recognized as JS code:
The above is my navbar rendering javascript code as text. The html that produces the text is:
<span class="account-button" onclick="accountButtonPressed()">
{% if user.is_authenticated %}
Sign In
{% else %}
Sign Out
{% endif %}
</span>
<script>function accountButtonPressed(){if(isSignedIn){signUserOut();}else{toggleCreateAccount();}}</script>
I can't find this error anywhere else online. I'm wondering if it's an error with chrome or something at this point, since my HTML seems perfectly valid. Chrome version 75. All javascript that's coming from my coding is included in the HTML file. The HTML renders in the same incorrect way in the Network Tab response view.
It seems that if you set display: inline-block to a <script> tag, it renders the script as text. I had set the style inadvertently in CSS.
I am using a Flask server. Some of the templates use JavaScript scripts of their own.
One of these scripts generates a svg on the page. This function needs a picture produced by the server.
Here is a simplified version of what exists for now:
template (myTemplate.html):
{% extends "layout.html" %}
{% block body %}
<div id="graph">
<img src="/picture/{{ datasetName }}"></img>
</div>
<script src="script.js"></script>
{% endblock %}
javascript (script.js):
var graph = d3.select("#graph");
var svg = graph.append("svg") //this generates a <svg> in the <div>, it's d3js syntax.
.attr("width",window.innerWidth)
.attr("height",window.innerHeight)
.append("g");
flask server (server.py):
from flask import *
#app.route('/', methods=['GET'])
def foo():
return render_template('myTemplate.html')
#app.route('/picture/<datasetName>', methods=['GET'])
def picture(datasetName):
img = (...) #some function to get my picture
return send_file(img.to_bytesio(), mimetype='image/svg', cache_timeout=0)
My problem is that I would like to be able to use the picture in my javascript (to set it as a background for the svg which will move when navigating in the svg), but currently I have no clean way to get it. I could move the script to the html page but my project is quite big and I want to avoid that.
What would be a clean way to proceed ?
The easiest way to get the loaded image as the background to the generated image is to use a CSS overlay. That requires almost no change to your HTML structure or drawing routines at all.
The CSS would look like:
#graph {
position: relative;
}
#graph * {
position: absolute;
top: 0px;
left: 0px;
}
Now everything in div#graph overlays each other.
A second way would be to have that loaded image be a part of the CSS background-image for the <div> or its <svg>. CSS has good background image support, with options for stretching, truncating, and tiling. A tutorial is here.
A final option requires more surgery:
Remove the <img ...> tag
Have your D3 code generate an image element. The docs are here.
<image xlink:href="/picture/..." x="0" y="0"
height="150" width="250" />
This is feasible, but I don't recommend it. CSS has better sizing, positioning, and tiling controls than SVG, esp. relative to the whole browser page. The image parameters often have to be explicitly specified, including image width and height, so you'll have to know or calculate them. And there is the problem of communicating from your template to your JS what the value of datasetName is. So...stick with one of the CSS options. Ideally the first.
Can you use something like the following
{% extends "layout.html" %}
{% block body %}
<div id="graph">
<img src="/picture/{{ datasetName }}"></img>
</div>
<script>
var imagePath = '/picture/{{ datasetName }}';
</script>
<script src="script.js"></script>
{% endblock %}
Basically server-side you generate a client-side script tag, which when executed client-side, would give you imagePath variable usable from client-side scripts.
P.S. Just noticed you wanted to avoid that. Sorry.
What you may also have is a URL mapping on the flask server, e.g. #app.route('/scripts/picture/<datasetName>.js', methods=['GET']), that generates client-side script file with parameters that you need client-side on the page.
This way you would keep the script related code separate from your html.
I have a selection of options by images: http://www.raues.com/products/copy-of-black-and-blue-glasses-top
I want to count the number of images in each option and change the style (width) of the images according to that number. I found this code that can count the size of the select input:
document.querySelector("#{{settings.option1_title}}").length;
So I did the following:
<script type="text/javascript">
var len = document.querySelector("#{{settings.option1_title}}").length;
{% if len < 10) %}
<style>
ul.thumbnails.image_picker_selector li {
max-width: 160px; }
</style>
{% endif %}
</script>
But it does not work. I think liquid does not read the "len" variable that I created before and I am not sure if it is the proper way to add the style to the code if statement is true.
Thank you very much for your help.
Liquid is rendered first server-side, whereas javascript is run client-side (see here).
Therefore your javascript len variable does not exist at the time the liquid if statement {% if len < 10 %} is evaluated. Use a javascript if statement here instead.
I'm using Imagekit. View.py includes:
def pics(request):
p = Photo.objects.all()
return render_to_response('Shots.html',
{'p': p})
The following simple code in the template will generate associated images:
{% for p in p %}
<img src = "{{ p.display.url }}">
<img src = "{{ p.thumbnail_image.url }}">
{% endfor %}
I'm attempting to generate a series of thumbnails {{ p.thumbnail_image.url }} which, when mouseover'd, will generate the slightly larger version of the image, {{ p.display.url }} via Javascript. The following code in the template attempts to do so:
<html>
<head>
<HEAD>
<script
language="Javascript">
{ image1 = new Image
image2 = new Image
image1.src = {{ p.thumbnail_image.url }}
image2.src = {{ p.display.url }}
</script>
</head>
<body>
{% for p in p %}
<a href=""
onMouseOver="document.rollover.src=
image2.src
onMouseOut="document.rollover.src=
image1.src">
<img src="{{ p.thumbnail_image.url }}" border=0 name="rollover"></a>
{% endfor %}
</body>
</html>
This will display the series of thumbnails, but the larger image will not display when mouseover'd. I believe it has to do with how I'm specifying the variable {{ p.display.url }}.
I cleaned up your code, but as #fish2000 mentioned, this is still a dirty way of doing it. I came up with the following:
<html>
<head>
<script>
var thumbs = [];
var hovers = [];
{% for p in p %}
thumbs.push(new Image());
thumbs[thumbs.length - 1].src = p.thumbnail_image.url;
hovers.push(new Image());
hovers[hovers.length - 1].src = p.display.url;
{% endfor %}
</script>
</head>
<body>
{% for idx, p in enumerate(p) %}
<a href="">
<img src="{{ p.thumbnail_image.url }}" border=0 name="rollover" onmouseover="this.src = window.hovers[{{ idx }}].src" onmouseout="this.src = window.thumbs[{{ idx }}].src">
</a>
{% endfor %}
</body>
</html>
I wrote up a basic example over at JSFiddle to try and mock what your Python code will produce: http://jsfiddle.net/TeEHU/
To explain a little bit what I did, I setup a couple of JavaScript arrays in the beginning to hold both the thumbnails and the hovers. Initially, I was just going to make them arrays of strings referencing the URLs but followed suit the way you did using the Image object to preload the image hovers.
From here, I got rid of the event handler attributes you defined in the anchor tag and moved it to the image tag so we could have direct access to the image attributes when the user moused over on it.
I generally don't condone the use of generating dynamic JavaScript from the server-side but I was just trying to stay consistent with your code.
It looks like your JavaScript is a little gnarly in general -- some specific e.g.'s:
you're using the depreciated language param in the <script> tag;
you have what looks like an unclosed bracket at the top of your first script block
I don't know if you can reference variables you've declared in onmouseover/onmouseout tags, as you're doing;
Often, you have line breaks in the middle of things like tags or param values, which those may be legal (I'm not sure) but they're of questionable value, at least to me; they are keeping me from understanding what you are doing. Consider removing them.
Also: generally, your use of quotes is a mess... Trust me, if you clean them up, you'll understand your own code much better.
However THE MAIN THING in your case should be: look at the code as rendered to the browser to solve your JavaScript problems. First and foremost. That'll narrow down whether or not the particular bug you seek to squash is due to your template syntax/logic/etc, vs. your client JavaScript. In any case, it's not specifically a django issue per se.