I am making a XSL (to be converted to HTML) file from XML and i want to insert an image. My problem is that the link of the image is in the XML. I want the image from "caixa id="102"". How can i do it?
XML:
<loja xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="trabalhoXSD.xsd">
<componentesDisponiveis>
<caixa id="101">
<preco>23.90</preco>
<imagem>https://www.pcdiga.com/bizizi/img_upload/produtos_1/18677_1_gx.jpg?d=1443548409</imagem>
<descricao>A Nox introduz a Kore: uma solução com amplas possibilidades num formato semi-tower. A sua versatilidade converte-a numa opção perfeita para aqueles que
necessitam de uma caixa para hardware de alto desempenho, num formato mais compacto.
O design em preto com linhas angulares fornecem-lhe um aspecto implacável, juntamente com o efeito de alumínio escovado do painel frontal.</descricao>
<HDD>5</HDD>
<SDD>1</SDD>
<leitorDiscosOpticos>0</leitorDiscosOpticos>
</caixa>
<caixa id="102">
<preco>124.89</preco>
<imagem>https://www.pcdiga.com/bizizi/img_upload/produtos_1/8502_1_gx.png?d=1348685644</imagem>
<descricao>Quando você precisar de sair e levar seu jogo, a caixa Vengeance C70 é a opção perfeita. Ela é esculpida em aço sólido e feito para sobreviver a viagens com
menos desgaste, e as alças para transporte ergonómico acrescentam confiança ao transporte.</descricao>
<HDD>8</HDD>
<SDD>1</SDD>
<leitorDiscosOpticos>0</leitorDiscosOpticos>
</caixa></componentesDisponiveis></loja>
Image sources, like other HTML attributes, need to be added using the <xsl:attribute> tag.
<img>
<xsl:attribute name="src">
<xsl:value-of select="componentesDisponiveis/caixa[#id = '102']/imagem"/>
</xsl:attribute>
</img>
As you can see to get the specific Id you just add it between square brackets as a condition.
Related
I already use border-spacing, border-collapse, padding to reduce the space, but it doesn't reduce the space as much as I wanted to. Can we reduce more than this?
before added border spacing :
after added border spacing etc:
no se como tengas colocadas las etiquetas, pero si los elementos que estan dentro de la celda estan contenidas dentro de un div podrias añadirle a la clase propiedad tipo asi :
div class="row-12" dado que al igual que el column el ancho max es de 12
This is the Page Code
<div class="product-description">
<h2>O que é Cicatri Renov ?</h2>
<p>Nada como ter um leave-in de tratamento como aliado para reparar os danos do cabelo. Cicatri Renov além de ser um reparador para cabelos danificados, também serve como protetor térmico. Sua fórmula conta com 10 principais benefícios que os fios necessitam: </p>
<ol>
<li>Reparação instantânea; </li>
<li>Selagem das pontas; </li>
<li>100% mais brilho; </li>
<li>Maciez profunda; </li>
<li>Toque deslizante; </li>
<li>Desembaraço imediato; </li>
<li>10x menos quebra;</li>
<li>Antifrizz;</li>
<li>Antiumidade;</li>
<li>Proteção térmica.</li>
</ol>
<h2>Para que serve o Cicatri Renov?</h2>
<p>O leave-in Elseve pode ser utilizado em todos os tipos de cabelo, atendendo principalmente os danificados. Traz proteção, reparação e revitalização aos fios. Pode ser usado com o cabelo seco ou molhado, antes ou depois do secador.</p>
<h2>Benefícios</h2>
<ul>
<li>O Leave-In Cicatri Renov faz uma plástica capilar instantânea nos fios, sem pesar.</li>
<li>Sela as pontas duplas e o frizz.</li>
<li>Repara instantaneamente, com um toque deslizante.</li>
<li>Proteção térmica.</li>
</ul>
<h2>Como usar o Cicatri Renov?</h2>
<p>Distribua uma pequena quantidade nos fios secos ou úmidos, do comprimento às pontas. Não enxágue!</p>
<p><strong>Dica:</strong> Como proteção térmica, pode ser usado antes ou depois de escova ou chapinha.</p>
<h2>Precaução</h2>
<ul>
<li>Caso o produto caia nos olhos, lave-os imediatamente com água.</li>
<li>Mantenha fora do alcance de crianças.</li>
</ul>
<h2>Composição</h2>
<p>Aqua/water, Dimethicone, Cetearyl Alcohol, Phenyl Trimethicone, Amodimethicone, Quaternium-33, Phenoxyethanol, Steareth-20, Acetic Acid, Ppg-1 Trideceth-6, Behentrimonium Methosulfate, Trideceth-5, Trideceth-10, Polyquaternium-37, Chlorhexidine Digluconate, Dimethiconol, Limonene, Linalool, Benzyl Salicylate, Benzyl Alcohol, Propylene Glycol Dicaprilate/dicaprate, 2-oleamido-1,3-octa-decanediol, Alpha-isomethyl Ionone, Geraniol, Cetyl Alcohol, Citronellol, Citral, Hexyl Cinnamal, Glycerin, Glyceryl , Linoleate, Glyceryl Oleate, Glyceryl Linoleate, Parfim/ Fragrance.</p> </div>
I want to make an XPath for Octoparse. I want to make an XPath that only selects a text that matches a specific heading. In my case it is "Composição" and the text is under the <p>.
This XPath,
//p[preceding-sibling::*[1][self::h2][.='Composição']]
will select all p elements whose immediately preceding sibling is an h2 element with string value of "Composição".
Plain english sentence is:
While in 5th direct and ready for the downshift to 4th overdrive, push
the range preselection lever down.
Converts to French correctly as:
Alors que dans le 5ème direct et prêt pour le downshift à la 4ème
overdrive, pousser le levier de présélection de gamme vers le bas.
However, when including html (&textType=html), the phrase doesn't have the same meaning:
While in 5th direct and ready for the downshift to <span data-id="xyz123">4th overdrive</span>, push the range preselection lever down.
Translates to:
Alors que dans le 5ème direct et prêt pour le downshift à 4e
overdrive, pousser la gamme levier de présélection duvet.
The tags are considered an additional token in the sentence. Similar effect as punctuation, both having an effect on the translation.
This question already has answers here:
How to wrap text inside to different paragraphs around image inside the first paragraph (<p> tag). (Content is inputted using CKeditor Plugin)
(5 answers)
Closed 4 years ago.
I am using CKeditor to input RichText.
Inside the text area of CKEditor, the text is perfectly wrapped over the image.
But the text is not wraping on the html page.
This is how it looks in CKeditor
But my html looks like this.
What may be I am missing here. ?
Here is the actual code snippet
<p>Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups under
<img alt="" src="/media/uploads/2018/09/27/sufs5o_fWCbPPM.jpg" style="float:right; height:1080px; width:420px">
Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. .
</p>
<p>s settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.</p>
<img align="right" hspace="3px" vspace="3px" alt="" src="/media/uploads/2018/09/27/sufs5o_fWCbPPM.jpg" style="height:1080px; width:420px">
Try this on
.floatright {
float: right;
clear: right;
position: relative;
margin: 0 0 0.5em 0.5em;
}
<div style="text-align:justify;margin:6px">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Mandala1_detail.jpg/150px-Mandala1_detail.jpg" width="150" height="173"
class="floatright"
>
<p>
El arte budista tiene su origen en el subcontinente indio (actuales India, Bangladés, Nepal y Pakistán) en los siglos posteriores a la vida de Siddhartha Gautama, el Buda histórico, entre los siglos vi y v a. C. Más tarde, gracias al contacto con otras culturas, logró evolucionar y difundirse por el resto de Asia y el mundo.
Una primera etapa, llamada preicónica, se sitúa antes del siglo i d. C. y se caracteriza por no recurrir a representaciones directas de Siddhartha Gautama como el Buda Śākyamuni o de los budas míticos que se suponen existieron en eras pasadas. La etapa siguiente, icónica, tiene por el contrario a la imagen humana del Buda y los budas del pasado, del futuro y de otros universos como símbolo central de sus obras de arte.
Desde entonces, el arte budista se diversificó y evolucionó para adaptarse a las nuevas regiones en las que comenzaba a sumar adeptos. Se expandió hacia el este y el norte a través de Asia Central, para formar lo que luego fue clasificado como arte budista del norte —en contraposición al arte budista del sur, que surgiría en el sudeste de Asia. En India, el arte budista floreció e incluso llegó a influir en el desarrollo del arte hindú, hasta que el budismo casi desapareció alrededor del siglo x, con la expansión del hinduismo y el islam.
</p>
<p>
El arte budista tiene su origen en el subcontinente indio (actuales India, Bangladés, Nepal y Pakistán) en los siglos posteriores a la vida de Siddhartha Gautama, el Buda histórico, entre los siglos vi y v a. C. Más tarde, gracias al contacto con otras culturas, logró evolucionar y difundirse por el resto de Asia y el mundo.
Una primera etapa, llamada preicónica, se sitúa antes del siglo i d. C. y se caracteriza por no recurrir a representaciones directas de Siddhartha Gautama como el Buda Śākyamuni o de los budas míticos que se suponen existieron en eras pasadas. La etapa siguiente, icónica, tiene por el contrario a la imagen humana del Buda y los budas del pasado, del futuro y de otros universos como símbolo central de sus obras de arte.
Desde entonces, el arte budista se diversificó y evolucionó para adaptarse a las nuevas regiones en las que comenzaba a sumar adeptos. Se expandió hacia el este y el norte a través de Asia Central, para formar lo que luego fue clasificado como arte budista del norte —en contraposición al arte budista del sur, que surgiría en el sudeste de Asia. En India, el arte budista floreció e incluso llegó a influir en el desarrollo del arte hindú, hasta que el budismo casi desapareció alrededor del siglo x, con la expansión del hinduismo y el islam.
</p>
</div>
I have a request in my web api that give me a Json like this
{
"$id": "1",
"ID": 9710,
"post_author": 2,
"post_date": "31/08/2017",
"post_content": "Assim como aconteceu no primeiro Destiny, a <strong>Bungie</strong> e a <strong>Activision</strong> lançaram nesta quinta-feira (31) um trailer live action de <strong>Destiny 2</strong>, com direito a <strong>Cayde-6</strong> fazendo um discurso motivacional, lembrando que todas as coisas que você ama na Terra se foram (inclusive os cachorrinhos).<br><br><div class=\"video\"><iframe src='https://www.youtube.com/embed/UhE6B3MPsUM'></iframe></div><br><br>O trailer por <strong>Jordan Vogt-Roberts</strong> mais conhecido pelo seu trabalho em <strong>Kong: A ilha da Caveira</strong>.<br><br>A nossa aventura em Destiny 2 começa com os <strong>Guardiões</strong> buscando vingança após ter a última cidade segura na Terra destruída pela Legião Vermelha, liderada pelo poderoso <strong>Ghaul</strong>. Com isso, será necessário que exploremos novos mundos do sistema solar, em busca de armas e habilidades para vencer essa guerra e recuperar a nossa luz.<br><br><strong>Destiny 2</strong> será lançado em 6 de setembro pra <strong>Xbox One </strong>e <strong>PS4</strong>. No PC o jogo será lançado um mês depois no dia 24 de outubro.<br><br><strong>Saiba mais sobre Destiny 2</strong>",
"post_title": "Destiny 2 ganha trailer live action ao som Sabotage",
"post_name": "destiny-2-ganha-trailer-live-action-ao-som-sabotage",
"guid": "http://nextseason.com.br/?p=9710",
"meta_value": 9711,
"id_post_img": 9711,
"link_imagem": "http://nextseason.com.br/wp-content/uploads/live-action-destiny-2.jpg",
"id_post_categoria": 9710,
"category": "Games"
}
and in app using Ionic 2 i put the code
<div [innerHtml]="post.post_content"> </div>
where post.post_content is the post_content from my request.
inside the post_content has an with a embed youtube video, but when i run the, the video does not show. In debug appears like that.
<div>Assim como aconteceu no primeiro Destiny, a
<strong>Bungie</strong> e a <strong>Activision</strong>
lançaram nesta quinta-feira (31) um trailer live action de <strong>Destiny
2</strong>, com direito a <strong>Cayde-6</strong> fazendo um discurso
motivacional, lembrando que todas as coisas que você ama na Terra se foram
(inclusive os cachorrinhos).<br><br><div class="video"></div><br><br>O
trailer por <strong>Jordan Vogt-Roberts</strong>
the div element always shows empty. Someone can help me? have any idea why this occurs?
Sorry my english!