I'm going to standardize some picture galleries at some non-public wiki using pure templates. The legacy wiki picture/thumbnail galleries are specified with a lot of boilerplate code (it renders a gallery of pictures with thumbnails underneath):
<center>
<gallery widths="120px" heights="170px" perrow="5">
Image:Pic1.jpg|<center>1</center>
Image:Pic2.jpg|<center>2</center>
Image:Pic3.jpg|<center>3</center>
Image:Pic4.jpg|<center>4</center>
Image:Pic5.jpg|<center>5</center>
Image:Pic6.jpg|<center>6</center>
Image:Pic7.jpg|<center>7</center>
</gallery>
</center>
This is scary. There is an idea of re-implementing the above code with the following template:
{{Photos
| Picture1.jpg = 1
| Picture2.jpg = 2
| Picture3.jpg = 3
| Picture4.jpg = 4
| Picture5.jpg = 5
| Picture6.jpg = 6
| Picture7.jpg = 7
|}}
The template is mostly as follows:
... var definitions, etc ...
<center>
{{#tag:gallery
| {{#forargs: | K | V |
Image:{{#var: K}} {{!}} <center>'' {{#var: V}} ''</center>
}}
| widths = {{#var:WIDTHS}}
| heights = {{#var:HEIGHTS}}
| perrow = {{#var:PERROW}}
}}
</center>
But the problem is that only the first image is rendered, and the whole rest Picture 2... Picture 7 is rendered under the first image thumbnail. And I suspect that the reason possibly is a missing new line character so the gallery tag may be rendered like this producing wrong 1-picture gallery:
<gallery widths="120px" heights="170px" perrow="5">
Image:Pic1.jpg|<center>1</center>Image:Pic2.jpg|<center>2</center>Image:Pic3.jpg|<center>3</center>...
It's only an assumption, but I guess it may have strong background. So the question is:
is there any way of forcing a new line break so the <gallery> tag could be rendered as expected?
You can force a newline by adding <nowiki />like this:
{{#tag:gallery
| {{#forargs: | K | V |<nowiki />
Image:{{#var: K}} {{!}} <center>'' {{#var: V}} ''</center>
}}
| widths = {{#var:WIDTHS}}
| heights = {{#var:HEIGHTS}}
| perrow = {{#var:PERROW}}
}}
Related
#views.py
.
.
.
detailedStatement = {
'selectedOption1' : '90 degrees',
'correctAnswer1' : '180 degrees',
'selectedOption2' : 'angle',
'correctAnswer2' : 'side'
}
#Above dictionary contains 200 elements
diction = {
'detailedStatement' : detailedStatement
}
return render(request, "result.html", diction);
So while on an html file I wanted to access the dictionary's every element via a loop. Like every element should be listed in the html table row like following.
| Sr | Selected Option | Correct Answer |
| 1 | 90 degrees | 180 degrees |
| 2 | angle | side |
Above table is just a representation of html table not an actual table.
But the issue I am facing is... I am not able to access its index in a dynamic way.
I wrote a for loop in Django html template but
{% for dr in detailedResult.items %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{dr.option.forloop.counter}}</td>
<td>{{dr.answer.forloop.counter}}</td>
</tr>
{% endfor %}
I want my code to automatically put 1 after option and answer like option1, answer1;
How can we do this?
I think you should model this with a list instead of including an index in your variable names, e.g.
# views.py
detailed_statements = [{'option': '90 degrees', 'answer': '180 degrees'}, ... ] # contains 200 elements
Then in your template
{% for dr in detailed_statements %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{dr.option}}</td>
<td>{{dr.answer}}</td>
</tr>
{% endfor %}
I was a bit confused by the nested for loops in your template code - I think you only need one?
in selenium how do I correctly write an xpath or css_selector that would
parse html such as
<div class="fxg-rte " style="color:;" data-emptytext="Rich Text">
<p>United States | English
| Español</p>
<p>China | English
| 简体中文</p>
<p>Mexico | English
| Español</p>
<p>India | English</p>
<p>Canada | English
| Français</p>
</div>
to do the following:
Find any <p> element that contains the text "United States"
then within the element find any link_text that has "English"
then click that link.
So specifically I want to look at link_text only within tags that meet a
given criteria.
try the below xpath :
//div[#data-emptytext='Rich Text']//p
there will be serveral p tags, you may have to use find_elements instead of find_element.
in code something like this :
driver.maximize_window()
driver.get("https://www.fedex.com/global/choose-location.html")
wait = WebDriverWait(driver, 10)
for names in driver.find_elements(By.XPATH, "(//div[contains(#class, 'richtext parbase section')])[1]/descendant::p"):
print(names.get_attribute('innerHTML'))
if "United States" in names.get_attribute('innerHTML'):
print("matched")
lang_href = names.find_element(By.XPATH, "((//div[contains(#class, 'richtext parbase section')])[1]/descendant::p/a[1])[1]")
lang_href.click()
break
I'm using the MediaWiki extension DynamicPageList (third-party) which can be used as a template:
{{#dpl:
|category=foo
|notcategory=bar
}}
I try to use this template in one of my templates which uses more parameter e.g.:
{{myTemplate
|category=foo
|notcategory=bar
|mypara1=bla
|mypara2=lala
}}
myTemplate looks like this:
do something with mypara1
...
do something with mypara2
...
{{#dpl:
|category=foo
|notcategory=bar
}}
I know my parameters but #dpl: can use one or many parameters.
How can I separate my parameters from the #dpl: ones? And how can I just hand over the parameters which belongs to #dpl:?
Thanks,
Ray
Finally I came up with the following solution:
DPL has an additional template #dplreplace. I'm using this to parse my parameters.
Call the template:
{{myTemplate
| filter=category:foo;notcategory:bar
| mypara1=bla
| mypara2=lala
}}
In the template I replace the : by = and ; by {{!}}.
{{#dpl:
| {{#dplreplace: {{#dplreplace: {{{filter}}} | /:/ | = }} | /;/ | {{!}} }}
| ordermethod = sortkey
| suppresserrors = true
}}
NOTE: {{!}} is a template which is replaced by |.
Regards;
Ray
Maybe I'm misunderstanding your issue, but you can just pass the parameters on to DPL, just like you would to a template, or another parser function. You might want to add an empty default in most cases:
myTemplate:
do something with {{{mypara1}}}
do something with {{{mypara2}}}
{{#dpl:
|category = {{{category|}}} <!-- default to empty string -->
|notcategory = {{{notcategory|}}} <!-- default to empty string -->
}}
Call it like this:
{{myTemplate
|category=foo
|notcategory=bar
|mypara1=bla
|mypara2=lala
}}
Will work with missing parameters too:
{{myTemplate
|category=foo
|mypara1=bla
|mypara2=lala
}}
In an app I am maintaining, I am implementing less (the styling language) changes for iPad form factors. I've already got media queries set up to handle this, but I have a slight problem with getting my markup to behave!
Currently, in our 'normal' form factor, we have a 3-column layout:
*---*-----*---*
| A | B | C |
*---*-----*---*
<div class="lft-side-panel">
A
</div>
<div class="ctr-panel">
B
</div>
<div class="rt-side-panel">
C
</div>
.lft-side-panel {
.span4(); // 4/16 slots wide
margin-left: 0;
left: 0;
}
.ctr-panel {
.span8();
}
.rt-panel {
.span4();
}
However, due to size constraints on these smaller form factors, I am trying for a 2-column setup as such:
*---*---------*
| A | |
*---* B |
| C | |
*---*---------*
<div class="lft-side-panel">
A
</div>
<div class="ctr-panel">
B
</div>
<div class="rt-side-panel">
C
</div>
/* These appear to be where the solution lies, at least as far as Less is concerned. */
.lft-side-panel,
.rt-side-panel {
left: 0;
margin-left: 0;
.span4();
}
.ctr-panel {
span12();
}
I've tried
specifying a top and left attribute with value 0 for the C div,
specifying float: left in the media query for the rt-side-pnl class
...but it leaves me with a layout like:
*---*-----*
| A | |
*---| B |
| |
*---*-----*
| C |
*---*
Question: What am I missing to achieve a 2-column layout with A and C on top of each other, and B off to the side? I have a feeling the solution is right under my nose, but I'm just not seeing it. If possible, I must preserve the structure of the markup; if I must re-order things slightly, that can work too.
Check out this fiddle http://jsfiddle.net/s756e/3/
I set .rt-side-panel, .lft-side-panel { float:left; width=25%;} (needed to convert your 4 of 16 bootstrap to percent and added some demo colors and heights) and set .ctr-panel {float:right; width=75%;}
This seems to be, what you are looking for. Right!?
I have this markup:
<div class="wrapper">
<article>A</article>
<article>B</article>
<article>C</article>
<article>D</article>
<article>E</article>
<article>F</article>
<article>G</article>
<article>H</article>
</div>
which is floated and forms a two-column list. Each article has a variable height due to its contents.
What I want is each pair should have the same height based on which of the two has the tallest height. I have found variations of equalHeights plugin but all of them force equal heights to all elements. I just need each pair to be the same height, not all elements. Is this possible or are there any existing plugin for this?
Note: Can't change the article markup because it's outputted by the CMS.
My expected output:
|-------|---------|
| A | B |
|-------|---------|
| | |
| C | D |
| | |
| | |
| | |
|-------|---------|
| | |
| E | F |
| | |
|-------|---------|
Here is a little bit of code that will set the height to the max height, splitting a block of articles by a column count, rather than any other structural method.
Demo: http://jsfiddle.net/bgWaw/
var articles = $('.wrapper article');
var columns = 2;
var cIndex = 0;
while (cIndex < articles.size()) {
var cMaxHeight = 0;
for (cColumn = 0; cColumn < columns; cColumn++) {
var cArticle = articles.eq(cIndex + cColumn);
if (cArticle.size() > 0) {
cMaxHeight = (cArticle.height() > cMaxHeight ? cArticle.height() : cMaxHeight);
}
}
articles.slice(cIndex, cIndex + columns).height(cMaxHeight);
cIndex += columns;
}
This could easily be turned in to a plugin if needed. Just a matter of making it a function in the $.fn object and using this rather than articles and passing in columns as a parameter to the function.
jQuery Plugin Version Demo: http://jsfiddle.net/bgWaw/2/
$.fn.maxSliceHeight = function(columns) {
var cIndex = 0;
while (cIndex < this.size()) {
var cMaxHeight = 0;
for (cColumn = 0; cColumn < columns; cColumn++) {
var cElem = this.eq(cIndex + cColumn);
if (cElem.size() > 0) {
cMaxHeight = (cElem.height() > cMaxHeight ? cElem.height() : cMaxHeight);
}
}
this.slice(cIndex, cIndex + columns).height(cMaxHeight);
cIndex += columns;
}
return this;
}
Example call:
$('.wrapper article').maxSliceHeight(2);
Contrary to my comment here is another method you can use:
Turn that markup into rows:
<div class="row">
<article>A</article>
<article>B</article>
</div>
<div class="row">
<article>C</article>
<article>D</article>
</div>
<div class="row">
<article>E</article>
<article>F</article>
</div>
Float the <article> elements again, but make sure each .row div has clear: both in the CSS.
That way every "row" will be the same height has the tallest content within it.
Separating by divs is a good solution if you really want always two columns, but I assume that you might want to change to three columns if the browser is wide enough. Have you looked at isotope? http://isotope.metafizzy.co/
I have found a solution for this without changing the markup: http://css-tricks.com/equal-height-blocks-in-rows/