pdf Datei in lesbarer Form in der Webseite ausgeben

[Appelmus]

Hallo!
Ich habe eine pdf Datei, die ein Bild von ca 3000 x 5000 Px darstellt.
wenn ich sie in einer Webseite lade, wird sie verkleinert dargestellt.. (Siehe Abb.)

Ich kann sie jetzt vergrößern. Sie ist dann lesbar. Man muss dann scrollen, um verschiedene Bereiche zu lesen.
Das wird auch auf dem dargestellten Schema beschrieben.
Mein Wunsch wäre, das Schema direkt in lesbarer Vergrößerung aus zu geben. Wie ist es zu erreichen, dass das Schema nicht zuerst verkleinert und ganz, sonder in lesbarer Form scrollbar ausgegeben wird.
Für einen zielführende Hinweis bin ich dankbar!

 

[warnochfrei]

Klingt nach einer Aufgabe für ein SVG. Hast du das Original noch?

 

[Appelmus]

Was ist ein svg?
Das Original habe ich noch.

 

[warnochfrei]

SVG: Webtaugliche Vektorgrafik, kann beliebig skaliert werden.
Die meisten PDF-Erzeuger können auch SVG-Export.

 

[MacEnroe]

Bild aus PDF als JPG abspeichern ... und in HTML einbauen. Fertig.

 

[warnochfrei]

JPG skaliert nicht.

 

[MacEnroe]

Man könnte ein JPG über die Pixelmaße oder Prozente, wie auch immer, in HTML beliebig skalieren.

Aber es soll ja nicht skaliert werden, sondern in Originalgröße (originale Pixelgröße) dargestellt werden
und das geht doch ganz einfach mit einem JPG oder PNG.

Das Problem ist doch nur das PDF. Aber wozu ein PDF, wenn man ein Pixelbild in 1:1 Originalgröße darstellen will.

 

[Difool]

Ein .pdf ginge entweder als "embed" oder "iframe".
Skalierbar ist eine PDF-Datei aber grundlegend nicht, daher wird ein PDF als ganzes angezeigt (Vorschau)
und auf Klick o.ä. dann in Originalformat-Größe reingeladen – meist muss man dann scrollen usw.

Mein Wunsch wäre, das Schema direkt in lesbarer Vergrößerung aus zu geben. Wie ist es zu erreichen, dass das Schema nicht zuerst verkleinert und ganz, sonder in lesbarer Form scrollbar ausgegeben wird.

Wenn es denn dieses "Stammbaum-Layout" sein soll, vielleicht als .png Datei in 3 unterschiedlichen Größen anlegen.
In tauglichen Breakpoint-Größen für das Responsive, so dass Smartphone und Tabletts dann kleinere, noch lesbare, Formate bekommen.
Und dann gibt man dem Container der images, sowie den img: "width: 100%;
Aber generell ist bei Texten in Bild-Dateien immer Vorsicht geboten.

Wie oben bereits erwähnt, böte sich auch eine Umsetzung via .svg an – was die Lesbarkeit bei diesem Format dann optimaler erhält, als png.

 

[MacEnroe]

Hmmm ... ich lese das eindeutig so, dass die Grafik von Anfang an 1:1 dargestellt werden soll,
immer gleich groß, eben genau 3000 x 5000 Pixel groß.

Wo ist da das Problem als JPG?

 

[Difool]

Hmmm ... ich lese das eindeutig so, dass die Grafik von Anfang an 1:1 dargestellt werden soll,
immer gleich groß, eben genau 3000 x 5000 Pixel groß.

Wo ist da das Problem als JPG?

Bei diesem Format bist du auf Smartphones und Tabletts ja nur noch am Rumschubsen zum Lesen. (daher die width:100%
Wenn Text im Bild sein soll/muss, dann nimmt man lieber .png, weil es die Typo sauberer darstellt als .jpg – im Browser.

Abgesehen davon hängt alles auch noch von dem Layout der eigentlichen Website ab, wie das angelegt ist.
Wenn er da in einem responsive Content-Container was reinsetzt, dann wird der Inhalt eh vom Eltern-Element/Container "ge-sized".
3000 Pixel Breite ist halt …breit.
Von 320 bis 2560 Pixeln wird üblicherweise eine Website-Breite geplant bei relativen Angaben für das Responsive.
Für Bildschirmformate da drüber lässt man den Content dann "mittig mit Fleischrändern" laufen oder ähnliches.
Ab <960px Breite fängt meist die 2- und/oder 1-Spaltigkeit des Content an.

Einen Content mit 3000 Pixeln Breite ist da halt schon breit – und wenn da noch Text mit drin ist, muss skaliert werden.
Und dann leidet die Lesbarkeit; es sei denn svg.

 

[Appelmus]

Hallo!
Das Schema entstand als Webarchiv aus dem Programm TNG. Hinter dem Schema/ Bild steckt also eine ganze Latte html oder ähnliches. Ich habe das Webarchiv dann in ein pdf umgewandelt, um es überhaupt in das Medienverzeichnis der Webseite hochladen zu können. Wenn ich das Schema nun in die Webseite einbaue, sieht das so aus:

Das kann man nicht lesen. Das Bild/pdf wird als ganzes in den Text eingebaut. Dadurch ist es so klein, dass man es nicht lesen kann. Wenn ich das Bild/pdf in einen neuen Tab lade, kann ich es durch einen Kick auf die Originalgröße verändern.
Um es nochmal zu sagen, ich möchte das pdf in der lesbaren Größe in die Bildfläche laden, in der der Inhalt durch Scrollen verschoben werden kann.
Das ganze Schema ist in der Dropbox unter dem Link aufrufbar.
https://www.dropbox.com/s/wypupy4oq2ly3cp/Nachkommen%20von%20Thomas%20Wilden-pd%20Kopie%202.pdf?dl=0
Wie das in der Webseite aussieht ist in der Testseite unter diesem Link zu sehen:
http://test-perfect.geschichtswerkstatt-lammersdorf.de/index.php/brauchtum/wegkreuze/das-steinerne-kreuz

 

[Appelmus]

Hallo!
Ich habe das pdf in svg umgewandelt.
Ergebnis: Speicherplatz von 6.5 MB auf über 20 MB
Qualität = 0

 

[wegus]

Der SVG Ansatz ist grundsätzlich der Richtige; bei dem hier vorliegenden Material kann ich mir aber denken, dass es eher kein gutes Ergebnis liefert. Skalieren ist ein grundsätzliches Problem, weil man dazu eben nicht nur die Ursprungsgröße kennen muß, sondern auch das ausführende Zieldevice und das kann zwischen einem iPhone SE und einem Desktop mit 8k Monitor ja alles sein.

Hier hilft es nur verschiedene Resultat-Bilder für verschiedene Media-größen zu berechnen, also mehrere PNG (von Jpeg würde ich abraten) und dann über eine CSS Weiche das passende Bild darzustellen.

Das PDF hat den Nachteil nicht immer initial passend zu sein, es aber dem User zu ermöglichen sich darin selbst mittels zoomen/verschieben zu orientieren. Will man dem User diese Arbeit abnehmen, muß man wissen mit welchem Gerät er die Seite betrachtet und das passende PNG laden.

 

[Difool]

@Appelmus
Du hast da ja ein Joomla – kannst auch ein "Lightbox-Plugin" nehmen und das Bild dann mit ref="lightbox" reinsetzen,
damit das Bild als Lightbox erscheint und dann auf Bildschirmgröße gesetzt wird.

Beipiel:

<a href="/images/Genealogie/Nachkommen_von_Thomas_Wilden__Ortsfamilienbuch_Lammersdorf_Kopie.jpg" rel="lightbox"><img alt="Nachkommen von Thomas Wilden Ortsfamilienbuch Lammersdorf Kopie" src="/images/Genealogie/Nachkommen_von_Thomas_Wilden__Ortsfamilienbuch_Lammersdorf_Kopie.jpg" width="2500" height="13909"></a>

 

[MacEnroe]

Bei diesem Format bist du auf Smartphones und Tabletts ja nur noch am Rumschubsen zum Lesen. (daher die width:100%

Der TE hat ja jetzt nochmal bekräftigt, dass er es genau so haben will. Wie auch schon im ersten Posting beschrieben.

Von daher bleibe ich bei meinem Vorschlag, das JPG aus dem PDF zu entnehmen und direkt 1:1 einzubinden.
Natürlich nicht in einen Container, wenn dieser es wieder verkleinern würde.

Die Grafik wird, wie jede Website, im Smartphone automatisch kleiner dargestellt.

Das nachträgliche Wandeln in PNG bringt nichts, dadurch wird die Datenmenge nur größer...


TE: Ich würde das JPG (kein PDF) in einem extra Fenster öffnen lassen.
Innerhalb des Joomla-Systems hat die Grafik nicht ausreichend Platz. Oder so wie von
Difool beschrieben mit Lightbox, das wäre die elegantere Lösung ... ausprobieren.

 

[Appelmus]

Hallo @Difool
Der Hinweis auf das Lightbox Plugin könnte zum Erfolg führen. Ich habe das imagesizer -plugin installiert und den angepaßten Code eingefügt.
Beim Öffnen der Webseite erscheint das Schema in verkleinerter Form, aber deutlich als Schema erkennbar. Jetzt kann ich es anklicken. Leider erscheint es dann in Minaturanischt mit einem Lupensymbol. Klicke ich die Lupe an, erscheint es in der gewünschten Form. Brauchbar, aber nicht optimal. Der Schritt zur Miniaturansicht ist überflüssig.
Nochmals zu sehen hier:
http://test-perfect.geschichtswerkstatt-lammersdorf.de/index.php/brauchtum/wegkreuze/das-steinerne-kreuz

 

[Appelmus]

Noch einige Schwierigkeiten, Umwandlung pdf in jpg geht nicht.

 

[MacEnroe]

Hast du Photoshop?

Beim Öffnen des PDF „Bild“ (nicht „Seite“) anwählen, dann wird das enthaltene JPG geöffnet, dieses dann abspeichern.

Wenn Lightbox zu umständlich ist, dann füge mal einen Link auf das Bild „in eigenem Fenster“ ein.

 

[Difool]

Probiere folgendes:

html:

<a rel="lightbox" href="/images/Genealogie/Nachkommen_von_Thomas_Wilden__Ortsfamilienbuch_Lammersdorf_Kopie.jpg"><img src="/images/Genealogie/Nachkommen_von_Thomas_Wilden__Ortsfamilienbuch_Lammersdorf_Kopie.jpg" alt="Nachkommen von Thomas Wilden Ortsfamilienbuch Lammersdorf Kopie" width="2500" height="13909"></a>

Die Lightbox-Container per css auf "auto"-Größen setzten:

css:

.lb-outerContainer, .lightbox .lb-image { width: auto !important; height: auto !important; }

PS: aber eine so modifizierte lightbox ergibt dann, dass bei mobile-Devices der X-Button halt gesucht werden müsste.

Denke auch, dass es so eine schnelle und verträgliche Variante wäre: target="_blank" …> im neuen Tab oder Fenster

<a target="_blank" href="/images/Genealogie/Nachkommen_von_Thomas_Wilden__Ortsfamilienbuch_Lammersdorf_Kopie.jpg"><img src="/images/Genealogie/Nachkommen_von_Thomas_Wilden__Ortsfamilienbuch_Lammersdorf_Kopie.jpg" alt="Nachkommen von Thomas Wilden Ortsfamilienbuch Lammersdorf Kopie" width="2500" height="13909"></a>

 

[Appelmus]

Danke Difool!
Mein Problem ist aktuell aus der pdf Datei eine jpg Datei zu erzeugen. Wenn ich das mit Vorschau versuche wird aus der 6MB pdf-Datei eine ca 17MB Jpg Datei. Diese Datei zeigt kein Bild.
Ich muß morgen versuchen eine stabile jpg Datei zu erzeugen.