I am very new to django, so i prefer getting a simple answer.I got this slideshow from a website,it is displaying the all images in one size ,this is my code .
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="200">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{%static 'images/2.jpg' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{%static 'images/3.jpg' %}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{%static 'images/4.jpg' %}" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
My problem is that images are displayed in one(large) size,i want to display the images in their original size,this slideshow makes them all one large size.
*any help is much appreciated.
Related
I had this issue when I first started on most of the pictures, only one showed on my web page so I uploaded the pictures to a google drive and used each url. It worked but the pictures loaded slowly so I went to try the pictures in a folder thing again and they all show with the alt tag and a broken image icon.
{% extends "base.html" %} {% block title %}Home{% endblock %}
{% block content%}
<main role="main">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:25px;">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="svg-wrapper background-image" style="background-image: url('../images/smiling_five_blue_uniform.jpg'); -webkit-background-composite: border; background-size: cover;">
<!-- <img src="../images/smiling_five_blue_uniform.jpg" class="d-block w-100" alt="KG2 children smiling in school uniform outside TH."> -->
<!-- <img src="https://www.drive.google.com/uc?id=1r-pe153xqSnx08uRzVByAIgXuDmYcLHV" class="d-block w-100" alt="KG2 children smiling in school uniform outside TH."> -->
<svg class="bd-placeholder-img" style="background-image: url('../images/smiling_five_blue_uniform.jpg')" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/>
</svg>
</div>
<div class="container">
<div class="carousel-caption text-left">
<h1>Welcome to Towering Heights Group of Schools</h1>
<p>This is the official website for the Towering Heights group of Schools in Akure, Ondo State.</p>
<p><a class="btn btn-lg btn-primary" href="/about" role="button">See what we're about</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="../images/green_dress_girl.JPG" class="d-block w-100" alt="Children engageing with each other in non-uniform."/>
<!-- <img src="https://www.drive.google.com/uc?id=1tUXIMfDEUmmo5O4yX2ITmJ0-h87XKzW6" class="d-block w-100" alt="Children engageing with each other in non-uniform."> -->
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption">
<h1>Another home for your kids</h1>
<p>We have a warm, safe, secure environment where children have the opportunity
to develop a love of learning and independence.</p>
<p><a class="btn btn-lg btn-primary" href="/contact" role="button">Get in touch today!</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="../images/kids_roundtable.jpg" class="d-block w-100" alt="Children playing at a classroom table inside TH."/>
<!-- <img src="https://www.drive.google.com/uc?id=1NRC2t0FnsJo2gTz_PSmZkA92l-szX2cL" class="d-block w-100" alt="Children playing at a classroom table inside TH."> -->
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption text-right">
<h1>Admissions are currently ongoing.</h1>
<p>Ensure your child gets the best possible education.</p>
<p><a class="btn btn-lg btn-primary" href="/contact" role="button">Get in touch today</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</main>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing" style="width:800px; margin:0 auto;">
<!-- Three columns of text below the carousel -->
<div class="container-fluid" style="margin-top:50px;">
<!-- Example row of columns -->
<div class="row" >
<div class="col-lg-4">
<h2>Admissions</h2>
<p>Choosing the right school marks a new beginning in the life of your child.<br>
Contact us as early as possible to have your child assessed and ready for school. </p>
<p><a class="btn btn-secondary" href="/contact" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h2>Calendar</h2>
<p>Terms, exams, holidays, keep up to date on what's hapenning when so you don't fall behind. </p>
<p><a class="btn btn-secondary" href="/calendar" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h2>Latest News</h2>
<p>Check out what's been happening at THS</p>
<p><a class="btn btn-secondary" href="/news" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<hr>
</div> <!-- /container -->
{% endblock %}
I'm writing tests python+selenium, and here is the problem I've stumbled upon.
I need to check if the text in a box is displayed correctly and doesn't go beyond the margins.
What I means is:
Page source:
<div class="mt-5">
<div class="row flex-column flex-lg-row">
<div id="card-6e64c570-f558-47c8-d66a-08d9a43db45b" class="events-left-block w-100 col-lg-6 mb-4xl position-relative">
<a href="/Invite/Trainings/6e64c570-f558-47c8-d66a-08d9a43db45b?back=%2FCatalog" class="w-100">
<div class="card border-0 bg-white h-100 shadow rounded-lg p-0">
<div class="card-body p-4 h-100 d-flex flex-column">
<div class="card-title text-dark mb-4 row justify-content-between no-gutters flex-nowrap">
<h5 class="mb-0">Pneumonoultramicroscopicsilicovolcanoconiosis</h5>
<span class="text-white ml-4"></span>
</div>
<div class="card-text d-flex justify-content-between align-items-end flex-row flex-grow-1">
<ui class="list-group-flush">
<li class="d-flex align-items-center small list-group-item li-info text-dark">
<i class="fas fa-user-friends text-light-gray fa-small"></i>
1
</li>
<li class="d-flex align-items-center list-group-item small li-info text-dark">
<i class="ri-calendar-fill text-light-gray small"></i>
29.11.2021
</li>
</ui>
<img class="rounded-circle cover-image" src="/images/default-training.png" width="64" height="64" alt="img">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
I was wondering if there is a way to check (by selenium, jquery, whatever) if the text fits the box?
I don't know why but my code doesn't work, I don't know where the problem is. Please help, my product doesn't appear on the template although I have saved products in the database
{% for product in products %}
<div class="col-md-6 col-lg-3 ftco-animate">
<div class="product">
{% if product.ImgProduct %}
<a href="#" class="img-prod"><img class="img-fluid" src="{{ product.ImgProduct.url }}" alt="ColorlibTemplate">
<div class="overlay"></div>
</a>
{% endif %}
<div class="text py-3 pb-4 px-3 text-center">
<h3>{{ product.product_name }}</h3>
<div class="d-flex">
<div class="pricing">
<p class="price"><span>{{ product.product_price }}</span></p>
</div>
</div>
<div class="bottom-area d-flex px-3">
<div class="m-auto d-flex">
<a href="#" class="add-to-cart d-flex justify-content-center align-items-center text-center">
<span><i class="ion-ios-menu"></i></span>
</a>
<a href="#" class="buy-now d-flex justify-content-center align-items-center mx-1">
<span><i class="ion-ios-cart"></i></span>
</a>
<a href="#" class="heart d-flex justify-content-center align-items-center ">
<span><i class="ion-ios-heart"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I have ~26k pictures inside my static folder that I want to load using a template that I have in Django
{% for movie in movies %}
<div class="col-6 col-sm-12 col-lg-6">
<div class="card card--list">
<div class="row">
<div class="col-12 col-sm-4">
<div class="card__cover">
<img src="{% static 'img/covers/{{ movie.movie_id }}.jpg' %}">
<a href="/movie/{{ movie.movie_id }}" class="card__play">
<i class="icon ion-ios-play"></i>
</a>
</div>
</div>
<div class="col-12 col-sm-8">
<div class="card__content">
<h3 class="card__title">{{ movie.movie_title}}</h3>
<span class="card__category">
Comedy
Adventure
</span>
<div class="card__wrap">
<span class="card__rate"><i class="icon ion-ios-star"></i>{{ movie.movie_rating }}</span>
<ul class="card__list">
<li>HD</li>
<li>16+</li>
</ul>
</div>
<div class="card__description">
<p>{{ movie.movie_overview }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
The line
<img src="{% static 'img/covers/{{ movie.movie_id }}.jpg' %}">
is where I am facing an issue, the console shows img/covers/&7B&Dmovie.movie_id&3B&D.jpg
Move nested curly braces outside:
<img src="{% static 'img/covers/' %}{{ movie.movie_id }}.jpg">
static template tag only converts relative "static" url to "absolute" one, so appending some details like filename or query params like shown is fine.
Hovering over innerText shows the text data but not through Python
I am trying to retrieve innertext or innerHTML from the HTML from this website (see attached image). The HTML saved/printed from BeautifulSoup does not have the content seen in the attached image of the innerText.
import requests, re
from bs4 import BeautifulSoup
r=requests.get("https://jobs.ca.gov/CalHRPublic/Search/JobSearchResults.aspx#classid=441")
c=r.content
soup=BeautifulSoup(c,"html.parser")
print (soup.prettify())
When I inspect the page in Google Chrome , click on the div block and copy the HTML, the copied HTML from Chrome inspect has all the data I am looking for.
How do I get the same data in Python or do I have to use Selenium?
<div class="card-block" id="collapse1234" itemscope="" itemtype="http://schema.org/Organization" role="tablist" aria-multiselectable="true">
<div class="row" role="presentation">
<div class="col-md-10 " role="presentation">
<a id="cphMainContent_rptResults_hlViewJobPosting_0" class="lead visitedLink" href="/CalHrPublic/Jobs/JobPosting.aspx?JobControlId=70488">ACCOUNTING ADMINISTRATOR I (SPECIALIST)</a>
</div>
<div class="col-md-2 tar">
<div id="cphMainContent_rptResults_pnlFavoriteJob_0" class="aspNetDisabled" style="display: inline;">
<i id="cphMainContent_rptResults_iIsNotFavorite_0" class="fa fa-star-o" aria-hidden="true" style="cursor:default;color:grey;opacity:.6;" title="You must be logged in to save a job as a Favorite." onclick="">
Log in to save job
</i>
<i id="cphMainContent_rptResults_iIsFavorite_0" class="fa fa-star" title="This job is saved" style="color:#fdb81e;cursor:pointer;display:none;" aria-hidden="true" onclick="removeUserFavorite(70488, $(this) );"> Job saved</i>
</div>
</div>
</div>
<div class="row" role="presentation">
<div class="col-sm-12 col-md-9" role="presentation">
<div class="row">
<div class="col-xs-12 col-sm-6" role="presentation">
<div class="working-title details row">
<div class="col-xs-6 job-label">Working Title:</div>
<div class="col-xs-6 job-details">
<span title="Keyword Relevance: 0">N/A</span>
</div>
</div>
<div class="position-number details row">
<div class="col-xs-6 job-label">Job Control:</div>
<div class="col-xs-6 job-details">
70488
</div>
</div>
<div class="salary-range details row">
<div class="col-xs-6 job-label">Salary Range:</div>
<div class="col-xs-6 job-details">
$5053.00 - $6325.00
</div>
</div>
<div class="schedule details row">
<div class="col-xs-6 job-label">Work Type/Schedule:</div>
<div class="col-xs-6 job-details">
Permanent Fulltime
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" role="presentation">
<div class="department details row">
<div class="col-xs-6 job-label">Department:</div>
<div class="col-xs-6 job-details">
Board of Equalization
</div>
</div>
<div class="location details row">
<div class="col-xs-6 job-label">Location:</div>
<div class="col-xs-6 job-details">
Sacramento County
</div>
</div>
<div class="filing-date details row">
<div class="col-xs-6 job-label">Publish Date:</div>
<div class="col-xs-6 job-details">
<time datetime="2016-06-30">
6/29/2017</time>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 align-right" role="presentation">
<div class="filing-date details row">
<div class="col-xs-12">
<div class="job-label">Filing Deadline:</div>
<div class="job-details">
<time datetime="2016-06-30">
7/14/2017
</time>
</div>
</div>
<div class="col-xs-12">
<a id="cphMainContent_rptResults_hlViewPosting_0" class="btn btn-secondary btn-block" href="/CalHrPublic/Jobs/JobPosting.aspx?JobControlId=70488">
<span class="ca-gov-icon-search"></span>
<span>View Job Posting</span>
</a>
</div>
</div>
</div>
</div>
</div>