Navigation

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    SOLVED Hintergrundgrafik in Serienbrief

    Fragen
    7
    28
    262
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      Asti77 last edited by

      Ich habe diesbezüglich schon bei einem älteren Thema was geschrieben, vermute aber mal dass das keiner lesen wird, daher hier als neue Frage.

      Ich würde beim Serienbrief gerne anstatt des Logos eine Hintergrundgrafik einfügen. Wenn diese auf der ersten Seite eines Briefes erscheint, würde es mich schon mal reichen. Wenn’s auf weiteren Seiten auch erscheint, um so besser. Gibt es da eine Möglichkeit?

      Hintergrund ist der, dass ich gerne das selbe Layout haben würde, wie das Briefpapier der Gemeinde. Da ich dieses Layout auch als .png habe, müsste man das doch theoretisch hinter den Text setzten können, oder? Bin leider in Sachen HTML ziemlich planlos...

      jziegeler 1 Reply Last reply Reply Quote 0
      • jziegeler
        jziegeler ChurchToolsMitarbeiter @Asti77 last edited by

        @asti77 das lässt sich über ein bisschen CSS lösen:

        body {
            background-image: url('deine Bild URL');
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        A Ketty 2 Replies Last reply Reply Quote 0
        • A
          Asti77 @jziegeler last edited by

          @jziegeler Da hat du wohl recht. Allerdings nur wenn man‘s kann. 🤠

          Vielen Dank! Das probiere ich mal aus. Muss ich darauf achten, das an eine bestimmte Stelle zu setzten z.B. ganz an den Anfang?

          Andy 1 Reply Last reply Reply Quote 1
          • Andy
            Andy admin @Asti77 last edited by Andy

            @asti77 bei @jziegeler habe ich neulich gelernt, dass man Grafiken auch Base64 kodieren und die kryptische Zeichenfolge dann in das CSS einfügen kann. Dadurch ist also kein Link auf eine externe Web-Quelle nötig.

            jziegeler 1 Reply Last reply Reply Quote 0
            • jziegeler
              jziegeler ChurchToolsMitarbeiter @Andy last edited by

              @Asti77 so müsste es dann letztlich aussehen, falls du das Standardtemplate als Grundlage verwendest:

              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>{{titel}}</title>
                  <style type="text/css">
                      body {
                          background-image: url('deine Bild URL');
                          background-repeat: no-repeat;
                          background-size: cover;
                      }
                  </style>
              </head>
              <body> ....
              
              B A 2 Replies Last reply Reply Quote 0
              • B
                bwl21 @jziegeler last edited by

                @jziegeler damit kann man auch gleich im Log nachschauen, wer die Mail gelesen hat 🙂

                Andy Ketty 2 Replies Last reply Reply Quote 0
                • Andy
                  Andy admin @bwl21 last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • A
                    Asti77 @jziegeler last edited by

                    @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.

                    jziegeler 1 Reply Last reply Reply Quote 0
                    • jziegeler
                      jziegeler ChurchToolsMitarbeiter @Asti77 last edited by

                      @asti77 dann versuch es mal mit contain statt cover

                      1 Reply Last reply Reply Quote 0
                      • B
                        BeSt last edited by

                        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.

                        jziegeler 1 Reply Last reply Reply Quote 0
                        • jziegeler
                          jziegeler ChurchToolsMitarbeiter @BeSt last edited by

                          @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 Reply Last reply Reply Quote 0
                          • B
                            BeSt @jziegeler last edited by

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

                            B 1 Reply Last reply Reply Quote 0
                            • B
                              BeSt @BeSt last edited by

                              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

                              jziegeler 1 Reply Last reply Reply Quote 0
                              • jziegeler
                                jziegeler ChurchToolsMitarbeiter @BeSt last edited by

                                @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 Reply Last reply Reply Quote 0
                                • B
                                  BeSt @jziegeler last edited by

                                  @jziegeler Leider gleiches Ergebnis.

                                  A 1 Reply Last reply Reply Quote 0
                                  • A
                                    Asti77 @BeSt last edited by

                                    @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.

                                    1 Reply Last reply Reply Quote -1
                                    • Ketty
                                      Ketty @bwl21 last edited by

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

                                      Andy 1 Reply Last reply Reply Quote 0
                                      • Ketty
                                        Ketty @jziegeler last edited by

                                        @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 Reply Last reply Reply Quote 0
                                        • Andy
                                          Andy admin @Ketty last edited by 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 Reply Last reply Reply Quote 1
                                          • B
                                            BeSt last edited by

                                            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 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post