So I've been having this issue where longer comments in my Blade templates will cause the WAMP instance I have running on my local machine to respond with "This webpage is not available" when I try to access the page in Chrome.
The template I am responding with form my controller via View::make() is this:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
{{--
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, facilis, provident, natus praesentium sed nihil perferendis saepe hic consequuntur tempora omnis consectetur aliquid accusamus. Laudantium, a, pariatur in officia ut dicta doloribus distinctio maiores magni iusto minima quibusdam dignissimos nemo culpa aut dolor enim blanditiis porro facere ex consequatur facilis voluptatibus rem error quidem nam quo quis ad soluta beatae voluptate quisquam commodi maxime! Ullam, veritatis, enim dicta at vero quidem accusamus. Labore, tempore, esse sint suscipit tempora temporibus quam libero eligendi cum quas corrupti ducimus adipisci recusandae debitis fugit illo numquam saepe ullam sit tenetur odit voluptates perspiciatis nulla quo placeat aperiam nisi animi hic rerum ratione. Suscipit, ipsam, explicabo, dolores consectetur quas aliquam animi deserunt iusto commodi eaque voluptate aperiam non atque totam corporis quam tempore at accusamus! Molestiae, repellat beatae adipisci eaque doloribus earum voluptate voluptatum saepe sequi tempora similique quidem debitis quas nam eligendi et ex architecto porro consequuntur itaque explicabo tenetur nulla quam quaerat sed cum aliquid quisquam recusandae laudantium minus numquam eius dolore odio iusto optio soluta minima facere voluptatibus autem vel ut est totam neque dicta quis voluptatem! Deserunt, vero, odit pariatur maxime quisquam delectus fuga enim quis sapiente accusantium asperiores alias voluptas ullam facilis praesentium beatae nisi iure numquam? Voluptatibus, repellat doloremque quia aliquid amet ea nostrum reiciendis ipsum non unde ullam repudiandae omnis. Cupiditate, at ullam eius possimus necessitatibus commodi repudiandae excepturi exercitationem sint ipsum dolorem totam a porro quaerat odit fugiat nisi? Quo, assumenda, sit eos sint magnam laudantium veniam officia delectus minima ipsa corrupti ut impedit dolore minus et id dignissimos quam quod reprehenderit est obcaecati expedita quos hic quis odio nulla nobis itaque facilis cum ducimus numquam suscipit eligendi praesentium ea aliquid ullam doloremque ad repellendus ex optio vero tempora error neque alias consectetur dolorum. Cumque, officiis, aliquam!
--}}
</body>
</html>
When I shorten or remove the comment, the server responds just fine. What could be causing this? I won't need comments in my production code, but I like to keep things commented while working, and I like being able to comment out sections of code where HTML comments would be inconvenient.
EDIT: Just to clarify, there is not extra routing or controller logic going on. Just
// routes.php
Route::get('/', 'StaticController#showIndex');
// StaticController.php
public function showIndex() {
return View::make('static.index');
}
EDIT: With some experimentation, I have determined that the maximum comment length before the error occurs is 631 characters inside the {{-- --}} delimiters. Adding one additional character causes the error.
Related
I am attempting to build a search engine with an Elasticsearch backend and a Vue.js front end. It is primarily based upon this tutorial. It was suggested that a nice feature would be to highlight search results with the initial search term ie if I search "foo" in the search bar, then a search result would look something like foobar.
I have tried placing the v-html block into various divs, but usually to no success.
My elastic index records that match this format:
result._source.Title,
result._source.description,
result._source.contact,
result._source.contactEmail
HTML:
<div class="row">
<div class="col-md-6" v-for="result in results" v-html="highlight(result._source.Title)">
<div class="ul">
<ul>
<li>{{ result._source.Title }},</li>
<li>{{ result._source.description }},</li>
<li>{{ result._source.contact }},</li>
<li>{{ result._source.contactEmail }} </li>
JS: highlight function
highlight(text) {
return text.replace(new RegExp(this.query, 'gi'), '<span class="highlight">$&</span>')
}
}
I have been able to implement basic functionality to highlight a single data point, but the rest of the page does not render. For instance, in this example, title will be highlighted, but the description, contact, and contactEmail will not render on the page. Additionally, if the search term does not match the title, the page errors out.
It's likely due to to the function call in your v-html directive: highlight(result._source.Title).
Instead you should be using v-html to bind to each result property, which allows you to replace occurrences in any of the properties before updating the template.
Try updating your code similar to the following:
new Vue({
el: '#app',
data() {
return {
content: [{
title: 'Result 1',
text: `Phasellus euismod neque diam, aliquam commodo neque venenatis in. Sed non eros lorem. Fusce sit amet gravida nunc. Nunc non pulvinar tellus. Donec rutrum sagittis nulla eu commodo. Morbi condimentum molestie tortor venenatis dignissim. Aenean ac ligula at lectus pharetra sagittis. Integer convallis ipsum ex, ut congue urna auctor in. Sed consequat elit ipsum, eu vestibulum nisl egestas sit amet. Aenean eu mi et metus congue porttitor ut vitae augue. Donec congue semper euismod. Nam eget turpis eros. In vitae viverra eros.`
},
{
title: 'Result 2',
text: `Nunc vehicula lorem a enim pharetra pellentesque. Nullam nulla nisi, imperdiet at blandit in, molestie sed ipsum. Curabitur elit nisl, aliquam vel urna at, tincidunt interdum tortor. Sed lacinia urna non tellus consectetur molestie. Cras nunc justo, suscipit eu luctus eget, viverra at nisl. Curabitur ut sodales justo, sit amet varius arcu. Nulla non varius justo, ut mattis diam. Nam venenatis malesuada enim. Ut id convallis augue. Pellentesque pretium aliquam porttitor. Donec at velit pulvinar, consequat eros at, ultrices urna. Sed non nisl tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dictum ipsum dolor, vitae volutpat dolor porta non.`
},
{
title: 'Result 3',
text: `Morbi bibendum justo enim, aliquam placerat magna euismod in. Sed ullamcorper augue ac nisl efficitur, eget ullamcorper neque rhoncus. Duis ac tristique orci. Curabitur lorem purus, varius eu sodales non, feugiat auctor orci. Pellentesque feugiat, felis eu accumsan ornare, lacus metus ultrices ipsum, vitae consequat velit neque in sapien. Nunc fringilla sollicitudin hendrerit. Vestibulum at massa convallis, finibus lacus ac, venenatis nulla. Nulla in condimentum metus. Donec sagittis nulla sed elit semper tristique. Vivamus facilisis sed lectus sed semper.`
},
{
title: 'Result 4',
text: `Phasellus suscipit eros ex, sed auctor turpis accumsan non. In ultrices convallis sem id tempor. Sed elementum ac lectus et scelerisque. Mauris vel leo a sem elementum volutpat. Vestibulum congue urna id velit porta, id scelerisque nulla pulvinar. Aliquam sit amet iaculis enim. Vestibulum enim tortor, sodales ut pharetra semper, eleifend sed lectus. Phasellus fringilla leo vel turpis feugiat lacinia. Morbi neque dui, vulputate eget molestie non, hendrerit eu felis. Phasellus erat erat, tempus ut mi ut, maximus dapibus nulla. Phasellus dignissim sollicitudin velit sit amet rhoncus. Curabitur commodo magna eget ex consequat, eget sollicitudin metus rhoncus. Aenean enim libero, dictum nec tempus quis, molestie at nulla.`
},
{
title: 'Result 5',
text: `Mauris ullamcorper mauris nec justo sodales, ac facilisis ipsum fringilla. Nam at urna eu ante luctus dignissim. In sit amet magna aliquam nibh tincidunt luctus vitae at arcu. Proin eu cursus tortor. Proin porttitor erat ac tortor ullamcorper lacinia. Curabitur sit amet ullamcorper ligula, rhoncus euismod est. Praesent non quam fermentum, bibendum lectus vel, auctor enim. Fusce eu viverra lectus. In molestie sit amet velit bibendum accumsan. Donec venenatis, urna sed convallis gravida, est est luctus mi, quis maximus ipsum metus sit amet ex. Vestibulum et nisi eu enim faucibus fermentum. Pellentesque pellentesque ultrices risus vel rutrum. Curabitur hendrerit urna in leo finibus rutrum. Maecenas posuere ultricies lectus eget elementum. Sed lacinia efficitur nisl, ac gravida urna ullamcorper consectetur. Aliquam erat volutpat.`
}
],
search: null
}
},
computed: {
blocks() {
if (this.search) {
const regex = new RegExp(this.search, 'g')
return this.content.map(c => {
return {
title: c.title.replace(regex, `<span class="highlight">${this.search}</span>`),
text: c.text.replace(regex, `<span class="highlight">${this.search}</span>`)
}
})
}
return this.content
}
}
})
.highlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="search">
<ul>
<li v-for="(block,i) in blocks" :key="i">
<p>Title: <span v-html="block.title"></span></p>
<p>Text: <span v-html="block.text"></span></p>
</li>
</ul>
</div>
I am trying to make the text floating around the image and have done my research and found out this question has asked before, however, I did tried their code and still doesn't work. I have pasted my code down below and can anyone have a look and give me some suggestions. Is the grid system stop the text wrapper around image as it divided them into two separate sections. How can I make the text floating around the image like the photo.
<div class="container text-section">
<div class="row">
<div class='float-left col-md-4'>
<img src="./assets/img/img6.jpeg" alt="img" width='100%'>
</div>
<div class='col-md-8'>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel,
aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis
eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend
tellus.
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in,
viverra quis, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor.
Aenean massa.
Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel,
aliquet nec,
feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
</p>
</div>
</div>
</div>
When using rows and cols you wont get any floating as the columns always set a width.
Get rid of the cols and bring the image and the text together like this (i inserted a dummy image so you can actually see stuff):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-section">
<div class="float-left">
<img src="https://dummyimage.com/300x200" alt="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel,
aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis
eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend
tellus.
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in,
viverra quis, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor.
Aenean massa.
Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel,
aliquet nec,
feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</p>
</div>
I am trying to get an image to pull-right and display block when in mobile, but my image keeps cutting into my text. Can anybody help me figure out how to make the image appear on top, then the text?
Here is the link: http://o-pd.com/AP
<div class="clearfix">
<img src="http://o-pd.com/AP/img/John-Abraham.jpg" alt="John Abraham" class="pull-right img-responsive gap-left" width="200" height="200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p>
<br/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p>
</div>
/*we will use media query to change the direction of img*/
#media (max-width:500px){
.pull-right{
float:left !important;
}
p{
clear:both;
}
}
I should build this layout
layout
but after various tests, I don't understand how place the image.
The text continues from one div to another. I've think to use the column CSS3 property but I think it's not the better solution.
How can I implement this layout?
Thanks in advice.
EDIT:
This is the HTML and CSS code of the last test:
.span11{
width: 90%;
display: block;
margin: 0 auto;
-moz-column-count: 2;
-moz-column-gap: 20pt;
-webkit-column-count: 2;
-webkit-column-gap: 20pt;
column-count: 2;
column-gap: 20pt;
}
#foto{
float: right;
margin-top: 50px;
}
<div class="span11">
<div id="foto">
<img src="http://fpoimg.com/600x400?text=Preview" >
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui ellus.Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.
</div>
This is Jsfiddle of the last test:
http://jsfiddle.net/DVwws/
After working with the example you found here I was able to edit the source code and eventually create a JSFiddle with your desired result.
General guide to accomplish this:
Create two side-by-side divs filled with text
Use the "Content" CSS property to create "holes" in your paragraphs where they are desired with content: ""; width: 125px; height: 250px;.
Use absolute positioning to place an image within that "hole" you created.
This image should assist in understanding the placing concept: (Just imagine the green-section as being the hole and centered vertically)
Here is the HTML and CSS from the JSFiddle I made:
<style>
#page-wrap { width: 100%; margin: 80px auto; position: relative; }
#logo { position: absolute; top: 125px; left: 50%; margin-left: -125px; }
.left, .right { width: 49%; text-align: justify}
.left { float:left; }
.right { float:right; }
#l, #r { width: 100%; position: relative;}
#l { float: left; text-align: justify}
#r { float: right; text-align: justify}
#l:before, #r:before { content: ""; width: 150px; height: 250px; vertical-align:-50%;}
#l:before { float: right;}
#r:before { float: left; }
</style>
AND
<div id="page-wrap">
<img src="http://placekitten.com/250/250" id="logo">
<div class="left">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. <div id="l">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metuPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt conum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursusdiment faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. </div>Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
<div class="right">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. <div id="r">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
</div>
Also since you said you were loading your text dynamically from a data-base here is an easy way to calculate it's length and break it into two equal chunks.
<?php
//some SQL Queries setting $str
$len = strlen($str);
$part1 = substr($str, $len/2);
$part2 = substr($str, $len/2+1,$len);
// Insert $part1 & $part2 text chunks into each div.
?>
NOTE: Due to the exact cut, if that character number is in the middle of a word that word will be cut into two parts. There are resources to easily figure out how to cut on the next space; but that does not pertain to this specific question.
For the below XML how to get the value of height or width attribute by giving index.
<root>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non nunc vitae nisl luctus pharetra at eu nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<img src="http://www.google.com/logos/pacman10-hp.png"/> Nullam in odio at ligula euismod adipiscing convallis in justo. Donec at massa nulla, at facilisis magna. Integer sit amet elit eu felis venenatis dignissim. In ut mi leo. Suspendisse blandit faucibus fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ultricies turpis id magna semper vestibulum.
</p>
<p>Quisque blandit pretium libero, venenatis pellentesque purus egestas id. Integer nulla ante, pellentesque eget rhoncus sed, semper vel eros. Nam placerat est et est dictum egestas. Ut gravida blandit lacus rhoncus feugiat. Nunc ut euismod eros. Pellentesque sit amet vehicula mauris. Quisque in nulla quis sapien dictum mattis. Curabitur vehicula lorem ac elit dignissim egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet tincidunt quam.
<img src="http://www.google.com/logos/2010/gabor10-hp.png"/> Ut urna neque, mollis vel tempor placerat, cursus vel enim.
</p>
<p>Praesent gravida dignissim sagittis. Vivamus dictum nisi pulvinar augue vulputate euismod. Vestibulum arcu sapien, laoreet sagittis pulvinar ac, porttitor a tellus.
<img width="100" height="100" src="http://www.google.com/logos/2010/d4g_worldcup10_ko-hp.jpg"/> Quisque cursus dignissim libero in convallis. Fusce cursus nisi ut felis feugiat sodales. Praesent nec arcu purus. Donec lorem lectus, tristique eget faucibus sit amet, bibendum nec ipsum. Mauris tempus laoreet tortor non egestas. Aliquam erat volutpat. Aliquam erat volutpat. Phasellus a arcu convallis nibh luctus tempor non quis sem.
<img src="http://www.google.com/logos/2010/d4g_worldcup10_uk-hp.jpg"/> Aliquam ac risus velit, ut sodales justo. Ut eget lacus eget nisi hendrerit gravida quis et nibh. Etiam purus felis, fermentum a cursus at, congue vel eros. Aenean semper, sapien eget eleifend fermentum, odio sem tempor dolor, sed porta ligula nunc ac tellus.
</p>
<p>Mauris volutpat nisi vitae sem imperdiet sed ultricies est dictum. Mauris id urna turpis, sit amet rhoncus lectus. Maecenas vitae mi at nulla mattis congue id blandit purus.
<img src="http://www.google.com/logos/2010/d4g_worldcup10_nl-hp.jpg"/> Maecenas hendrerit, dui eget faucibus pretium, tellus augue pellentesque metus, id molestie diam arcu ac nibh. Suspendisse sollicitudin viverra blandit. Maecenas sed tellus quis purus bibendum eleifend. Nunc sodales magna id nulla tristique et suscipit purus interdum. Ut at risus quam, nec rutrum risus. Integer ac leo lorem, eget porta nisi. Sed quis lacus dapibus massa commodo ornare. Mauris scelerisque rutrum accumsan. Duis fermentum adipiscing mi eget suscipit. Duis quis nisi libero, iaculis fermentum purus. Etiam risus nibh, tincidunt pellentesque luctus sed, gravida vitae magna.
<img src="http://www.google.com/logos/2010/d4g_worldcup10_au-hp.jpg"/> Sed laoreet, erat id rutrum dignissim, elit libero fermentum enim, pretium auctor lectus urna vitae nulla. Nullam ante diam, elementum nec elementum quis, consectetur eget arcu.
</p>
<p>Fusce eu nisl risus. Fusce rhoncus iaculis viverra. Curabitur eleifend, nisl sed aliquam dapibus, urna leo scelerisque orci, id commodo dui libero vitae nisi.</p>
<img WIDTH="100" HEIGHT="100" src="http://www.google.com/logos/2010/d4g_worldcup10_nl-hp.jpg"/>
</root>
i tried with
//img[1]/#width
but not working. Basically i need a XPATH for to get height or width of an img tag irrespective of case(WIDTH or width) and if the width attribute is not available it should return no match or null
Use:
(//img)[$k]/#*[name() = 'width' or name() = 'WIDTH']
Where you need to replace $k ith the desired image index.
This selects the attribute named "width" or named "WIDTH" of the $k-th img element in the XML document.
For example, for the 3rd image use:
(//img)[3]/#*[name() = 'width' or name() = 'WIDTH']