Reverse order of html with awk via line swapping - bash

Basically every week I have to reverse the following snippet
<!-- Homepage Slider Begin -->
<div class="container-fluid">
<div class="single-item-home hidden-xs">
<div class="slide slide--has-caption">
<a href="/1">
<img src="/sliders/1_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/2">
<img src="/sliders/2_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/3">
<img src="/sliders/3_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/4">
<img src="/sliders/4_example.jpg">
</a>
</div>
</div>
</div>
<!-- Homepage Slider End -->
Basically I'm wanting to make awk script and have a cron job to essentially take lines 4-8 to swap with lines 22-26 and lines 10-14 swap with lines 16-20 however I can only seem to find a way to swap one line and not line blocks.
Is this even possible with awk or just silly?

You may use awk . Below script
awk 'NR==FNR{line[i++]=$0}
END{
for(j=0;j<i;j++){
if(j>=3 && j<=7){
print line[j+18];
continue;
}
else if(j>=21 && j<=25){
print line[j-18];
continue;
}
else if(j>=9 && j<=13){
print line[j+6];
continue;
}
else if(j>=15 && j<=19){
print line[j-6];
continue;
}
print line[j];
}
}' file
will do what you want.
Sample Output
<!-- Homepage Slider Begin -->
<div class="container-fluid">
<div class="single-item-home hidden-xs">
<div class="slide slide--has-caption">
<a href="/4">
<img src="/sliders/4_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/3">
<img src="/sliders/3_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/2">
<img src="/sliders/2_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/1">
<img src="/sliders/1_example.jpg">
</a>
</div>
</div>
</div>
<!-- Homepage Slider End -->
Note: I leave the array-bounds check up to you. If the content of the file is static, you may not need this

This doesn't care how many lines are in each block or where they start/end in the file and it doesn't require you to store the whole file in memory (though most of the file is the "slides" which DO need to be stored so that's probably a non-issue):
$ cat tst.awk
/<div class="slide/ { inSlide=1; slide="" }
inSlide {
slide = slide $0 ORS
if ( /<\/div>/ ) {
slides[++numSlides] = slide
inSlide = 0
}
next
}
/<\/div>/ {
for (slideNr=numSlides; slideNr>=1; slideNr--) {
printf "%s", slides[slideNr]
}
numSlides = 0
}
NF
.
$ awk -f tst.awk file
<!-- Homepage Slider Begin -->
<div class="container-fluid">
<div class="single-item-home hidden-xs">
<div class="slide slide--has-caption">
<a href="/4">
<img src="/sliders/4_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/3">
<img src="/sliders/3_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/2">
<img src="/sliders/2_example.jpg">
</a>
</div>
<div class="slide slide--has-caption">
<a href="/1">
<img src="/sliders/1_example.jpg">
</a>
</div>
</div>
</div>
<!-- Homepage Slider End -->

perl -e '#f=<>; print #f[0..2,21..25,8,15..19,14,9..13,20,3..7,26..$#f]' ip.html
-e option to pass Perl code from command line itself
#f=<> Reads the contents of file (passed as command line argument) into an array
and then print as per order required (index starts from 0, $#f gives last index of array #f)

This is a solution, where you define an order where to print in the BEGIN section and in that order it will print:
$ cat > preordered.awk
BEGIN {
split("1,2,3,22,23,24,25,26,9,16,17,18,19,20,15,10,11,12,13,14,21,4,5,6,7,8",a,",")
}
{
b[(NR in a?a[NR]:NR)]=$0
}
END {
PROCINFO["sorted_in"]="#ind_num_asc"
for(i in b)
print b[i]
}
Give it a go:
$ awk -f preordered.awk' file
<!-- Homepage Slider Begin -->
<div class="container-fluid">
<div class="single-item-home hidden-xs">
<div class="slide slide--has-caption">
<a href="/4">
<img src="/sliders/4_example.jpg">
</a>
</div>
...

Related

Match tag inside tag using bash

I have this html
<article class="article column large-12 small-12 article--nyheter">
<a class="article__link" href="/nyheter/14343208/">
<div class="article__content">
<h2 class="article__title t54 tm24">Person har falt ned bratt terreng - luftambulanse er på vei</h2>
</div>
</a>
</article>
<article class="article column large-6 small-6 article--nyheter">
<a class="article__link" href="/nyheter/14341466/">
<figure class="image image__responsive" style="padding-bottom:42.075%;">
<img class="image__img lazyload" itemprop="image" title="" alt="" src="data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7" />
</figure>
<div class="article__content">
<h2 class="article__title t34 tm24">Vil styrke innsatsen mot vold i nære relasjoner</h2>
</div>
</a>
</article>
The thing is that I want to get only those html tags, in this case article tags, which has a child img tag inside them.
I have this sed command
sed -n '/<article class.*article--nyheter/,/<\/article>/p' onlyArticlesWithOutSpace.html > test.html
Now what I am trying ti achieve is to get only those article tags which has img tag inside them.
Output I want would be this
<article class="article column large-6 small-6 article--nyheter">
<a class="article__link" href="/nyheter/14341466/">
<figure class="image image__responsive" style="padding-bottom:42.075%;">
<img class="image__img lazyload" itemprop="image" title="" alt="" src="data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7" />
I cannot use any xml/html parser. Just looking to use sed, grep, awk etc.
</figure>
<div class="article__content">
<h2 class="article__title t34 tm24">Vil styrke innsatsen mot vold i nære relasjoner</h2>
</div>
</a>
</article>
Care: parsing XML using sed is a wrong good idea!
Thanks to Cyrus's comment for pointing to good reference.
Anyway, U could try this:
sed -ne '/<article/{ :a; N; /<\/article/ ! ba ; /<img/p ; }'

Smarty alternate view elements in foreach loop

I am trying to figure out a way to cycle through the inner loop view items in the following manner:
First:
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
Second:
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
and so on... so the presentation is content/image, image/content, content/image .etc.
This is the main code:
<div class="container">
{if count($row_services) == 0}
No services published.
{else}
{assign var=i value=0}
{foreach from=$row_services item=row}
<div class="row scroll-animated-from-bottom {if $i > 0}padding-top-50{/if}" id="service-data-1">
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
</div>
{capture assign=i}{$i+1}{/capture}
{/foreach}
{/if}
</div>
I know how to accomplish this is php, but I'm unsure how to do it in smarty. I'm trying to avoid having any child views.
This is the best I could come up with. If anyone has a more elegant solution, feel free to share:
<div class="container">
{if count($row_services) == 0}
No services published.
{else}
{assign var=i value=0}
{foreach from=$row_services item=row}
<div class="row scroll-animated-from-bottom {if $i > 0}padding-top-50{/if}" id="service-data-1">
{if ($i % 2 == 0)}
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
{else}
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
{/if}
</div>
{capture assign=i}{$i+1}{/capture}
{/foreach}
{/if}
</div>

Laravel loop damaged design

I have default template which is looks like this
when i add my loop it becomes like this
Issue
As you see in second image padding and margins are not as same as default one but html output looks fine
here is the code
<div class="col-md-5 col-xs-12 pad-l">
<div class="row">
#foreach($featuresTwo as $featuret)
#if($loop->first)
<div class="col-sm-12">
<div class="post-overaly-style hot-post-top clearfix">
<div class="post-thumb">
<a href="#">
<img class="img-fluid" src="theme/images/news/tech/gadget2.jpg" alt="" />
</a>
</div>
<div class="post-content">
<a class="post-cat" href="#">
#foreach($featuret->categories as $categoryt)
{{ $loop->first ? ' ' : ', ' }}
{{$categoryt->title}}
#endforeach
</a>
<h2 class="post-title title-large">
{{$featuret->title}}
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
#else
<div class="col-sm-6 pad-r-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="theme/images/news/lifestyle/travel2.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">
#foreach($featuret->categories as $categoryt)
{{ $loop->first ? ' ' : ', ' }}
{{$categoryt->title}}
#endforeach
</a>
<h2 class="post-title title-medium">
{{$featuret->title}}
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
#endif
#endforeach
</div>
</div><!-- Col 5 end -->
Question
Where did I make mistake? How to fix it?
Thanks.
UPDATE
original html without loop
<div class="col-md-5 col-xs-12 pad-l">
<div class="row">
<div class="col-sm-12">
<div class="post-overaly-style hot-post-top clearfix">
<div class="post-thumb">
<a href="#">
<img class="img-fluid" src="images/news/tech/gadget2.jpg" alt="" />
</a>
</div>
<div class="post-content">
<a class="post-cat" href="#">Gadget</a>
<h2 class="post-title title-large">
Samsung Gear S3 review: A whimper, when smartwatches need a bang
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
<div class="col-sm-6 pad-r-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="images/news/lifestyle/travel2.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">Travel</a>
<h2 class="post-title title-medium">
Early tourists choices to the sea of Maldiv…
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
<div class="col-sm-6 pad-l-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="images/news/lifestyle/health1.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">Health</a>
<h2 class="post-title title-medium">
That wearable on your wrist could soon...
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
</div>
</div><!-- Col 5 end -->
........................................................................................................................
The original code for the two half width columns has one like this:
<div class="col-sm-6 pad-r-small">
And one like this:
<div class="col-sm-6 pad-l-small">
But you've used a loop to create two of the same like this:
<div class="col-sm-6 pad-r-small">
You should probably just key the features in the $featuresTwo array and drop the loops so you can replicate the code accurately.
Solved
Based on wheelmaker answer i got the idea and changed my div after #else to be like
#if($loop->last)
<div class="col-sm-6 pad-l-small">
#else
<div class="col-sm-6 pad-r-small">
#endif
and that solved the style issue.
PS: I'm accepting wheelmaker answer because he made me realized the
issue.

Need to give row class after each row in laravel 5.2

I am trying to display 3 results in each row. 1 result contains image,title and description. If description is a lengthy one, the 4th result in the second row will break. So I need to give after each row. I tried the following code, but didn't work.Thanks in advance.
<div class="row">
#if(count($reports['data']) > 0)
#foreach($reports['data'] as $reportsUser)
<div class="col-md-4 wow">
<article class="post post-2 post-2_mod-c clearfix">
<div class="entry-media">
#if($reportsUser['image'])
<img src="{{ asset(App\Http\Controllers\Controller::getThumbPath($reportsUser['image'])) }}"
alt="Foto" class="img-responsive" style="width:360px;height:192px;"/>
#else
<img src="{{asset('images/no_image.jpg')}}" alt="Foto" class="img-responsive"/>
#endif
</div>
<div class="entry-main">
<div class="entry-header">
<h2 class="entry-title ">{{$reportsUser['title']}}</h2>
</div>
<div class="entry-content">
<p>{!! str_limit($reportsUser['description'],127,"....") !!}</p>
</div>
<div class="entry-footer"><a href="{{ url('view-report/'.$reportsUser['id'])}}"
class="btn-link clsComClrRed">Continue Reading</a></div>
</div>
</article>
</div>
#endforeach
#endif
</div>
Change your #foreach statement to:
#foreach($reports['data'] as $i => $reportsUser)
Then, just before your first #endforeach (and after </div>), add:
#if ( $i % 3 == 2 )
<div class="clearfix"></div>
#endif

Class for first element in smarty foreach

I'm trying to add some smarty to my template , to first element i want to give
<div class="item active">
and for next elements
<div class="item">
I tried to do something like this:
{foreach $imageCollection as $image key=slider}
{if $slider < 1}
<div class="item active">
<img class="img-responsive" src="{$image->getPath('1400x469')}" alt="caption1" />
<div class="carousel-caption">
{else}
<div class="item">
<img class="img-responsive" src="{$image->getPath('1400x469')}" alt="caption1" />
<div class="carousel-caption">
{/if}
{/foreach}
It's doesn't work, all elements are displaying with
<div class="item active">
use #first:
{foreach $imageCollection as $image}
<div class="item {if $image#first}active{/if}">
...
{/foreach}
The correct syntax for getting the index key in Smarty is as following:
{foreach from=$imageCollection item=image key=slider}
// Your code
{/foreach}

Resources