I'm creating a single post per page tumblr template with the body content as the link to the next page - you can see a quick test working here:
There are 4 entries but the 4th doesn't render, probably because there is no 'NextPage'. Any idea how I might get around that to render the last page? or if it is has to be blank how to render a bit of static text.
{block:Text}
<div class="content">
{block:Pagination}
{block:NextPage}
{Body}
{/block:NextPage}
{/block:Pagination}
</div>
{/block:Text}
How about
{block:Text}
<div class="content">
{block:Pagination}
{block:NextPage}
<a href="{NextPage}">
{/block:NextPage}
{/block:Pagination}
{Body}
{block:Pagination}
{block:NextPage}
</a>
{/block:NextPage}
{/block:Pagination}
</div>
{/block:Text}
This way the {Body} should always render, and the link only if there is a next page!
Related
There is a search input box to take a string in the frontend. Also there is SQL in the controller to fetch the result based on the search text. I get the expected result from the query.
I want to show those result in the frontend with pagination. In this case i have used following code
<f:widget.paginate objects="{isin}" as="paginatedIsinDocuments" configuration="{itemsPerPage: 5, insertAbove: 0, insertBelow: 1, maximumNumberOfLinks: 100, addQueryStringMethod: 'GET,POST'}">
<div class="row mb-4">
<f:for each="{paginatedIsinDocuments}" as="document">
<div class="col-12 fs-highlighted">
<a class="px-3 px-md-5 py-2" href="{document.file.originalResource.publicUrl}" target="_blank">
{document.file.originalResource.originalFile.name}
<i class="icon-download"></i>
</a>
</div>
</f:for>
</div>
</f:widget.paginate>
Unfortunately its not working. It shows all the rows in the page 1.
Well in general you should migrate that to the Pagination-API.
The Fluid pagination widget is deprecated and removed in V11 anyway.
Here is a nice article how to migrate.
In Kentico, I am trying to put an image and an h3 tag inside an a tag in an Editable Text web part, but Kentico rewrites the code and splits the a tags, making 2 a tags, one around the image and one around the h3. How would I get this to stop?
Here is what I am trying to write:
<div class="brick">
<a href="/virtualvalley/studentresources.aspx">
<img alt="" class="img-responsive" src="/Virtual-Valley/document-library-(1)/images/default.jpg" />
<h3>Student Resources</h3>
</a>
</div>
And here is what Kentico rewrites it as:
<div class="brick">
<a href="/virtualvalley/studentresources.aspx">
<img alt="" class="img-responsive" src="/Virtual-Valley/document-library-(1)/images/default.jpg" />
</a>
<h3>
Student Resources
</h3>
</div>
Hi I'm trying to the text inside the span, the one with "Text to get"
I'm getting the div with class="membership-limit-section capture-area" using cheerio and node.js, but I can't get the text from the span.
I have this function to get the div and I can see that it does have more elements inside, but I can«t get the text
url = "URLdata";
rp(url)
.then(function (html) {
var getHtml = $("div[class='membership-limit-section capture-area']", html);
console.log(getHtml);
})
.catch(function (err) {
console.log(err);
});
<body data-n-head>
<div id="_nuxt">
<div id="__layout">
<div class="app-wrapper purge-css-ignore">
<div class="main-container">
<section class="el-container">
<main
class="el-main auto-height-on-print capture-area"
id="components-root"
>
<div data-v-5cc60f9e>
<div data-v-5cc60f9e class="responsive-section">
<div
data-v-7ce2662e
data-v-5cc60f9e
class="membership-limit-section capture-area"
>
<div data-v-5cc60f9e class="dividends">
<div>
<div
data-v-593f497d
class="el-card capture-area is-always-shadow"
>
<h1 data-v-593f497d>Test</h1>
<div
role="alert"
class="el-alert el-alert--warning is-light"
data-v-593f497d
>
<div class="el-alert__content">
<span class="el-alert__title">Text to get</span>
<i
class="el-alert__closebtn el-icon-close"
style="display: none;"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</section>
</div>
</div>
</div>
</div>
</body>
Can someone help on how to get the text from the span?
Thanks
The following selector will do for that specific response: .membership-limit-section.capture-area .el-alert__title
Then you can use .text() to obtain the text of the span.
var getHtml = $(
".membership-limit-section.capture-area .el-alert__title",
html
);
console.log(getHtml.text())
Update:
gurufocus.com/stock/KO/dividend I want the "Continuous dividend
increase since 1963" but I cannot get it. I'm able to parse info from
yahoo using cheerio, but not from this website
The content you want to scrape, is loaded on the client side using XHR. So you won't be able to parse it directly using request & cheerio since that part is not being returned, either you hit the endpoint returning that data directly, or you use puppeteer on the main site.
When scraping with requests and cheerio, always log the content and see if what you want to parse is present.
The following selector will do for that specific response: const a=$('div.membership-limit-section capture-area').innerText Then just use a variable it has text of span tag.
Im using NodeJS with React and I have a problem. I didnt find a npm module or a code that allowed me to create a pagination for a list of results.
I have a variable called "jobs", that contains a list of job ads.
In my render function I call:
{this.state.jobs.map(this.renderClass)}
that map every job with a function.
This function is renderClass, that contains the render of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
In this way I have a huge list of jobs, but I would a paging.
How can I do this?
Thanks
I would save the page in a state,
and do something like that (say each page has 10 jobs ) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
I suggest your need to build a component for handling pagination. Some thing like that:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
I found the best component handling it, react-pagination-custom.
It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.
How can I make a layout shown in this image
I could have done it easily with grid system but I want the first post's description off the grid system or below the both column. However, for mobile devices I want it to appear with the image or in the same grid like the image below
I don't expect you can do this with Bootstrap's CSS only cause the order of your elements change from desktop to mobile.
Try this html:
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12" style="background-color:red;">1</div>
<div class="rightblock col-md-6 col-xs-12">
<div class="row">
<div class="col-xs-12" style="background-color:lightgreen;">3</div>
<div class="col-xs-12" style="background-color:lightyellow;">4</div>
</div>
</div>
<div class="clearfix visible-md visible-lg"></div>
<div class="col-md-12 col-xs-12 lefttext" style="background-color:lightblue;">2</div>
</div>
</div>
Where 2 = the caption of your first item (1) and 3 and 4 are your second and third item.
For the mobile version use javascript to swap 2 (.lefttext) and the 3/4 block (.rightblock):
$(window).resize(function () {
if ($(window).width() < 992) {
$(".rightblock").insertAfter($(".lefttext"));
}
});
Demo: http://bootply.com/94560
Note 1: $(window).resize only will called on a real resize (from big to small) and not when opening the small screen direct. See here for better solution to react on screen size changes: How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?
Note 2: see http://getbootstrap.com/css/#grid-responsive-resets for explanation of the clearfix