Print the Content of a Block
Permalink
Hi does any one knows if i can print the content that is on a specific Block. For example i have an article on the main block of my page and i want to print only that article and not the whole page with the menus and pictures.
Can i do that???
Can i do that???
you can use some of the api functions found here:http://www.concrete5.org/documentation/developers/blocks/working-wi...
This can be done with CSS. You have to specify a css file for the printer, in it, you put the display: none to the blocks you don't want visible.
<link rel="stylesheet" type="text/css" media="print" href="<?php echo $this->getStyleSheet('printer.css')?>" />
More about the topic:http://www.alistapart.com/articles/goingtoprint/...
<link rel="stylesheet" type="text/css" media="print" href="<?php echo $this->getStyleSheet('printer.css')?>" />
More about the topic:http://www.alistapart.com/articles/goingtoprint/...
I am also looking for help on ability to print a block. I have a block which I would like to be able to print. Please advice on how I can get it done.
Some ways to do this are:
1. CSS
Create printer.css and in it, you put the value display:none to every theme element you don't want to have visible in the print. You can also add some printer only css tags to define the page size etc.
Example:http://stackoverflow.com/questions/468881/print-div-id-printarea-di...
Pros: Easy. Doesn't need coding or editing other than adding a new css file into the theme and one line to the header.
Cons: Needs updating when you change the theme.
2. Javascript
Use javascript to pick the blocks content and print it in a new "window". Examples of this:
function PrintContent() {
//You can replace this with jquery, but remember to set DocumentContainer to an
//actual DOMElement (not the jquery element). Example, if you know you have only
//one div area thats class is "printBlock" then you can write:
//var DocumentContainer = $('.printBlock').get(0);
var DocumentContainer = document.getElementById(‘divtoprint’);
//Creates a new window
var WindowObject = window.open(”, “PrintWindow”,
“width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes”);
//Writes the content you want to print in to the new window
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
Original source (first comment):
http://www.isolutionteam.co.uk/printing-contents-of-a-div-using-jav...
Pros: No theme editing required. It is also more flexible because you can use jquery to select what to print.
Cons: Popsup a windows (not sure does it only flash, haven't used this solution)
1. CSS
Create printer.css and in it, you put the value display:none to every theme element you don't want to have visible in the print. You can also add some printer only css tags to define the page size etc.
Example:http://stackoverflow.com/questions/468881/print-div-id-printarea-di...
Pros: Easy. Doesn't need coding or editing other than adding a new css file into the theme and one line to the header.
Cons: Needs updating when you change the theme.
2. Javascript
Use javascript to pick the blocks content and print it in a new "window". Examples of this:
function PrintContent() {
//You can replace this with jquery, but remember to set DocumentContainer to an
//actual DOMElement (not the jquery element). Example, if you know you have only
//one div area thats class is "printBlock" then you can write:
//var DocumentContainer = $('.printBlock').get(0);
var DocumentContainer = document.getElementById(‘divtoprint’);
//Creates a new window
var WindowObject = window.open(”, “PrintWindow”,
“width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes”);
//Writes the content you want to print in to the new window
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
Original source (first comment):
http://www.isolutionteam.co.uk/printing-contents-of-a-div-using-jav...
Pros: No theme editing required. It is also more flexible because you can use jquery to select what to print.
Cons: Popsup a windows (not sure does it only flash, haven't used this solution)
Thank you for your reply. I am fairly new to this concrete5 and hence I am
not too clear on how to make the changes on the options you had provided.
Please give me the options you think is the best and give me the steps I
need to follow (I am sorry to be asking for so much....but, like what I
said...I am a newbie in this and I do not want to break anything on a
working site)
Thanks,
Snagy
not too clear on how to make the changes on the options you had provided.
Please give me the options you think is the best and give me the steps I
need to follow (I am sorry to be asking for so much....but, like what I
said...I am a newbie in this and I do not want to break anything on a
working site)
Thanks,
Snagy
Well, in that case I would go with option one. Unfortunately I can't help to much because I don't know anything about the web page + this is some think you can figure out once you get to know Concrete5 better.
To do the first option, you should have the skills in the following:
NOTICE! This list isn't based on any assumptions of your current skills. For some of the items in the list you might feel "off-course I know this!!" but you need to remember I don't know anything about you.
- Using FTP
Find a ftp program with a graphical user interface (unless you like terminal) and connect to the server. Usage is similar to normal file management (move, copy, rename etc). I recommend: CyberDuck for Mac and WinSCP for Windows (no linux recommendations, because if you have linux you most likely know this part :D)
- Understand HTML (you have made something with html)
- Understand CSS (you have done something with it)
Both can be learned quickly from:http://www.w3schools.com/
- Understand PHP Basics (mainly, where does PHP code start and end <?php and ?>)
PHP 101 to absolute beginners:
http://devzone.zend.com/6/php-101-php-for-the-absolute-beginner/...
- Understand How Concrete5 themes work
A very good tutorial can be found here:http://www.concrete5.org/documentation/how-tos/designers/make-a-the...
The things you need to do:
1. Some way to find (correct term select) the block you want to print with css
Example:
How to set css to "divElement"
How to set css to "someElement"
How to find a span inside "someElement"
the lines that "find" the element are called css selectors.
Point being, you need to be able to set css to the element you want to print (or find all the others). After you can do this (options: edit the theme, set the block to have a class name.. etc) you do the following (notice!! this one out of many solutions):
2. Create a file called printer.css
Example content:
The inline can be something else. The key here is the !important. This will force the css style to you element. This solution might not work 100% so you might need to add more display: none css to elements that aren't effected by the body * selector.
Ones you are ready, save the printer.css in to the themes root folder and add this line:
to the head tag. In concrete5 this can usually be found in the themes elements folder and there the file header.php.
To do the first option, you should have the skills in the following:
NOTICE! This list isn't based on any assumptions of your current skills. For some of the items in the list you might feel "off-course I know this!!" but you need to remember I don't know anything about you.
- Using FTP
Find a ftp program with a graphical user interface (unless you like terminal) and connect to the server. Usage is similar to normal file management (move, copy, rename etc). I recommend: CyberDuck for Mac and WinSCP for Windows (no linux recommendations, because if you have linux you most likely know this part :D)
- Understand HTML (you have made something with html)
- Understand CSS (you have done something with it)
Both can be learned quickly from:http://www.w3schools.com/
- Understand PHP Basics (mainly, where does PHP code start and end <?php and ?>)
PHP 101 to absolute beginners:
http://devzone.zend.com/6/php-101-php-for-the-absolute-beginner/...
- Understand How Concrete5 themes work
A very good tutorial can be found here:http://www.concrete5.org/documentation/how-tos/designers/make-a-the...
The things you need to do:
1. Some way to find (correct term select) the block you want to print with css
Example:
<div id="divElement"> <div class="someElement"> <span>Somethink</span> </div> <div>
How to set css to "divElement"
#divElement { //css goes here }
How to set css to "someElement"
#divElement { //css goes here }
How to find a span inside "someElement"
.someElement span { //css goes here }
the lines that "find" the element are called css selectors.
Point being, you need to be able to set css to the element you want to print (or find all the others). After you can do this (options: edit the theme, set the block to have a class name.. etc) you do the following (notice!! this one out of many solutions):
2. Create a file called printer.css
Example content:
body * { display: none } #yourElement { display: inline !important }
The inline can be something else. The key here is the !important. This will force the css style to you element. This solution might not work 100% so you might need to add more display: none css to elements that aren't effected by the body * selector.
Ones you are ready, save the printer.css in to the themes root folder and add this line:
<link rel="stylesheet" type="text/css" media="print" href="<?php echo $this->getStyleSheet('printer.css')?>" />
to the head tag. In concrete5 this can usually be found in the themes elements folder and there the file header.php.
