So I am having a bit of trouble inserting an image inside of a div container. At the top of my page I have a fixed navbar and, underneath the navbar, I have a jumbotron div with a div container with the name of the company as well as the tagline. Instead of there being a bg color for the div jumbotron/div container, I would like there to be an image instead that relates to the services and products that are being provided.
I am using Python Django to create the site and thus am using Jinja to implement static files such as images. Below is the code that I've used that does not work. I would like to be able to implement the image using this same Jinja method of static files rather than url(path to image here)... help?
<div>
<div class="jumbotron">
<div class="container" style="background-image:{% static 'company/img/familypic.jpg' %}">
<center><h2>Whatever Text Here</h2></center>
<center><h4>Whatever Tagline Here</h4></center>
</div>
</div>
</div>
It has to be url('{% static 'company/img/familypic.jpg' %}') for the background-image to show up.
Use
<div class="" style="background-image: url({{ static('company/img/familypic.jpg') }});">
Related
I have the below HTML code that I am passing through a python script to send out an email. I am able to get the email however I am trying to have an image added to the body of the email but I see that the image does not get added to the email. I have the image saved to a variable called image and I am trying to call this variable. It just shows a greyed out area in the position where the image needs to be shown.
image = 'file.png'
f"""
<html>
<body style="background-color:#fafafa;">
<div class="row">
<div style="float:left;width: 20%;padding: 10px;">
</div>
div align="center" style="float:left;width: 60%;padding: 10px;">
<img src="cid:image" align="middle" width="253" height="68">
<br>
<h1 style="color:#9FA6B5;font-family:sans-serif;font-weight:200;text-align: center;">{name}</h1>
</div>
<div style="float:left;width: 20%;padding: 10px;">
</div>
</div>
</body>
</html>"""
You given the local path of the image, which can not be send to your email, you have to give path of the image from server image folder to show your image.
You have to upload your images to a server image then include the path into your src tag.
Here is a server i use to upload images for HTML email templates.
I have a project in python that will hide a div when my icon is clicked and then collapse when it is clicked again. Right now I have the following html code
<img scr="/path/to/img"></img>
<div>
<p>Press the icon to see more stuff</p>
</div>
<div id="showOrHide" style="display: none;">
<p>one</p>
<p>two</p>
<p>three</p>
</div>
So my question is what is the best way to remove the style on the div with the id showOrHide when the user clicks on the image?
Thanks!
Python isn't best equipped to do what you're trying to accomplish - is there no way you can use Javascript? A simple onclick() http://www.w3schools.com/jsref/event_onclick.asp will get the job done in JS.
I am creating a single page application but my #mainPicture will not load in the div its suppose to. This is where I am calling it in my index.html:
<body>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Places I've Been</div>
<div id="headerSubtext">A Blog About My Travels</div>
</div>
</div>
This is my code for linking stylesheet:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/theme.css') }}">
And this is the CSS for it in my theme.css:
#mainPicture
{
width:670px;
height:497px;
background-color:#FFFFFF;
}
#mainPicture.picture
{
position:relative;
width:650px;
height:487px;
top:10px;
background-image:url(hudson1.jpg);
background-repeat:no-repeat;
margin-left:10px;
}
It just shows up as a white space the size of the picture. I am using CMDER to run my webpage. The image hudson1.jpg is in the same folder as the theme.css also but it wont show it up in the div.
Any help would be great.
Your selector is incorrect.
#mainPicture.picture
Is looking for an element with id mainPicture and class picture. You should use:
#mainPicture > .picture
That will select the an element with a class of picture that is a child of an element with an id of mainPicture.
I am using Scrapy, I want to download all images under one node, for example, here is the web page:
<!-- language: lang-xml -->
<div class="A">
<div class="A1">
<div class="A2">
<img original="a1.png"></img>
</div>
</div>
<div class="A3">
<img original="a2.png"></img>
</div>
</div>
<div class="B">
<div class="B1">
<div class="B2">
<img original="b1.png"></img>
</div>
</div>
<div class="B3">
<img original="b2.png"></img>
</div>
</div>
I want to download all images (I need to find the original urls for these images) under class="A" but not class="B", and under class="A" we have a1.png and a2.png, they are at different levels (the number of level is uncertain).
Is there any way to target one attribute under one specific node using XPATH (something like //div[#class="A"]/**/img ) ?
or is there any solution in Scrapy?
Using the following XPath to select all img nodes that are descendants of a div node with class A:
//div[#class="A"]//img
Demo
The // matches descendants, as opposed to /, which matches direct children.
I have code for sharing on pinterest in my site. The issue is that I can't get it to load a custom image.
Right now I have this where image_to_share is the path of the file:
<a href="https://www.pinterest.com/pin/create/button/
?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
&media= {% static image_to_share %}
&description={{photo.description}}"
data-pin-do="buttonPin"
data-pin-config="above">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
When I inspect element in chrome I get the path for the image as :
<img src="http:// /static/assets/uploaded_files/1421974839_3_art2.jpg ">
However, it should look like this:
<img src="/static/assets/uploaded_files/1421974839_3_art2.jpg">
How do I remove the "http://" and the trailing white space so that my image gets rendered properly?
You can simply add your site's domain either hardcoded or with Django site
&media={{your_site_domain}}{% static image_to_share %}
your_site_domain can be example.com e.g.
More on Django sites: https://docs.djangoproject.com/en/1.7/ref/contrib/sites/#django.contrib.sites.models.Site.domain