I've got a template designed to transclude content into the mainspace from a page in another namespace; it's used to aggregate a large number of pages into a single table. Its basic structure is this:
Template:Paget
<div class="plainlinks">
<span style="font-weight:normal; font-size:85%;">[[{{fullurl:{{{1|}}} {{{2|}}}.{{{3|}}}}} {{{2|}}}]]</span> {{#if: {{{blank|}}} | [No text] | {{{{{1|}}} {{{2|}}}.{{{3|}}}}} }}
</div>
So when you enter {{paget|page:cod.icon. 393 I|100r|jpg}} it transcludes the content of Page:Cod.icon. 393 I 100r.jpg and also labels it with a link back to that page that opens in a new tab. Very simple.
Aggregation pages are often constructed before all of the content exists, and in that case the template produces a redlink in place of the page content. I want to change this behavior so that it simply displays nothing when no page exists.
There are three main solutions, an {{#ifexist}} function, a {{#dpl}} function, and an {{#ifeq}} function comparing the output to a redlink url. All of these are unworkable for various reasons, but mostly because they slow the page loading way down (sometimes we're transcluding thousands of one-paragraph pages).
So I turned to a CSS solution, and created this rule in Mediawiki:Common.css:
.hidden-redlink > a.new,
.hidden-redlink a.new {
display: none;
visibility: hidden;
}
Then I added the class to the template, i.e. <div class="plainlinks hidden-redlink"></div>. This produced no result. I also tried wrapping just the transcluded portion in a <span class="hidden-redlink"></span>, and just adding the class to the aggregation table itself, but those also failed to produce any result. Wrapping it directly in <span style="display:none;"></span> hides the link, but obviously also hides the transcluded content.
I've rejiggered the CSS rules and class assignment every way I can think, but come up empty. Is there some piece of the puzzle I'm missing?
MediaWiki: 1.21.2
PHP: 5.3.10-1ubuntu3.9 (apache2handler)
MySQL: 5.5.29-0ubuntu0.12.04.2
Well, I tried doing something similar, getting a redlinked page through transcluding an uncreated help page by doing {{help:doesn't exist}} inside a div with class="hidden-redlink" and the following CSS worked to hide the red link:
.hidden-redlink a.new {
display:none !important;
}
To be honest with you, I don't quite understand why you are using such a long piece of code to get your transclusions, but yet again I don't recognise that namespace you're getting your code from, so I probably just don't use the software to the level of complexity you're pushing it to. Are there any problems with transcluding using {{namespace:pagename}} (obviously changing the words namespace and pagename to the namespace and page name respectively) instead of your current long piece of code which might be throwing things out of whack?
Related
I ran into a weird problem while modifying a section with a few blocks. Basically, I wanted to add a new block to an already existing section. I've already set up the schema, and this part works as expected. But the problem is, I can not use the block settings inside a < style> or {% style %} tag. But the settings work fine in the HTML lines. Note: section settings work in style tag, just the block setting doesn't.
Example 1 (doesn't work):
<style>
.custom_box {
background: {{block.settings.box_color_from_block}};
}
</style>
Example 2 (works):
<div class="custom_box" style="background: {{block.settings.box_color_from_block}};"> </div>
Example 3(works):
<style>
.custom_box {
background: {{section.settings.box_color_from_section}};
}
</style>
Note: I have a color picker inside the block I am creating with the id "box_color_from_block", and when it wasn't working, I added a color picker in the section with the id "box_color_from_section" to test. And I found the above result.
I searched on google and found a similar StackOverflow post from 2 years ago. There, somebody suggested adding the input in the section instead of the block. Sure enough, it works, but it's not useable for me. I specifically need example 1 to work.
The setup is that I am generating a < div> using a {% for %} loop for every product in a collection. Thus, the method in example 2 becomes unsuitable. And every < div> needs to have a different background color. There'll be like 5/6 color pickers(will vary depending on the collection). Thus, adding them to the section will make the already crowded section even more filled up. Hence, I want to add the color pickers inside the block settings, which is pretty empty.
Thanks a whole bunch in advance for reading through, and I'd be really grateful for an answer. My main issue is, that I'm puzzled by the situation. I don't really know what's happening and why.
I hope someone may be able to enlighten me on the following.
I have some experience with mostly static AMP (Accelerated Mobile Pages) for websites, but am currently working on a fairly complex page layout that pulls in some extra data based on the user's level of authorisation.
Specifically, I'm building an HTML5 description list (<dl>, <dt>, <dd>) that is of varying length depending on the attributes being present (or not) on the entity the page represents. I am then using amp-render to pull in additional dt/dd pairs (or not) from a dynamic API endpoint, depending on the current user's level of authorisation within the application.
Technically this is working completely as expected, but I cannot figure out the correct layout/CSS to render the resulting DOM elements to the page: they're in an AMP-generated div that has a CSS-forced height: 0 so invisble.
My raw page looks something like this:
<amp-render
src="/api/data-source/1234"
credentials="include"
xssi-prefix=")]}\*"
layout="flex-item">
<template type="amp-mustache">
<dl>
<dt>1st item</dt>
<dd>Definition</dd>
<dt>2nd item</dt>
<dd>Definition</dd>
{{#isAuthorised}}
<dt>3rd item</dt>
<dd>
<ul>
{{#array}}
<li>{{name}}</li>
{{/array}}
</ul>
</dd>
{{/isAuthorised}}
</dl>
</template>
</amp-render>
To clarify: the API, JSON, and Mustache template are all working as expected, with the correct HTML returned by the AMP framework.
The problem is that the <dl> is immediately contained by the following:
.i-amphtml-blurry-placeholder, .i-amphtml-fill-content {
display: block;
height: 0;
max-height: 100%;
max-width: 100%;
min-height: 100%;
min-width: 100%;
width: 0;
margin: auto;
}
<div i-amphtml-rendered="true" class="i-amphtml-fill-content" loading="auto" aria-live="polite"> ... </div>
Given that the i-amphtml-* classes are illegal to style with custom CSS, this is where I've come unstuck. No variation of layouts on amp-render, nor other containing elements and CSS, are generating the expected result of the definition list actually being visible on the page.
If I wrap amp-render itself in a div with a specified height then the rendered definition list shows as expected - but there's no way to know what height the dl should be, so this isn't a solution for anything more than sanity checking.
Can anyone help?
Surely this is not impossible to achieve? I understand one of the core aims of AMP is to minimise (if not eliminate) page jump as items render in the browser, but surely returning data of variable length is not an uncommon occurrence and there is a way to do what I'm attempting? Or have I missed something incredibly obvious?
(To pre-empty any questions about other styles: I've also tried stripping out all other CSS from the page and there is no difference in what I've managed to display.)
We had similar problems with amp-list. The same approach may work for amp-render. Separate amp-render and template and link with an ID (see the amp doc for an example). Move render to page bottom (before </body>). Add a minimal height value to render. Set width to auto. When we use this approach for list, the list length will be set to the actual length (as determined by amp runtime). This approach may work for render. Note: you cannot control i-amphtml-* so don't look for override solutions there (and your page may be invalid if you do try to override).
I have an issue with two different objects on a webpage that are using an external CSS and external js to call each of their respective functions.
When only one script (a page peel script) is used, the page peel effect display normal on all pages (www.cxchelp.com). However, when the script is added to a page that has a CSS form script, the peel effect moves from its position and goes to the middle edge of the page in alignment with the CSS form (See: http://www.cxchelp.com/contact_error.html).
I checked both external script and realise that they are both positioned by '#container'
I know that the fact that they are both using the '#container' is causing the positioning problem. But my question is what do I do to prevent this conflict?
This thing has been beating me world without end for a few hours now, and I am kind of fed-up.
This is (part of) the first .js script (for the page peel effect) where the '#container'is mentioned;
$('#container').prepend('<div id="jcornerSmall" style=" position:absolute;width:100px;height:100px;z-index:9999;right:0px;top:0px;">
This is (part of) the CSS script for the contact form, and position that both objects are stuck at;
#container {
margin:0 auto;
background:#fff;
width:580px;
padding:20px 40px;
text-align:left;
}
Any ideas here guys?
Add a class of page-peel-container to main container of every page you want to peel effect. This means the very first <div> on the page!
On the homepage, this would look like:
<body>
<div id="container" class="page-peel-container">
On the contact page, this would look like:
<body>
<div id="containermain" class="page-peel-container">
And so on.
Now, like last time, find the 2 bits in the Javascript where it says $("#container").prepend or $("#containermain").prepend if you haven't changed it back after our first failed attempt. Replace it with $(".page-peel-container").prepend
Let me know if this still doesn't work.
I'm working on a site for one of my in-laws, who insisted on using Joomla so that he could update the content himself in the future. That being said, one of the things that I developed for him was a character generator for a game that he and his brothers created. That is working fine. The issue is that they want a way to print the final sheets off when finished, and to do so without all of the menus, banners, etc. I was told that the simplest way to handle that was to pass ?tmpl=component in the URL to strip everything out, which is also working.
The problem that I am running into is that the CSS in the Joomla template is causing the tables to behave in a way that I cannot figure out how to correct. The page consists of nested tables, with widths defined in terms of % (currently), but it seems that the specifically defined widths are being ignored in favor of the widths hugging the largest cell. To see what I'm talking about:
The trouble page: http://www.basementgames.com/tools/character-generator.html?s=36&tmpl=component
What the page should look like: http://www.basementgames.com/char_gen.php?s=36
This is the exact same code in both places, with the first being inside Joomla, and thus subject to the CSS of the template. I don't know much about CSS, and I'm driving myself crazy trying to figure out what to override to make the first example look like the second. Any thoughts?
You can run this script on the page and it will remove the offending print.css file on page load:
<script>
if (window.location.href.indexOf('/character-generator.html') > 0 &&
window.location.href.indexOf('tmpl=component') > 0) {
(function(){
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
if (links[i].href.indexOf('/print.css') > 0) {
links[i].href = '';
}
}
})();
}
</script>
http://jfcoder.com/test/character-generator.html?tmpl=component
Note, it only runs on the character-generator.html page with a tmpl=component in the query string. It also has to run after the link elements, as well, so it should be inserted into the body tag or at the very bottom of the head tag. Since you have MooTools available, you could also use DOMReady().
I have an HTML report, with each print page contained by a <div class="page">. The page class is defined as
width: 180mm;
height: 250mm;
page-break-after: always;
background-position: centre top;
background-image: url(Images/MainBanner.png);
background-repeat: no-repeat;
padding-top: 30mm;
After making a few changes to my report content, when I call abcPDF to convert the report to PDF, suddenly I'm getting a blank page inserted after every real report page. I don't want to roll back the changes I've just made to remove this problem, so I'm hoping someone may know why the extra pages are being inserted.
I have experienced the same exact problem. the empty page is due to the page-break-after: always; in the CSS. Not just ABCpdf but also the printed will spit out an extra page. So I used the following code to eliminate the last page:
MyDoc.Delete(MyDoc.Page);
This however lead to a different kind of a problem. On development server, which has IE 8 I get an extra blank page and on production where I have IE6, I get no extra blank page. So I have emailed the support team at websupergoo to show me a way to look for a blank page. The idea is to iterate through a pdf and identify all blank pages and delete them using above logic.
And I second Jakkwylde's opinion. Websupergoo folks are extremely helpful and prompt in responding. I had another problem getting ABCpdf to work under 64 bit and had spent almost a day trying to figure it out. They provided me multiple scenarios which I could try out. Their support was right on the money and I got my app up and running in minutes.
protected void RemoveBlankPages(Doc pdf)
{
for (int i = pdf.PageCount; i > 0; i--)
{
pdf.PageNumber = i;
//get the pdf content
string textContent = pdf.GetText("Text");
//delete the page if it is blank
if (string.IsNullOrEmpty(textContent))
pdf.Delete(pdf.Page);
}
}
I've found abcPDF to be strange and unpredictable. That being said, what may be happening is that the combination of the page size and page-break-after may be the culprit. Reduce your page height and/or remove the page break.
One thing worth revisiting is the validity of your HTML markup if you are using the AddImageUrl method. Instances where the rendered PDF is not as expected can result from bad markup, busted tags, etc.
For what it's worth, WebSuperGoo has excellent support and respond great when you encounter anomalies. Often they can advise a work around or provide alternatives to your implementation if you send them your source code.
Kush is correct in that "I have experienced the same exact problem. the empty page is due to the page-break-after: always; in the CSS. Not just ABCpdf but also the printed will spit out an extra page."
If a div has "page-break-after:always" IE will literally always start a new page, and if nothing is added it will just print blank. Firefox does not.
abcpdf uses IE8s rendering engine, and as such makes a blank page. For purposes of the OP, just using an explicit height should solve the problem, and the engine will insert the page breaks for you.
I am trying to solve a similar issue, where I can't set the height explicitly because sometimes the content may take 2 pages. (Each page corresponds to a person, and each person should start on a new page when printed). I emailed abcpdf as well to see if they have a hack fix to detect the empty page, but was curious if anyone knows how to fix the underlying problem and css hack IE8 so as to make it not print the final page if empty. I'm guessing it's not possible, but wanted to make sure I'm not missing something obvious.
The AddImageURL() method of ABCPDF is loosely bind method which doesn't render html tightly within required area which causes new blank page.
try to use AddImageHTML() method to convert your desired HTML into PDF..
Doc theDoc = new Doc();
theDoc.Page = theDoc.AddPage();
int theID = 0;
theDoc.SetInfo(0, "CheckBgImages", "1");
theDoc.SetInfo(0, "RenderDelay", "5000");
theDoc.HtmlOptions.Engine = EngineType.MSHtml;
theID = theDoc.AddImageHtml(HTML);
while (true)
{
if (!theDoc.Chainable(theID))
break;
theDoc.Page = theDoc.AddPage();
theID = theDoc.AddImageToChain(theID);
}
for (int i = 0; i <= theDoc.PageCount; i++)
{
theDoc.PageNumber = i;
theDoc.Flatten();
}
theDoc.Save(HttpContext.Current.Server.MapPath(Path));
theDoc.Clear();
It will always give accurate results.
To avoid page breaking in the last page, I did something like this and it worked.
I made sure that the last page didn't have the page-break-after: always, this can be done with any templating or front-end framework like angularJS, but for this example I use blade templating (but any php will do...)
#if ($last_page)
<div class='footer last-page'>
#else
<div class='footer'>
and then I have this in my style sheet
.footer {
page-break-after:always;
}
.last-page {
page-break-after:avoid;
}
We had the same issue in production environment only but not in test environment. We only had page-brek-after used at multiple places in the html.
Fix for first issue: I spotted the issue by removing the page-brek-after attributes one by one and this finally gave me the DIV section where page break was causing by some of it's element.
I fixed the height of each elements inside the DIV and this finally fixed my issue without removing the page-break-after attribute.
Fix for similar issue: If you have a custom hard coded footer, make sure to check by increasing/decresing it's height and margine.
I had this same thing happen with html to pdf where abcpdf was adding a blank page with nothing but a footer on it before the rest of the content (as page 1). This would occur when my content included a table surrounded by a div where the div height was height:auto followed by a page-break-before: always. It only happened when the table data contained "", string.Empty, or a single line of text. If the table data contained 2 lines or more of text, the issue did not present.
I solved it by adding a min-hight: 1in style to the div that had height: auto.