Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
allora, adesso con immagine allieta a dx mi sballa il testo, mentre con img allineata a sx si vede quasi correttamente (a parte il fatto che c'è troppa distanza tra il testo e l'immagine).
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
Prova a togliere i due valori float del CSS al tag figure (ce ne dovrebbe essere uno per l'allineamento a sinistra e uno per l'allineamento a destra).
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
il floatc'era solo per l'allineamento a destra, ma comunque (sempre e solo a dx) il testo va a capo in maniera scorretta, ed è appiccicato all'immagine.
A sx, invece, l'img è appiccicata ai margini superiori e il testo continua a essere distante.
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
Il CSS dovrebbe essere unico sia per quando l'immagine è a destra che per quando si trova a sinistra.
Per avere un aiuto più preciso dovresti pubblicare il codice CSS attuale.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
certamente:
Codice: /*!
* Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
body{
margin:0;
font-size:13px;
line-height:1.231;
background:#F7F7F5}
body,button,input,select,textarea{
font-family:sans-serif;
color:#222}
b,strong{font-weight:bold}
img{
border:0;
-ms-interpolation-mode:bicubic;
vertical-align:middle;
display:block}
textarea{
overflow:auto;
vertical-align:top;
resize:vertical}
.greyBg{background-color:#F7F7F5}
html{-webkit-font-smoothing:antialiased}
html,body{margin:0;padding:0}
body{font-family:"Open Sans",sans-serif}
h1{
font-size:44px;
line-height:44px;
color:#4e4e4e;
font-weight:300;
margin:0;
padding:0}
p{
color:#4e4e4e;
font-size:16px;
line-height:1.7;
font-weight:200}
ul{margin:0;padding:0}
ul li{
margin:0;
padding:0;
list-style-type:none}
.header{
min-height:150px;
position:relative;
overflow:hidden;
height:600px}
header{
z-index:501;
font-family:"Open Sans",sans-serif;
position:fixed;
top:40px}
figure{
margin:0;
width:70%;
overflow:hidden;
position:relative;
max-height:470px;
max-width:900px}
img{
width:auto\9;
height:auto;
max-width:100%;
width:100%;
vertical-align:middle;
border:0;
-ms-interpolation-mode:bicubic}
.teaser-details h3{
font-size:20px;
margin:0px 0px 3px 0px;
color:#4e4e4e;
font-weight:lighter}
.teaser-details h5{
font-size:23px;
margin:0px;
font-weight:bold;
color:#4e4e4e}
.left figure:after{
right:-1px;
top:50%;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
border-color:rgba(136,183,213,0);
border-right-color:#F7F7F5;
border-width:20px;
margin-top:-20px;
z-index:100}
.right figure{
margin:2% 0 0 0%;
right:0}
.right figure:after{
left:-1px;
top:30%;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
border-color:rgba(136,183,213,0);
border-left-color:#F7F7F5;
border-width:20px;
margin-top:-20px;
z-index:100}
.right .teaser-details{
text-align:right;
padding-top:3%;
width:26%;
float:right;
margin-right:25px}
.square{width:70%}
.square figure{
width:60%;
max-width:470px}
.square figure a:after{display:block;
content:''}
.square figure a{max-width:500px}
.square.left{float:left;margin-left:10%}
.square.left figure a{float:right}
.square.right{float:right;margin-right:10%}
.square.right figure a{float:left}
.square .teaser-details{width:35%}
.firma{color:#666;margin-top:10px}
/*# sourceMappingURL=screen.css.map */
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
Ho ripulito il codice HTML e quello CSS in modo da partire da una base più semplice per fare le modifiche.
Il codice del file "templates.php":
Codice PHP: <?php
error_reporting(E_ALL);
// form per l'inserimento immagine
define('UPLOAD_DIR', './uploads/');
$immagine = '';
if(isset($_FILES['upload']))
{
$file = $_FILES['upload'];
if($file['error'] == UPLOAD_ERR_OK and is_uploaded_file($file['tmp_name']))
{
move_uploaded_file($file['tmp_name'], UPLOAD_DIR.$file['name']);
$immagine = UPLOAD_DIR.$file['name'];
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css" />
</head>
<body>
<?php if (isset($_POST['posizione']) && $_POST['posizione'] == 1) : ?>
<table class="left">
<tr>
<td class="image">
<figure><img src="<?php echo $immagine;?>" alt="cover" /></figure>
<div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
</td>
<td class="text">
<h2><?php echo htmlspecialchars($_POST['titoletto']);?></h2>
<h1><?php echo htmlspecialchars($_POST['titolo']);?></h1>
<p><?php echo htmlspecialchars($_POST['testo']);?></p>
</td>
</tr>
</table>
<?php else : ?>
<table class="right">
<tr>
<td class="text">
<h2><?php echo htmlspecialchars($_POST['titoletto']);?></h2>
<h1><?php echo htmlspecialchars($_POST['titolo']);?></h1>
<p><?php echo htmlspecialchars($_POST['testo']);?></p>
</td>
<td class="image">
<figure><img src="<?php echo $immagine;?>" alt="cover" /></figure>
<div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
</td>
</tr>
</table>
<table>
<?php endif;?>
</body>
</html>
Il codice CSS:
Codice: html,body{
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1.231;
background: #F7F7F5;
font-family: "Open Sans", sans-serif;
color: #4E4E4E;
-webkit-font-smoothing:antialiased
}
b,strong{
font-weight: bold;
}
table{
width: 100%;
border: 0;
}
table td{
padding: 20px;
vertical-align: middle;
}
table .text{
width: 30%;
}
table.right .text{
text-align: right;
}
table .text h1{
margin: 0;
font-size: 23px;
font-weight: bold;
}
table .text h2{
margin: 0;
font-size: 20px;
font-weight:lighter;
}
table .text p{
font-size: 16px;
line-height: 1.7;
font-weight: 200;
}
table .image{
width: 70%;
}
table .image figure{
position: relative;
margin: 0;
width: 100%;
overflow: hidden;
}
table .image figure img{
display: block;
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}
table.left .image figure:after{
content: " ";
position: absolute;
z-index: 100;
top: 50%;
right: -1px;
height: 0;
width: 0;
margin-top: -20px;
border: solid transparent;
border-right-color: #F7F7F5;
border-width: 20px;
pointer-events: none;
}
table.right .image figure:after{
content: " ";
position: absolute;
z-index: 100;
top: 50%;
left: -1px;
height: 0;
width: 0;
margin-top: -20px;
border: solid transparent;
border-left-color: #F7F7F5;
border-width: 20px;
pointer-events: none;
}
table .image .firma{
margin-top: 10px;
color: #666;
}
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
ok, direi che finalmente ci siamo! 
l'unica cosa adesso è che abbasserei tutto un po' dal margine alto, ho provato con margin-top sul body ma nn ha funzionato...
dopodichè dimmi pure come fare a generare il pdf che poi diventerà jpeg
grazie
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
Devi assegnare il margin-top al tag table.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
ok, ci siamo! 
tocca alla parte di generazione dell'immagine...
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
16/07/2015 12:41
(Questo messaggio è stato modificato l'ultima volta il: 16/07/2015 12:43 da Mattia.)
La prima cosa da fare è generare un PDF dal codice HTML e CSS. Per farlo si può usare dompdf.
Da questa pagina devi scaricare l'ultima versione disponibile (preferibilmente non beta) e, dopo aver estratto il contenuto dall'archivio ZIP, la carichi in una cartella sul tuo sito.
In "templates.php" prima di:
Inserisci:
Dopo:
Inserisci (naturalmente devi modificare il percorso del file "dompdf_config.inc.php"):
Codice PHP: <?php
$html = ob_get_contents();
ob_end_clean();
require_once('sottocartella/in/cui/hai/inserito/dompdf/dompdf_config.inc.php');
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream('file.pdf');
Se tutto funziona correttamente, ti dovrebbe far scaricare il file PDF generato dal codice HTML e CSS.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
Ciao Mattia,
ho applicato lo script che hai dettoed effettivamente quando clicco su "Crea Screenshot" mi genera il pdf con le info html, ma non mantiene le impostazioni CSS.
Per capire cosa posso aver sbagliato ti metto il codice di template.php di seguito:
Codice: <?php
error_reporting(E_ALL);
// form per l'inserimento immagine
define('UPLOAD_DIR', './uploads/');
$immagine = '';
if(isset($_FILES['upload']))
{
$file = $_FILES['upload'];
if($file['error'] == UPLOAD_ERR_OK and is_uploaded_file($file['tmp_name']))
{
move_uploaded_file($file['tmp_name'], UPLOAD_DIR.$file['name']);
$immagine = UPLOAD_DIR.$file['name'];
}
}
ob_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css" />
</head>
<body>
<?php if (isset($_POST['posizione']) && $_POST['posizione'] == 1) : ?>
<table class="left">
<tr>
<td class="image">
<figure><img src="<?php echo $immagine;?>" alt="cover" /></figure>
<div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
</td>
<td class="text">
<h2><?php echo htmlspecialchars($_POST['titoletto']);?></h2>
<h1><?php echo htmlspecialchars($_POST['titolo']);?></h1>
<p><?php echo htmlspecialchars($_POST['testo']);?></p>
</td>
</tr>
</table>
<?php else : ?>
<table class="right">
<tr>
<td class="text">
<h2><?php echo htmlspecialchars($_POST['titoletto']);?></h2>
<h1><?php echo htmlspecialchars($_POST['titolo']);?></h1>
<p><?php echo htmlspecialchars($_POST['testo']);?></p>
</td>
<td class="image">
<figure><img src="<?php echo $immagine;?>" alt="cover" /></figure>
<div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
</td>
</tr>
</table>
<table>
<?php endif;?>
</body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();
require_once('dompdf/dompdf_config.inc.php');
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream('file.pdf');
?>
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
Il codice PHP è corretto. Ho fatto una prova e il CSS viene letto, ma, come ti avevo avvisato in un messaggio precedente, alcune istruzioni non sarebbero state supportate correttamente.
I problemi che ho riscontrato io sono: - font Open Sans non utilizzato;
- h1[/] e [i]h2 non allineati correttamente;
- immagine rimpicciolita troppo.
Per quanto riguarda il font, dovrebbe essere tutto corretto, ma forse Altervista non permette di leggere file esterni (in questo caso il CSS e il font su Google).
Per l'allineamento di h1 e h2, dovresti provare ad aggiungere a "table .text h1" e a "table .text h2":
Per l'immagine troppo piccola dovresti provare a togliere a "table .image figure" il valore "width: 100%" (se non cambia nulla, rimettilo).
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
17/07/2015 12:54
(Questo messaggio è stato modificato l'ultima volta il: 17/07/2015 12:56 da Chandler.)
secondo me, a questo punto, è meglio che banalmente facciamo un passo indietro e quando le viene generato il template si fa lo screenshot della pagina. A meno che non troviamo un'alternativa efficace...
in ogni caso pur facendo le modifiche da te dette non si risolve il problema. Probabilmente, come dici tu, il font non viene letto correttamente, per questo motivo non si riescono a differenziare i corpi dei testi. Anche l'immagine non capisco perché venga visualizzata così piccola.
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
Se intendi fare lo screenshot a mano, allora devi rimettere il file "templates.php" com'era prima di inserire dompdf.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
dipende se riusciamo a risolvere il problema oppure no.
Potremmo risolvere usando un font non google?
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
Se il problema sono i server di Altervista che non permettono di leggere i file esterni, dovresti poter risolvere caricando i file del font Open Sans sul tuo sito senza usare il servizio di Google.
Mattia!
|
script per generazione immagine da template
