• Aktuell
    • Tags
    • Beliebt
    • Benutzer
    • Gruppen
    • Suche
    • Registrieren
    • Anmelden

    Gelöst Hintergrundgrafik in Serienbrief

    Fragen
    7
    28
    736
    Lade mehr Beiträge
    • Älteste zuerst
    • Neuste zuerst
    • Meiste Stimmen
    Antworten
    • In einem neuen Thema antworten
    Anmelden zum Antworten
    Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
    • AndyA
      Andy admin @bwl21
      zuletzt editiert von

      @bwl21 geht's hier nicht um den Serienbrief? Da werden doch PDFs generiert ...

      1 Antwort Letzte Antwort Antworten Zitieren 0
      • A
        Asti77 @jziegeler
        zuletzt editiert von

        @jziegeler Ich verwende ein bereits angepasstes Template, habe es aber passend einfügen können. Es funktioniert - vielen Dank nochmal!

        Ich muss das ganze Erscheinungsbild nur noch etwas optimieren. Da sich die Grafik, je nach Textlänge, am unteren Rand variiert (in der Grafik ist eine Fußzeile), ist die Fußzeile mal am unteren Rand und mal auf der nächsten Seite irgendwo auf dem Blatt. Aber da habe ich schon eine Idee.

        Das mit dem base64-image geht grundsätzlich auch. Allerdings ist dann die Grafik breiter als das Blatt. Obwohl die Grafik auf die tatsächliche Blattgröße festgelegt ist, ist sie auf dem PDF tatsächlich ein gutes Stück breiter und geht deutlich über den Seitenrand hinaus.

        Vorstand, Technik-Chef und ChurchTools-Admin bei der FCG Kirche (er)leben

        jziegelerJ 1 Antwort Letzte Antwort Antworten Zitieren 0
        • jziegelerJ
          jziegeler ChurchToolsMitarbeiter @Asti77
          zuletzt editiert von

          @asti77 dann versuch es mal mit contain statt cover

          1 Antwort Letzte Antwort Antworten Zitieren 0
          • B
            BeSt
            zuletzt editiert von

            Hallo.

            Ich bin auf diesen Thread gestoßen und versuche das grade auch. Leider noch mit mäßigem Erfolg.

            Ich habe meinen Briefbogen als PNG und diesen dann umgewandelt in ein base64-String. Diesen habe ich dann in das CSS von @jziegeler eingefügt.

            <head>
                <meta charset="UTF-8">
                <title>{{titel}}</title>
                <style type="text/css">
                    body {
                        background-image: url('data:image/png;base64,[hier der base64-string]');
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
                </style>
            </head>
            

            Aber leider klappt das weder mit "contain" noch mit "cover" richtig. Bei "contain" ist das Hintergrund-Image recht klein, in der oberen rechten Ecke und passt so gar nicht auf das A4-PDF. Mit "cover" ist es besser, aber auch nicht passend - hier ist es zentriert auf dem A4-PDF, aber ringsum mit ein paar Zentimeter Rand, also nicht randlos formatfüllend.

            Was mache ich falsch? Muss ich noch irgendwas anpassen?

            Danke für eure Hilfe.

            P.S.: Dieses Forum ist der Hammer VIELEN DANK.

            jziegelerJ 1 Antwort Letzte Antwort Antworten Zitieren 0
            • jziegelerJ
              jziegeler ChurchToolsMitarbeiter @BeSt
              zuletzt editiert von

              @best das kommt drauf an was für ein Bild du in bae64 umgewandelt hast, das scheint dann von der Auflösung her nicht optimal zu sein

              B 1 Antwort Letzte Antwort Antworten Zitieren 0
              • B
                BeSt @jziegeler
                zuletzt editiert von

                @jziegeler Das PNG hat bei 300dpi eine Auflösung von 2482 x 3508 Pixel. Also eigentlich ziemlich exakt DinA4-Größe.

                B 1 Antwort Letzte Antwort Antworten Zitieren 0
                • B
                  BeSt @BeSt
                  zuletzt editiert von

                  Ich habe mal ein base64 mit vollflächiger Farbe gemacht, um das zu demonstrieren. Das kommt beim Serienbrief im PDF raus:
                  2022-02-01 12_43_04-.png

                  jziegelerJ 1 Antwort Letzte Antwort Antworten Zitieren 0
                  • jziegelerJ
                    jziegeler ChurchToolsMitarbeiter @BeSt
                    zuletzt editiert von

                    @best
                    dann füg mal noch margin und padding hinzu

                    body {
                                background-image: url('data:image/png;base64,[hier der base64-string]');
                                background-repeat: no-repeat;
                                background-size: cover;
                                padding: 0;
                                margin: 0;
                    }
                    
                    B 1 Antwort Letzte Antwort Antworten Zitieren 0
                    • B
                      BeSt @jziegeler
                      zuletzt editiert von

                      @jziegeler Leider gleiches Ergebnis.

                      A 1 Antwort Letzte Antwort Antworten Zitieren 0
                      • A
                        Asti77 @BeSt
                        zuletzt editiert von

                        @best Ich hatte es damals auch nur bedingt hinbekommen und daher erstmal wieder ad Acta gelegt. Ich hatte es mal hinbekommen dass es über die ganze Seite ging, wobei ganze Seite relativ ist, denn ich hatte auch einen Rand. Ich könnte mir vorstellen dass vielleicht irgendwo ein definierter Seitenrand hinterlegt ist, der das verursacht. Ob das möglich ist, wissen die ChurchTools-Macher aber sicher besser.

                        Neben dem „Rand“ gab es aber noch ein paar andere Sachen die mich nicht so überzeugt haben, und nach einer Weile war das Bild auch wieder nur in kleinere Größe eingefügt und nicht mehr über das ganze Blatt. Daher habe ich das nicht weiter verfolgt. Fände es allerdings noch immer klasse, wenn’s funktionieren würde. Aber ich vermute dass es wahrscheinlich sinnvoller wäre ein richtiges Briefpapier-Layout per CSS oder so zu basteln.

                        Vorstand, Technik-Chef und ChurchTools-Admin bei der FCG Kirche (er)leben

                        1 Antwort Letzte Antwort Antworten Zitieren -1
                        • KettyK
                          Ketty @bwl21
                          zuletzt editiert von

                          @bwl21 das wäre sehr praktisch - wenn man wüsste wer die Mail gesehen und am besten gelesen hat 😉

                          AndyA 1 Antwort Letzte Antwort Antworten Zitieren 0
                          • KettyK
                            Ketty @jziegeler
                            zuletzt editiert von

                            @jziegeler wäre schön wenn es auch ohne dies gehen würde - ich weiss z.B. nicht wo ich es eingäben könnte. 🤔 Traue mir das auch nicht zu!

                            1 Antwort Letzte Antwort Antworten Zitieren 0
                            • AndyA
                              Andy admin @Ketty
                              zuletzt editiert von Andy

                              @ketty sagte in Hintergrundgrafik in Serienbrief:

                              @bwl21 das wäre sehr praktisch - wenn man wüsste wer die Mail gesehen und am besten gelesen hat 😉

                              Dese Funktion gab es bis zur DSGVO (2018) in CT und sie wurde bewusst entfernt!

                              1 Antwort Letzte Antwort Antworten Zitieren 1
                              • B
                                BeSt
                                zuletzt editiert von

                                Ich habe jetzt mal ein ganz einfaches Template gemacht um zu sehen, wie CT damit umgeht.
                                Das ist der HTML-Code:

                                <!DOCTYPE html>
                                <html lang="en">
                                <head>
                                    <meta charset="UTF-8">
                                    <title>{{titel}}</title>
                                </head>
                                <body style="margin: 0; padding: 0; height: 100%; border: 1px solid red;">
                                {{content}}
                                </body>
                                

                                Und das ist, was dann am Ende rauskommt:
                                2022-02-01 15_52_35-.png

                                Hier sieht man, dass CT immer einen umlaufenden Rand von ca. 1cm behält. Daher ist es so meiner Meinung nach leider gar nicht möglich eine Randlose Vorlage zu basteln.

                                Ich überlege nun, ob ich irgendwie mit CSS eine Vorlage bauen kann, die diesen 1cm-Rand berücksichtigt. Ist halt schade, weil unser Briefbogen eine Grafik bis zum Rand enthält, die ich hiermit also auf keinen Fall umgesetzt bekomme.

                                A 1 Antwort Letzte Antwort Antworten Zitieren 0
                                • A
                                  Andrej @BeSt
                                  zuletzt editiert von

                                  @best kann man bei margin und padding mit negativen Werten arbeiten? oder bei height mit Prozenten größer als 100%?
                                  Wenn ja, bringt das vielleicht die gewünschte Darstellung

                                  CT 3.x gehosted
                                  Freie evangelische Gemeinde (FeG)

                                  1 Antwort Letzte Antwort Antworten Zitieren 0
                                  • B
                                    BeSt
                                    zuletzt editiert von BeSt

                                    Ich habe jetzt mal eine Briefvorlage in HTML / CSS erstellt (ohne ein ganzseitiges Background Image!).

                                    Ich poste hier mal den Code - vielleicht hilft es dem einen oder anderen ja....

                                    <!DOCTYPE HTML>
                                    
                                    <!--
                                    
                                    ChurchTools-Serienbrief-HTML-Template
                                       
                                    Autor: Benni S., FilderGoodNews im Gemeindeverbund God in Life
                                    Datum: 01.02.2022
                                    
                                    -->
                                    
                                    <head>
                                    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                                    	<style>
                                    
                                    /*-----------------------------------------------------------------
                                    	Erst wird sämtliches HTML quasi resettet auf 'Standard-Werte'
                                    
                                    	Diese Standardwerte sind übernommen von:
                                    
                                    	http://meyerweb.com/eric/tools/css/reset/ 
                                    	v2.0 | 20110126
                                    	License: none (public domain)
                                    -----------------------------------------------------------------*/
                                    
                                    	html, body, div, span, applet, object, iframe,
                                    	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
                                    	a, abbr, acronym, address, big, cite, code,
                                    	del, dfn, em, img, ins, kbd, q, s, samp,
                                    	small, strike, strong, sub, sup, tt, var,
                                    	b, u, i, center,
                                    	dl, dt, dd, ol, ul, li,
                                    	fieldset, form, label, legend,
                                    	table, caption, tbody, tfoot, thead, tr, th, td,
                                    	article, aside, canvas, details, embed, 
                                    	figure, figcaption, footer, header, hgroup, 
                                    	menu, nav, output, ruby, section, summary,
                                    	time, mark, audio, video {
                                    		margin: 0;
                                    		padding: 0;
                                    		border: 0;
                                    		font-size: 100%;
                                    		font: inherit;
                                    		vertical-align: baseline;
                                    	}
                                    	/* HTML5 display-role reset for older browsers */
                                    	article, aside, details, figcaption, figure, 
                                    	footer, header, hgroup, menu, nav, section {
                                    		display: block;
                                    	}
                                    	body {
                                    		line-height: 1;
                                    	}
                                    	ol, ul {
                                    		list-style: none;
                                    	}
                                    	blockquote, q {
                                    		quotes: none;
                                    	}
                                    	blockquote:before, blockquote:after,
                                    	q:before, q:after {
                                    		content: '';
                                    		content: none;
                                    	}
                                    	table {
                                    		border-collapse: collapse;
                                    		border-spacing: 0;
                                    	}
                                    
                                    
                                    	/*-----------------------------------------------------------------
                                    		Jetzt werden Vorgaben für einen Brief gesetzt, dabei wird
                                    		die DIN-Norm 5008 verwendet, mit einigen geringfügigen 
                                    		Anpassungen - dabei wird der umlaufende Rand von 10mm, den
                                    		ChurchTools immer vorgibt, berücksichtigt
                                    
                                    		Ausgangspunkt für die Vorlage ist dabei dieses GitHub-Projekt:
                                    		https://github.com/hennerthepenner/html-dinbrief
                                    	-----------------------------------------------------------------*/
                                    
                                    	body {
                                    		margin: 0mm 5mm 35mm 12mm !important;
                                    		font-size: 10pt;
                                    		line-height: 4.23mm;
                                    		/* border: 1px solid red; */
                                    	}
                                    
                                    	#briefkopf {
                                    		height: 38mm;
                                    		width: 100%;
                                    		overflow: hidden;
                                    		/* border: 1px solid green; */
                                    	}
                                    	
                                    	#gemeindelogo {
                                    		display: block;
                                    		margin-left: auto;
                                    		margin-right: auto;
                                    		width: 50mm;
                                    	}
                                    
                                    	#absender {
                                    		font-size: 7pt;
                                    		height: 5mm;
                                    		top: 0.8mm;
                                    		/* border: 1px solid blue; */
                                    	}
                                    
                                    	#anschriftenfeld {
                                    		width: 85mm;
                                    		height: 40mm;
                                    		overflow: hidden;
                                    		/* border: 1px solid yellow; */
                                    	}
                                    
                                    	#bezugszeichenzeile {
                                    		width: 100%;
                                    		height: 10mm;
                                    		/* border: 1px solid black; */
                                    	}
                                    
                                    	#bezugszeichenzeile #leitwort {
                                    		font-weight: bold;
                                    	}
                                    
                                    	#betreff {
                                    		margin-top: 8mm;
                                    		height: 5mm;
                                    		font-weight: bold;
                                    		/* border: 1px solid lightblue; */
                                    	}
                                    
                                    	#text {
                                    		margin-top: 10mm;
                                    		/* border: 1px solid darkred; */
                                    		text-align: justify;
                                    	}
                                    	
                                    	#footer {
                                    		position: fixed;
                                    		bottom: 0;
                                    		height: 15mm;
                                    		width: 100%;
                                    		/* border: 1px solid gray; */
                                    	}
                                    	
                                    	#footerimage {
                                    		display: block;
                                    		height: 12.7mm;
                                    	}
                                      
                                    	</style>
                                    </head>
                                    <body>
                                      
                                    	<div id="briefkopf">
                                    		<img id="gemeindelogo" src="data:image/png;base64,[base64 encoded Image]" />
                                    	</div>
                                    
                                    	<div id="absender">
                                    		{{sitename}} - Gemeindename, Gemeindeweg 123, 12345 Gemeindestadt
                                    	</div>
                                    
                                    	<div id="anschriftenfeld">
                                    		<!-- Insgesamt neun Zeilen. -->
                                    
                                    		<!-- Drei Zeilen für Zusätze und Vermerke, z.B.
                                    			 Beförderungsvermerke wie "Eilzustellung", "persönlich", 
                                    			 "Einschreiben", "Warensendung", "Nicht nachsenden", "Luftpost" usw.
                                    			 Gegebenenfalls bleiben diese drei Zeilen leer. -->
                                    		
                                    		<!-- Eilzustellung<br/> -->
                                    		<!-- persönlich<br/>-->
                                    		<!-- Einschreiben<br/>-->
                                    
                                    		<!-- Name bzw. Firma -->
                                    		{{firstname}} {{lastname}}<br/>
                                    
                                    		<!-- Namenszusatz oder Straße und Hausnummer oder Postfach -->
                                    		{{street}}<br/>
                                    
                                    		<!-- Straße und Hausnummer oder Postfach oder PLZ und Ort -->
                                    		{{postalcode}} {{city}}
                                    	</div>
                                    
                                    	<table id="bezugszeichenzeile">
                                    		<tr id="leitwort">
                                    			<td id="ihr-zeichen">
                                    			<!-- Ihr Zeichen oder Ihre Nachricht vom -->
                                    			&nbsp;
                                    			</td>
                                    			<td id="unser-zeichen">
                                    			<!-- Unser Zeichen oder Unsere Nachricht vom -->
                                    			&nbsp;
                                    			</td>
                                    			<td id="ansprechpartner">
                                    			<!-- Name, Telefon, Telefax, E-Mail, Internet -->
                                    			&nbsp;
                                    			</td>
                                    			<td id="datum" style="text-align: right;">
                                    			<!-- Datum -->
                                    			Datum
                                    			</td>
                                    		</tr>
                                    		<tr id="inhalt">
                                    			<td>&nbsp;</td>
                                    			<td>&nbsp;</td>
                                    			<td>&nbsp;</td>
                                    			<td style="text-align: right;">{{currentDate}}</td>
                                    		</tr>
                                    	</table>
                                    
                                    	<div id="betreff">
                                    		{{titel}}
                                    	</div>
                                    
                                    	<div id="text">
                                    		{{content}}
                                    	</div>
                                      
                                    	<div id="footer">
                                    		<img id="footerimage" src="data:image/png;base64,[base64 encoded Image]" />
                                    	</div>
                                    
                                    </body>
                                    
                                    

                                    Ein Nachteil hat dieses Template:
                                    Für einen einseitigen Brief funktioniert das recht gut. Aber sobald der Brieftext auf eine zweite Seite umgebrochen werden muss, geht das Layout in die Hose. Grund ist, dass das <div id="text"> ja nicht weiß, wo die erste Seite aufhört und die zweite anfängt. Es ist einfach ein langes div. Und ChurchTools baut da irgendwo den Seitenumbruch bei der PDF-Erstellung ein. Und dieser Seitenumbruch ist immer bei den oben schon erwähnten fixen 10mm Seitenrand. Der Text läuft also auf der ersten Seite über den Footer. Und egal, was im <body>-Tag als Margin für Bottom definiert ist, der Umbruch erfolgt immer erst bei 10mm.

                                    @chuchtools: Ist das irgendwie individualisierbar?

                                    B 1 Antwort Letzte Antwort Antworten Zitieren 1
                                    • B
                                      bwl21 @BeSt
                                      zuletzt editiert von

                                      @best sagte in Hintergrundgrafik in Serienbrief:

                                      Ein Nachteil hat dieses Template:
                                      Für einen einseitigen Brief funktioniert das recht gut. Aber sobald der Brieftext auf eine zweite Seite umgebrochen werden muss, geht das Layout in die Hose. Grund ist, dass das <div id="text"> ja nicht weiß, wo die erste Seite aufhört und die zweite anfängt. Es ist einfach ein langes div. Und ChurchTools baut da irgendwo den Seitenumbruch bei der PDF-Erstellung ein. Und dieser Seitenumbruch ist immer bei den oben schon erwähnten fixen 10mm Seitenrand. Der Text läuft also auf der ersten Seite über den Footer. Und egal, was im <body>-Tag als Margin für Bottom definiert ist, der Umbruch erfolgt immer erst bei 10mm.

                                      wir machen das so, dass wir den Zeilenumbruch von Hand einbringen. Z.b. ein Paragraph mit entsprechender klasse, oder ein <hr> oder was auch immer.

                                      B 1 Antwort Letzte Antwort Antworten Zitieren 0
                                      • B
                                        BeSt @bwl21
                                        zuletzt editiert von

                                        @bwl21 Wie sage ich denn in HTML / CSS, dass ein Seitenumbruch erfolgen soll? Das kennen diese Sprachen doch gar nicht, oder??

                                        B 1 Antwort Letzte Antwort Antworten Zitieren 0
                                        • B
                                          bwl21 @BeSt
                                          zuletzt editiert von

                                          @best schau mal hier
                                          https://forum.church.tools/topic/7533/mehrseitige-serienbriefe-nochmal-gefragt/7?_=1643791578557

                                          B 1 Antwort Letzte Antwort Antworten Zitieren 0
                                          • B
                                            BeSt @bwl21
                                            zuletzt editiert von

                                            @bwl21 Vielen Dank für den Schubs zu diesem Posting.

                                            Dann habe ich aber noch eine Frage: Wie kann ich im Wiki einen Serienbrief schreiben und dann das HTML in den Serienbrief kopieren. Ich habe dann immer im PDF des Serienbriefs die HTML-Tags im Klartext, nicht das ausgewertete HTML.

                                            Irgendwie fehlt mir da noch der Kniff, wie das geht.

                                            B 1 Antwort Letzte Antwort Antworten Zitieren 0
                                            • Erster Beitrag
                                              Letzter Beitrag