Sending image name to html tag - html

the main idea is showing picture according to selected id:
<div *ngIf="t">
<h2>{{t.name}} details!</h2>
<h3>{{t.description}}</h3>
<img src="images/inside/1.jpg" class = "grid grid-pad">
</div>
instead of 1.jpg i would like to use t.filename? How can i do this?

Related

How to get a div or span class from a related span class?

I've found the lowest class: <span class="pill css-1a10nyx e1pqc3131"> of multiple elements of a website but now I want to find the related/linked upper-class so for example the highest <div class="css-1v73czv eh8fd9011" xpath="1">. I've got the soup but can't figure out a way to get from the 'lowest' class to the 'highest' class, any idea?
<div class="css-1v73czv eh8fd9011" xpath="1">
<div class="css-19qortz eh8fd9010">
<header class="css-1idy7oy eh8fd909">
<div class="css-1rkuvma eh8fd908">
<footer class="css-f9q2sp eh8fd907">
<span class="pill css-1a10nyx e1pqc3131">
End result would be:
INPUT- Search on on all elements of a page with class <span class="pill css-1a10nyx e1pqc3131">(lowest)
OUTPUT - Get all related titles or headers of said class.
I've tried it with if-statements but that doesn't work consistently. Something with an if class = (searchable class) then get (desired higher class) should work.
I can add any more details if needed please let me know, thanks in advance!
EDIT: Picture per clarification where the title(highest class) = "Wooferland Festival 2022" and the number(lowest class) = 253
As mentioned, question needs some more information, to give a concret answer.
Assuming you like to scrape the information in the picture based on your example HTML you select your pill and use .find_previous() to locate your elements:
for e in soup.select('span.pill'):
print(e.find_previous('header').text)
print(e.find_previous('div').text)
print(e.text)
Assuming there is a cotainer tag in HTML structure like <a> or other you would select this based on the condition, that it contains a <span> wit class pill:
for e in soup.select('a:has(span.pill)'):
print(e.header.text)
print(e.header.next.text)
print(e.footer.span.text)
Note: Instead of using css classes, that can be highly dynamic, try use more static attributes or the HTML structure.
Example
See both options, for first one the <a> do not matter.
from bs4 import BeautifulSoup
html='''
<a>
<div class="css-1v73czv eh8fd9011" xpath="1">
<div class="css-19qortz eh8fd9010">
<header class="css-1idy7oy eh8fd909">some date information</header>
<div class="css-1rkuvma eh8fd908">some title</div>
<footer class="css-f9q2sp eh8fd907">
<span class="pill css-1a10nyx e1pqc3131">some number</span>
<footer>
</div>
</div>
</a>
'''
soup = BeautifulSoup(html)
for e in soup.select('span.pill'):
print(e.find_previous('header').text)
print(e.find_previous('div').text)
print(e.text)
print('---------')
for e in soup.select('a:has(span.pill)'):
print(e.header.text)
print(e.header.next.text)
print(e.footer.span.text)
Output
some date information
some title
some number
---------
some date information
some date information
some number

'base.document.layout' object has no attribute 'header' odoo14 - trying to display custom fields in report

with a custom module, I have added the two fields header and footer to every res.company object. These are fields of the type binary.
I now want to display them in my document layout in qweb.
Unfortunately, odoo tells me
'base.document.layout' object has no attribute 'header'
This is what my layout looks like
<?xml version="1.0"?>
<t t-name="web.external_layout_boxed">
<div t-attf-class="header o_company_#{company.id}_layout" t-att-style="report_header_style">
<div class="o_boxed_header">
<div class="row mb8">
<div class="col-6">
<!--HERE--> <img t-if="company.logo" t-att-src="image_data_uri(company.header)" alt="brief_header"/>
</div>
<div class="col-6 text-right mb4">
<h4 class="mt0" t-field="company.report_header"/>
<div name="company_address" class="float-right mb4">
<span class="company_address" t-field="company.partner_id" t-options="{"widget": "contact", "fields": ["address", "name"], "no_marker": true}"/>
</div>
</div>
</div>
</div>
</div>
<div t-attf-class="article o_report_layout_boxed o_company_#{company.id}_layout" t-att-data-oe-model="o and o._name" t-att-data-oe-id="o and o.id" t-att-data-oe-lang="o and o.env.context.get('lang')">
<div class="pt-5">
<t t-call="web.address_layout"/>
</div>
<t t-raw="0"/>
</div>
<img t-if="company.logo" t-att-src="image_data_uri(company.footer)" alt="brief_footer"/>
</t>
as you can see I am trying to access the header with company.header
the pictures appended show you that the fields exist on the type.
What am I doing wrong? How can I correctly display the uploaded images in the external_layout_boxed?
When rendering the document, the company variable is set to wizard object not to the user company. Odoo will try to access header and footer in base.document.layout model.
To fix that issue, alter the document layout model like following:
class BaseDocumentLayout(models.TransientModel):
_inherit = 'base.document.layout'
header = fields.Binary(related="company_id.header")
footer = fields.Binary(related="company_id.footer")
You can find an example in l10n_de module where they created a new report layout and altered base.document.layout to use new fields like street, city or bank_ids

Using a dynamic name for image source in Angular

I have some decks of cards.
I want to display a specific image for each deck, I have an assets folder with all my images.
<div class="decks">
<div *ngFor="let deck of decks" class="deck">
<img
src="../../assets/img/MAGE.png"
MAGE is just an exemple of a deckClass, that name should match deck.deckClass
class="img-responsive"
style="height: 200px;">
<h4> {{deck.deckName}} : {{deck.deckClass}} </h4>
<p *ngFor="let card of deck.deckCards" >
{{ card.name }} : {{ card.manaCost }}
</p>
</div>
</div>
How can I concatenate in a src attribute the deck.deckClass name in a dynamic way?
Consider using the Expression Context
You can wrap the sry attribute with square brackets, this way Angular will know to evaluate the value:
[src]="'../../assets/img/' + deck.deckClass '.png'"
See a demo here: https://stackblitz.com/edit/angular-ua9cfc
I don't have images in there, so they will be shown as broken img's in the demo ...
p.s.: if those images are in your src/assets/ folder, then this should suffice:
[src]="'assets/img/' + deck.deckClass '.png'"

Contents under a specific 'div' is not showing in BeautifulSoup

I have been trying to fetch user comment on a blog post. The tag between which the comments lie is <div id='loadComment> ..... </div>.
So when I tried to view it through soap.prettify(), I only found <div id='loadComment> </div>. The codes in between were not displaying.
Below is the real code which I should be able to see as output
<div id = "loadComment">
<div>
<div class = "comm-cont">
<a href = "...">
................
<a class = ....> ... </a>
</a>
</div>
</div>
But the output I get using prettify() is
<div id = 'loadComment'>
</div>
I would want to fetch comments but I am not even able to view them through BeutifulSoup. Thereby, I need help from the community. Thank you in advance.
Edit:
url:
https://www.somewhereinblog.net/blog/nibhrita/30292259

c# razor template with #Link.To renders the incorrect link

I have a template for the details view of a single product. In this template it lists the "tags" and "categories" with links to view products of the same tag or category.
I define the links for the tags and categories in the same way but they are rendered differently.
here is my template:
<link rel="stylesheet" href="#App.Path/assets/portfolio.css" data-enableoptimizations="bottom"/>
<div class="sc-element">
<div class="ks-portfolio-detail">
<div class="row">
<div class="col-sm-12 col-md-6">#Edit.Toolbar(Content)
<img src="#Content.Image" alt="#Content.UrlKey" class="img-responsive" />
</div>
<div class="col-sm-12 col-md-6">
<div class="ks-title"><h1>#Content.Title</h1></div>
...
<div class="ks-lable">Categories:</div>
#{ int count=0; }
#foreach(var item in AsDynamic(Content.Categories)){
count++;
#item.Title
#(count < Content.Categories.Count?" | ":"")
}
<br/><br/>
<div class="ks-lable">Tags:</div>
#{ int counter=0; }
#foreach(var item in AsDynamic(Content.Tags)){
counter++;
#item.Name
#(counter < Content.Tags.Count?" | ":"")
}
</div>
</div>
</div>
</div>
Please note the lines where the category and tag links are created:
#item.Title
...
#item.Name
PROBLEM
The tags Link.To renders the link with "slashes" like:
http://dnn804/portfolio/tag/Demo2
but the category renders the link like:
http://dnn804/portfolio?category=Flowers
QUESTION
Can someone help me figure out why these links are rendered differently when using the same function? I want them both to appear like the "tags" link.
Thanks in advance.
The Link.To uses the DNN-internal link resolution. I'm just going to guess that there are some terms that DNN maybe treats differently, causing special links. DNN does sometimes do strange things with links, just like on the home page, which is why we are using it.
That's just a guess though.
You could run some experiments like "cat=" instead of category, to validate this.