Scrape paragraph with href inside - xpath

This is the html:
<p class="myParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel justo
<a href="http://google.it" class="small-link" target="_blank">
<span class="tco-ellipsis"></span>
<span class="invisible">https://</span>
<span class="js-display-url">google.it</span>
<span class="invisible">lpage/events/?ref=page_internal&mt_nav=0&locale2=it_IT</span>
<span class="tco-ellipsis">
<span class="invisible"> </span>…
</span>
</a> ornare, suscipit nisl eget, aliquam augue. Aenean quis pretium
</p>
If i use tree.xpath('//p/text()') it only returns me
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel justo
instead of
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel justo ornare, suscipit nisl eget, aliquam augue. Aenean quis pretium
I also tried tree.xpath('string(//p)') here
How can i take both complete paragraph and href? Not every time there's a a element inside paragraph

xpath('//p/text()') returns a list of strings. Join these strings to get the wanted result.
from lxml import html
doc = """<p class="myParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel justo
<a href="http://google.it" class="small-link" target="_blank">
<span class="tco-ellipsis"></span>
<span class="invisible">https://</span>
<span class="js-display-url">google.it</span>
<span class="invisible">lpage/events/?ref=page_internal&mt_nav=0&locale2=it_IT</span>
<span class="tco-ellipsis">
<span class="invisible"> </span>…
</span>
</a> ornare, suscipit nisl eget, aliquam augue. Aenean quis pretium
</p>"""
root = html.fromstring(doc)
print("".join([t for t in root.xpath("//p/text()")]))

Related

Add title to readmore button in tagged articles using joomla

I'm new to joomla and I have a problem in adding title of articles in read more button using TAG ITEMS.
I have two articles like this:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis elit augue. Aliquam mattis sem sed ligula mattis faucibus. Donec vitae pretium sem. Vivamus ipsum enim...
Read More
Dolor Sit amet
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas purus ex, ultrices eget ante ac, tempor suscipit nunc. Etiam viverra dolor id...
Read More
=========================================================================
What i want to do is add the title of each article to the readmore button, so it would look like this:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis elit augue. Aliquam mattis sem sed ligula mattis faucibus. Donec vitae pretium sem. Vivamus ipsum enim...
Read More: Lorem Ipsum
Dolor sit amet
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas purus ex, ultrices eget ante ac, tempor suscipit nunc. Etiam viverra dolor id...
Read More: Dolor sit amet
Can anyone help me with this problem?
Thanks!
In Content -> Articles -> Options, set "Show Title with Read More" = "Show".

DOMPDF issue with margin on div

I have issue with margin on dompdf using plain html. I have added margin-top to div but adds some extra space at the the end of element.
It works perfectly if no margin-top is added. As shown in following screenshot
As I add margin-top to div it adds extra spacing at the end of that div as shown in following screenshots. HTML is perfect but issue in generated pdf only.
HTML 1:
PDF 1:
HTML 2:
PDF 2:
I searched a lot for the issue but cannot find any solution regarding this why it adds space after the element when I use margin-top:15px; I tried margin: 15px 0 0 0; but no luck with that too.
I am using latest version of dompdf
HTML Code snippest:
*{margin:0; padding:0}
body { padding: 50px 0; margin: 0px; font-family: Georgia; }
ul{padding-left:40px; }
.resume-container {width: 90%;margin:0 auto;background-color: #fff;}
.reasume-header{width: 100%; border-bottom: 1px solid #DADADA}
.reasume-header .head{font-weight: bold;font-size: 28px;}
.small-font {font-size: 12px;}
.header{margin-top:15px; margin-bottom:0;}
h1{font-size: 20px; font-weight: bold; margin: 0px;}
.content{margin-top: 15px}
#template1 .header .title-header h1{background: #769AC2; color: #FFF; padding: 5px 0; text-align:center}
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"><title>Resume</title><style type="text/css">
</style>
</head>
<body>
<div class="resume-container" id="template1">
<div class="header w100 temp6-hidden" border="0" id="expertise_part" style="clear:both;">
<div class="w100 align-top title-header">
<h1>EXPERTISE</h1>
</div>
<div class="inner-content" style="clear:both;">
<div class="content details" style="background: #F0F0F0">
<ul>
<li>Wide range of design experience building mobile sites to E-Commerce front end sites.</li>
<li>Expert in Joomla and WordPress Customization.</li>
<li>Highly proficient in Photoshop, Illustrator, HTML5 and XSLT.</li>
<li>Experienced with social media marketing and search engine optimization.</li>
<li>Highly skilled in layout designs for print in InDesign and custom logotypes.</li>
</ul>
</div>
<div class="content details">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque. Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque. Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.Duis volutpat tincidunt laoreet. Nullam congue, metus vitae dapibus varius, ipsum turpis sollicitudin sapien, ut faucibus tellus erat id magna. Nunc consectetur dolor vel molestie lobortis. Proin volutpat commodo metus, non luctus turpis pulvinar et. Aliquam erat volutpat. Etiam consequat imperdiet ligula. Quisque finibus, nibh sit amet posuere maximus, diam dolor volutpat lacus, ut luctus enim dolor sed urna. Donec nec enim ut risus cursus tincidunt ut et libero.
</div>
</div>
</div>
<div class="header w100 temp6-hidden" border="0" id="education_part">
<div class="w100 align-top title-header">
<h1>EDUCATION</h1>
</div>
<div class="inner-content">
<div class="w100 content " style="background: #F0F0F0">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="lft" style="width:60%">
<strong class="dt_area">ABC University</strong>
</td>
<td align="right" style="width:40%;"><strong class="dt_area">INDIA, Kerala</strong></td>
</tr>
<tr>
<td class="lft" style="width:60%"><strong class="dt_area">MCA</strong></td>
<td align="right" style="width:40%;"><strong class="dt_area"><strong class="dt_area">2/2001 - 3/2004</strong></strong></td>
</tr>
</table>
</div>
<div class="content details" style="width:100%;clear:both;font-size: 14px; font-family:Arial;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque.<br />
Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque.<br />
Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.
</div>
</div>
</div>
</div>
</body>
</html>

My bootstrap image keeps cutting into my paragraph in mobile

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;
}
}

bootstrap website images not showing on mobile

Any reason for images not showing on mobile phones when using Bootstrap 3? (in the browser everything looks fine).
This is the temporary url: www.alweso.2ap.pl
None of the images on my website is visible on mobile, here's a piece of example code:
<div class="full">
<div id="page-2" class="container">
<div class="row flower-row">
<div class="col-md-6"><img src="images/stones.jpg" class="img-responsive" alt="flower"> </div>
<div class="col-md-6"><h1>Blablabla</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. Maecenas at bibendum nunc</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
</ul>
</div>
<div class="clearfix visible-md"></div>
</div>
</div>
</div>

Saving data with CreatePHP in Laravel 4

I'm trying to implement https://github.com/flack/createphp with Laravel 4.
I have have a view which outputs some data from the database:
<div class="row editable content" property="sioc:content" data-placeholder="Enter some content..." contenteditable="true" data-medium-element="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper bibendum tellus at commodo. Nam fermentum odio posuere nulla gravida, quis placerat augue sodales. Vivamus sagittis, ligula eget eleifend congue, nibh erat fermentum neque, a consectetur dui libero imperdiet elit.
I am not sure how to use https://github.com/flack/createphp with Laravel to then save the data once the orgional data has been updated. Like in http://createjs.org/demo/hallo/
I have added midgard/createphp": "0.9.*#dev in composer.json
Can anybody point me in the right direction?
Cheers,
Chris

Resources