BeautifulSoup get element inside list except one - python-3.x

I want to get all link value inside a list except one of them.
This is my list:
<ul>
<li>
<a class="link" href="consept link 1">
<svg class="consept" preserveAspectRatio="xMinYMin meet" viewBox="0 0 22 22"><use xlink:href="link"></use></svg>
<h2>Consept title 1</h2>
</a></li>
<li>
<a class="link" href="consept link 2">
<svg class="consept" preserveAspectRatio="xMinYMin meet" viewBox="0 0 22 22"><use xlink:href="link"></use></svg>
<h2>Consept title 2</h2>
</a></li>
<li>
<a class="link" href="consept link 3">
<svg class="consept" preserveAspectRatio="xMinYMin meet" viewBox="0 0 22 22"><use xlink:href="link"></use></svg>
<h2>Consept title 3</h2>
</a></li>
<li>
<a class="link" href="video link">
<svg class="video" preserveAspectRatio="xMinYMin meet" viewBox="0 0 22 22"><use xlink:href="link"></use></svg>
<h2>video title</h2>
</a></li>
</ul>
I want to get link address of parent <svg class="consept"> I mean the a tag but not svg with class video.
expected result:
consept link 1
consept link 2
consept link 3


This worked thanks to a friend.
def _get_all_links(self):
consepts = self.section_bs4.select('consept')
for video_index, post in enumerate(consepts):
consept_url = post.find_parent('a')['href']

Related

Iconify not same line with tag <p> Tailwind CSS

<div class="relative p-8 top-20">
<Icon
icon="material-symbols:format-quote-outline"
color="#97A3B6"
width="35"
height="35"
:rotate="2"
/>
</div>
<p class="text-2xl pl-24 pt-10 text-slate-400 p-10">
Find job here
</p>
<Icon
icon="material-symbols:format-quote-outline"
color="#97A3B6"
width="35"
height="35"
/>
enter image description here
I was input tag for iconify but it's more space like this enter image description here
I want iconify after word "here"
Thank you so much

If you only want quotation marks after the word here, the flex class will solve your problem.
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative top-20 flex p-8">
<svg class="h-8 w-8" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.301 4c.411 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.738 4.129-4.308 4.129-3.24 0-4.83-2.547-4.83-5.307 0-5.98 6.834-10.693 8.468-10.693zm-10.833 0c.41 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.739 4.129-4.308 4.129-3.241 0-4.83-2.547-4.83-5.307 0-5.98 6.833-10.693 8.468-10.693z" fill-rule="nonzero" /></svg>
<p class="p-10 pl-24 pt-10 text-2xl text-slate-400">Find job here</p>
<svg class="h-8 w-8" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.699 20c-.411 0-.699-.312-.699-.662 0-.249.145-.516.497-.703 1.788-.947 3.858-4.226 3.858-6.248-3.016.092-4.326-2.582-4.326-4.258 0-2.006 1.738-4.129 4.308-4.129 3.241 0 4.83 2.547 4.83 5.307 0 5.981-6.834 10.693-8.468 10.693zm10.833 0c-.41 0-.699-.312-.699-.662 0-.249.145-.516.497-.703 1.788-.947 3.858-4.226 3.858-6.248-3.015.092-4.326-2.582-4.326-4.258 0-2.006 1.739-4.129 4.308-4.129 3.241 0 4.83 2.547 4.83 5.307 0 5.981-6.833 10.693-8.468 10.693z" fill-rule="nonzero" /></svg>
</div>

Change SVG polygon color based upon page

I have an SVG that represents a flower (for lack of a better description using Polygons), each leaf is linked to a webpage. When hovering over the leaf it changes colour from green to yellow. This flower is shown on every page, it is functioning as a navigation menu.
What I can't get to work is that when a page is visited the color of the leaf to stay yellow, of the visited page.
Scenario:
User hovers over Communities (leaf).
Communities (leaf) color changes from green to yellow.
User clicks on Communities (leaf).
The communities page opens.
What I am trying to achieve.
The Communities leaf stays yellow when the visitor is on the communities page.
The code I have so far:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1112 1033.2" style="enable-background:new 0 0 1112 1033.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#104741;} /*The green color*/
.st0:hover{fill:#F0CB3F;} /*when hover over go yellow*/
.st1{fill:#FFFFFF;} /*standard color for the text*/
.st2{font-family:'Roboto-Bold', sans-serif;} /*Text type*/
.st3{font-size:45px;} /*Text size*/
.st4{fill:#F0CB3F;}
</style>
<a id="Teaching" xlink:href="https://tradeshack.au/teaching-online/" >
<polygon id="Teaching_00000051348337870285784970000016147037851407144324_" class="st0" points="547,303.2 368,403.2 189,303.2
189,103.3 368,3.3 547,103.3 "/>
<text transform="matrix(1 0 0 1 278.9999 223.2402)" class="st1 st2 st3">Teaching</text>
</a>
<a id="Learning" xlink:href="https://tradeshack.au/local-online-courses/" >
<polygon id="Learning_00000173841655452649517230000006122666773149035708_" class="st0" points="927,307.2 748,407.2 569,307.2
569,107.2 748,7.2 927,107.2 "/>
<text transform="matrix(1 0 0 1 658.3733 232.2399)" class="st1 st2 st3">Learning</text>
</a>
<a id="Home" xlink:href="https://tradeshack.au" >
<polygon id="Home_00000093143914122244361730000008396680916595534749_" class="st4" points="736,618.3 557,718.2 378,618.3
378,418.3 557,318.3 736,418.3 "/>
<image style="overflow:visible;" width="214" height="184" id="house_xA0_Image_00000048475658377819784140000012594620538900893574_" xlink:href="https://tradeshack.au/wp-content/uploads/2022/08/C6FE9EEE.png" transform="matrix(1.6822 0 0 1.7609 378 358.24)">
</image>
</a>
<a id="Growing" xlink:href="https://tradeshack.au/backyard-growers/" >
<polygon id="Growing_00000175323106510374922210000005630539508612177844_" class="st0" points="1112,621.4 933,721.4 754,621.4
754,421.4 933,321.5 1112,421.4 "/>
<text transform="matrix(1 0 0 1 851.8009 538.2402)" class="st1 st2 st3">Growing</text>
</a>
<a id="News" xlink:href="https://tradeshack.au/local-news/" >
<polygon id="News_00000098220304566128214590000010493917784746845323_" class="st0" points="360,621.2 181,721.2 2,621.2 2,421.3
181,321.3 360,421.3 "/>
<text transform="matrix(1 0 0 1 123.8486 538.24)" class="st1 st2 st3">News</text>
</a>
<a id="Local_Exchange" xlink:href="https://tradeshack.au/local-edible-exchange/" >
<polygon id="Local_Exchange_00000052093847367928459750000017120200193115507858_" class="st0" points="547,937.2 368,1037.2
189,937.2 189,737.2 368,637.2 547,737.2 "/>
<text transform="matrix(1 0 0 1 210.6318 853.24)" class="st1 st2 st3">Local Exchange</text>
</a>
<a id="Communities" xlink:href="https://tradeshack.au/local-communities/" >
<polygon id="Communities_00000128464967429771677690000007271752719640598663_" class="st0" points="927,937.2 748,1037.2
569,937.2 569,737.2 748,637.2 927,737.2 "/>
<text transform="matrix(1 0 0 1 612.1426 853.24)" class="st1 st2 st3">Communities</text>
</a>
</svg>
So how do I go about getting that done ;-)>
You can see a working example, without the bit that I cannot figure out, on my website Tradeshack website where the example is.

This is resolved now by putting a page specific SVG on each page.

Sizing an SVG element according to png/jpeg image inside

Trying to wrap my head around SVGs and displaying images. I asked a related question just a few hours ago but I seems to have managed to figure that part out, now I'm stuck with trying to figure out the relation between viewport, viewbox and the image tag inside it.
My first understanding of viewbox was that it was basically defining the coordination system. having it set to "0 0 100 100" meant "upper left corner is called 0,0 and 100,100 is the bottom right coordinate" then if you draw something like a rect you use 0-100 to reach the corners. Then you use css around it set the size you want on the container and all inside the SVG tag is scaled accordingly.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row" style="height: 100vh;">
<div class="col-2" style="background: pink">
1 of 3
</div>
<div class="col-8 bg-dark">
<p>
A bit of text
</p>
<svg viewBox="0 0 100 100" style="outline: 1px solid red" preserveAspectRatio="xMidYMid meet">
<defs>
<mask id="image-mask" x="0" y="0" width="100" height="100">
<rect x="0" y="0" width="100" height="100" fill="#F000FF" />
<rect x="33" y="0" width="33" height="100" fill="white" />
</mask>
</defs>
<image width="100" height="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Panorama_Gendarmenmarkt-Berlin-Huntke-2008.jpg/640px-Panorama_Gendarmenmarkt-Berlin-Huntke-2008.jpg" mask="url(#image-mask)" />
</svg>
<p>
Some more text
</p>
</div>
<div class="col-2" style="background: orange">
3 of 3
</div>
</div>
</div>
That seems very wrong.
After tweaking and testing and poking around my current understanding is "if I want to display a non-vector image inside the SVG will I have to set the viewport and the image height/width to match the aspect ratio of the image, the numbers don't matter as long as the ratio is correct". So the image I have here is 640x170px. Normalising to width 100 the height is 26.56. So I set viewport to 0 0 100 26.56 and image width/height to 100 and 26.56 respectively:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row" style="height: 100vh;">
<div class="col-2" style="background: pink">
1 of 3
</div>
<div class="col-8 bg-dark">
<p>
A bit of text
</p>
<svg viewBox="0 0 100 26.56" style="outline: 1px solid red" preserveAspectRatio="xMidYMid meet">
<defs>
<mask id="image-mask" x="0" y="0" width="100" height="100">
<rect x="0" y="0" width="100" height="100" fill="#F000FF" />
<rect x="33" y="0" width="33" height="100" fill="white" />
</mask>
</defs>
<image width="100" height="26.56" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Panorama_Gendarmenmarkt-Berlin-Huntke-2008.jpg/640px-Panorama_Gendarmenmarkt-Berlin-Huntke-2008.jpg" mask="url(#image-mask)" />
</svg>
<p>
Some more text
</p>
</div>
<div class="col-2" style="background: orange">
3 of 3
</div>
</div>
</div>
That seems to work, and it works for the commented out image as well when I adjust the numbers to fit it's aspect ratio of 100x66.56. I haven't really been able to find much info when it comes to the viewBox and images so my worry is that I'm just lucky and guessed something which works for two examples.
So the answers I'm looking for are:
Are my assumptions correct?
Does this mean that when I want to be able to show different aspect ratios of images do I have to adjust the viewport and the image width/height with javascript for each image?
Is there any more efficient way of solving this? Like "width: 100%; Height: auto;" and make it wrap all aspect rations of images?

How to get the name of a xlink:href/svg id with scrapy?

I am totally new to scrapy and just started yesterday to use it.
There is a page with ratings for products I want to get. Unfortunately the ratings are not texts but stars.
Let's say a product got two stars, it looks like this:
<div class="index-classRating">
<div class="index-classIcon index-red">
<svg viewBox="0 0 32 32">
<use xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full">
#shadow-root (closed)
<svg id="wci-starrating-full" viewBox="0 0 512 512" width="100%" height="100%">
<path d="1 2 3"></path>
</svg>
</use>
</svg>
</div>
<div class="index-classIcon index-red">
<svg viewBox="0 0 32 32">
<use xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full">
#shadow-root (closed)
<svg id="wci-starrating-full" viewBox="0 0 512 512" width="100%" height="100%">
<path d="1 2 3"></path>
</svg>
</use>
</svg>
</div>
So I want to count how many stars aka "/static/media/icons.f88ec073.svg#wci-starrating-full" or "wci-starrating-full" are there.
So I tried
stars = response.xpath('//div[#class="index-classIcon index_red"]/svg[#viewBox="0 0 32 32"]/use[#xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full"]/svg/#id').extract()
and got an empty list.
But I want to have something like
stars = ["wci-starrating-full","wci-starrating-full"]

viewbox must be written lowercase, "index_red" has dash not hyphen
try
stars=response.xpath('//div[#class="index-classIcon index-red"]/svg[#viewbox="0 0 32 32"]/use/svg/#id').extract()
Total example: (please copy-paste into python)
import scrapy
response=scrapy.http.HtmlResponse(url='just_a_string',encoding='utf-8',body=u'''
<div class="index-classRating">
<div class="index-classIcon index-red">
<svg viewBox="0 0 32 32">
<use xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full">
#shadow-root (closed)
<svg id="wci-starrating-full" viewBox="0 0 512 512" width="100%" height="100%">
<path d="1 2 3"></path>
</svg>
</use>
</svg>
</div>
<div class="index-classIcon index-red">
<svg viewBox="0 0 32 32">
<use xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full">
#shadow-root (closed)
<svg id="wci-starrating-full" viewBox="0 0 512 512" width="100%" height="100%">
<path d="1 2 3"></path>
</svg>
</use>
</svg>
</div>
''')
stars=response.xpath('//div[#class="index-classIcon index-red"]/svg[#viewbox="0 0 32 32"]/use/svg/#id').extract()
print(repr(stars))

Mobile's virtual keyboard destroy design

First, sorry for my bad english. I'll try to explain the best i can.
So, i have problem with mobile's keyboards. When i try to search something on my search-bar, the virtual keyboard appears and destroy my design. Here you can see my problem :
Normal
Bug
On the first screen, you can see " Barre de recherche " means " SearchBar" and " Contenu du site " means " Website content "
On the second screen, as you can see, the content hide my searchbar, only when keyboard is open...
I don't really know how to solve this.

<div class="row bgBlanc clrNoir hidden-lg hidden-md search-container hidden-search-container">
<div class="col-24 flex flexRow flexAlignCenter-sm flexJustifySpace-sm">
<form class="row search-bar searchFormMob fullW" name="quickFind" action='advanced_search_result.php' method="get" autocomplete="off">
<input class="tup col-offset-1 col-18 col-sm-20 keywords fs40" type="search" name="keywords" placeholder="<?php echo TEXT_SEARCH_PEF_KEYWORDS; ?>" style="min-height:10rem; width:100%;border-style:none;opacity: 0.4;">
<!-- <button class="submitBtn-search col-2 ffwi pt15 fs60" type="submit"></button> -->
<button class="submitBtn-search col-2 col-sm-2 ffwi pt15 fs60" type="submit">
<svg width="44px" height="44px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icones-nav-2" transform="translate(-805.000000, -25.000000)" fill-rule="nonzero" fill="#000000">
<g id="ic_search_black_24px-copy" transform="translate(805.000000, 25.000000)">
<path d="XXXXXXXXXXXXX" id="Shape"></path>
</g>
</g>
</g>
</svg>
</button>
</form>
</div>
</div>

Resources