nicht angemeldet
Rolf B
Rolf B
Rolf B
Matthias Apsel
Auge
Tabellenkalk
Matthias Apsel
Rolf B
Auge
Hallo zusammen,
ich wollte den Google Play und App Store Badge für meine App in einem Footer Widget einfügen. Über folgenden HTML Code habe ich das ganze versucht:
Der Martin<a href="https://apps.apple.com/us/app/circul/id1493479787?itsct=apps_box&itscg=30200">
<p>
<img src="https://mycircul.de/wp-content/uploads/2020/10/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917-e1603456332702.png" alt="Apple App Store - CIRCUL App" />
</p>
</a>
<a href="https://play.google.com/store/apps/details?id=com.circul.ring&gl=DE">
<img src="https://mycircul.de/wp-content/uploads/2020/10/google-play-badge-1.png" width="115px" height="50px" alt="Google Play - CIRCUL App" />
</a>
Das Google Play Badge wird auch ohne Probleme angezeigt...
Ich bedanke mich schonmal im Voraus für alle hilfreichen Antworten 😀
Hallo Mr.Circul,
ich habe dein HTML mal etwas entzerrt, damit man lesen kann was passiert.
"Geht nicht" geht nicht als Fehlerbeschreibung.
Was passiert denn? Welche Probleme treten auf? Hast Du das Netzwerk-Tab der Entwicklerwerkzeuge des Browsers überprüft, um zu schauen, ob ggf. Dateinamen falsch geschrieben sind?
Eine Fehlermöglichkeit könnte sein, dass Du für den Apple Store das <img> in ein <p> Element einhüllst. Warum tust Du das? Ein <a> Element ist zwar vom Inhaltstyp "transparent", d.h. du kannst da so gut wie alles einfüllen, aber was passiert weiter oben in der Hierarchie des HTML Dokuments? Möglicherweise ist ein <p> an dieser Stelle gar nicht zulässig. Ich sehe nicht wirklich den Sinn in diesem Element, im Android-Zweig ist es ja auch nicht drin.
Lass <p> und </p> doch einfach mal weg. Und prüfe, ob das Bild unter dem angegebenen Namen in der angegebenen Schreibweise existiert. Unter Linux ist "foo" eine andere Datei als "Foo".
Rolf
Hi Rolf,
du hast Recht. Jetzt wo du es sagst, ging es ohne das <p> </p>... Ich möchte die beiden Badges nur gerne untereinander haben und ich dachte mit <p> </p> funktioniert es. Bin ehrlich gesagt ein absoluter HTML Anfänger (bringe es mir momentan selber bei).
Hast du eine Idee wie ich die Badges auch ohne <p> </p> untereinander anzeigen kann?
Danke und Gruß
Hallo Mr.Circul,
zunächst mal: Ich habe jetzt einen Blick auf deine Homepage geworfen. Das Apple Store Badge sieht deutlich besser aus, wenn man am <img> Element width="1" height="1" weglässt. Die kommen aber nicht von Dir, sondern von Wordpress und - mutmaßlich - dem Schalter data-recalc-dims. Denn wegen lazyload ist das Bild erstmal nur eine data-URL, die aus einem 1x1 GIF besteht, und erst, wenn man nach unten rollt, wird das echte Bild geladen. Aber dann werden die Dimensionen nicht neu berechnet.
Beim Google-Bild hast Du width="115 px" height="50 px" angegeben. Das ist zwar auch nicht ganz richtig, weil die px Angabe nicht in HTML Attribute gehört, aber das scheint Wordpress zu fixen. Im DOM steht width="115" height="115" - was auch wieder Unsinn ist, height sollte 50 sein, aber das wird vom Wordpress CSS gerettet, da steht height:auto.
Beim Apple-Bild fehlen die width/height Angaben in der HTML Quelle.
Vorschlag: Setze für Google- und Apple Bild width="115", und keine height. Die ist wegen height:auto im CSS nicht nötig.
Und wie setzt man sie untereinander? Das wirst Du wohl mit Mitteln von Wordpress oder Divi machen müssen, und das kennst Du besser als ich. Ich weiß nicht, ob Du an der Stelle stumpfes HTML einsetzt oder Wordpress-Features nutzt. Mit nackigem HTML wäre wohl ein einfacher <br><br> die simpelste Lösung. Wie einfach es ist, mit den eigentlich angemessenen Techniken (Margins, Liste) zu arbeiten, weiß ich nicht.
Die "richtige" Art wäre eine Liste, deren list-style und deren margin/padding auf none gesetzt ist. In die List-Items setzt Du die Links. Und mit margin oder padding auf den List-Items legst Du die Abstände fest.
Ich finde es übrigens unsinnig, an dieser Stelle mit lazyload zu arbeiten. Du hast riesige Bilder drin, die Seite lädt beim Start 4.5MB, da sind die beiden Shop-Links komplett wurscht. Einfach das Bild mit dem finalen src-Attribut einsetzen (im Inhalt ist im data-src Attribut zu finden), lazyload Klasse weg, <noscript> Block weg. Fertig. Du könntest auch die beiden Bilder in data-URLs umwandeln u
Rolf
Hi Rolf,
vielen Dank für die tolle Antwort, auch wenn ich teilweise nur die Hälfte verstehe 😕
Ich habe <p> </p> für <br> ersetzt, die width bei beiden rausgenommen und die height auf "115" gesetzt. Leider wird jetzt keines der beiden Badges mehr angezeigt.
Ob es die richtige Art ist diese Badges einzufügen sei mal dahin gestellt. Es ist halt ein "Individuelles HTML" Widget für den entsprechenden Footer-Bereich.
Lieben Gruß
Hallo Mr.Circul,
ja, da hast Du was nicht verstanden. Es ist aber auch nicht ganz leicht einzusehen.
Du musst unterscheiden zwischen HTML Attributen und CSS Eigenschaften. Ein HTML Attribut steht im HTML mit name="wert" drin. Eine CSS Eigenschaft wird einem HTML Element entweder in der .css Datei zugeordnet, oder innerhalb des style-Attributs notiert.
Und das blöde ist: Manche Dinge gibt es als HTML Attribut und als CSS Eigenschaft. Aber sie sind nicht austauschbar. width und height sind solche Dinge.
Ein <img> Element kann die Attribute width und height bekommen. Das ist in HTML seit Urzeiten so vorgesehen, und es ist unabänderlich, dass diese Werte in Pixeln angegeben werden. Darum ist es nicht vorgesehen und nicht erlaubt, keine Einheit dazu zu schreiben.
Sehr viele Elemente können über CSS die Eigenschaften width und height bekommen. Das gibt es, seit es CSS gibt. Aber CSS braucht Maßeinheiten. Wenn Du Pixel angeben willst, musst Du px hinter den Wert setzen.
Deswegen: entweder <img ... width="115" ...> oder <img style="width:115px">. Wenn Du übrigens das width-Attribut UND die width-Eigenschaft setzt, hat die CSS Eigenschaft Vorrang.
So, nun zu dem, was Du gemacht hast. Hast Du das HTML nochmal geändert, seit Du hier geschrieben hast? Ein <br> sehe ich nämlich nicht. Und das Problem der Breite besteht bei dem Google-Icon, die Angabe style="width:115" steht aber beim Apple-Icon. Und sie steht beim <a> Element, in dem das Apple-Icon steht, das ist unnötig.
Ich kopiere das mal so gut heraus, wie ich kann.
<a href="...google...">
<img alt="Get it on Google Play" data-recalc-dims="1" data-src="..."
class="lazyload" src="...">
<noscript>
<img src="..." alt="Get it on Google Play" data-recalc-dims="1">
</noscript>
</a>
<a href="...apple..." style="width: 115">
<img src="..." alt="Download on the App Store" style= "width: 115">
</a>
(1) Sei konsequent. Entweder machst Du für beide einen noscript-Block, oder für keinen. Der <noscript> Block ist für den Fall da, dass kein JavaScript aktiv ist, das das lazy loading der Bilder ausführt (heißt: die Bilder werden erst geladen wenn man dorthin scrollt). Ich sagte bereits und sage nochmal: Lass das Lazy Loading dieser Bilder weg. Sie sind zu klein, es lohnt nicht.
(2) Lasse data-recalc-dims weg. Ich glaube, das stört hier nur. Die Größe der Bilder ist Dir ja bekannt.
(3) Setze width="115", nicht style="width:115px". Es macht für deinen Fall das Gleiche. Und probiere auch mal aus, ob es nicht auch ganz ohne width Angabe funktioniert, wenn data-recalc-dims nicht mehr da ist.
<h4 class="title">CIRCUL App</h4>
<div class="textwidget custom-html-widget">
<a href="https://play.google.com/store/apps/details?id=com.circul.ring&gl=DE">
<img width="115" alt="Get it on Google Play"
src="https://i2.wp.com/mycircul.de/wp-content/uploads/2020/10/google-play-badge-1.png?w=115&ssl=1" >
</a>
<br>
<a href="https://apps.apple.com/us/app/circul/id1493479787?itsct=apps_box&itscg=30200">
<img width="115" alt="Download on the App Store"
src="***">
</a>
</div>
Die Bildquelle für das Apple-Bild ist fragwürdig. Du holst das Bild von tools.applemediaservices.com, aber von dort bekommst Du nur eine Umleitung auf eine Amazon Cloud Seite. Ruf mal die URL, die Du da angibst, selbst im Browser auf. Du siehst dann, dass Du umgeleitet wirst auf
https://apple-resources.s3.amazonaws.com/media-badges/download-on-the-app-store/black/en-en.svg
Dazu ist der Text im Bild englisch. Kann man fixen: Ändere in der URL das en-en.svg auf de-de.svg. Das Bild, das Du dann bekommst, ist deutsch. Das speicherst Du und lädst es auf deinen eigenen Webspace, genau wie Du es mit dem Google Bild gemacht hast. Und dann setzt Du im <img> Element die Adresse deiner Kopie ein. Dafür gibt's zwei Gründe: (1) willst Du nicht, dass Apple jeden User tracken kann, der deine Seite abruft und (2) ist eine Redirection in einem Bildzugriff eine unnötig zeitraubende Sache. Wenn das Badge von Apple so generiert wird - hm. Bist Du verpflichtet, den generierten Code 1:1 einzusetzen?
Auch dein Google-Badge ist englisch. Das bekommt man sicherlich auch auf deutsch.
Rolf
Hallo Rolf B,
Darum ist es nicht vorgesehen und nicht erlaubt, keine Einheit dazu zu schreiben.
Hier ist ein k zu viel.
Bis demnächst
Matthias
Hallo
Darum ist es nicht vorgesehen und nicht erlaubt, keine Einheit dazu zu schreiben.
Hier ist ein k zu viel.
… und zwei „nicht“.
Tschö, Auge
Hallo,
Darum ist es nicht vorgesehen und nicht erlaubt, keine Einheit dazu zu schreiben.
Hier ist ein k zu viel.
… und zwei „nicht“.
Hast du dich jetzt in den Negationen verlaufen oder willst du tatsächlich behaupten, dass Einheiten erlaubt sind? Was wäre deine Quelle dafür?
Gruß
Kalk
Hallo Tabellenkalk,
Hast du dich jetzt in den Negationen verlaufen oder willst du tatsächlich behaupten, dass Einheiten erlaubt sind? Was wäre deine Quelle dafür?
Eine Einheit ist erlaubt, nämlich %.
Bis demnächst
Matthias
Hallo Tabellenkalk,
ich war auch erstmal verwirrt. % wird akzeptiert, ja, und es steht in der HTML 4 Spec. In der HTML 5 Spec finde ich es nicht mehr. Dort steht nur noch:
4.7.16 Dimension Attributes
Author requirements: (...) The attributes, if specified, must have values that are valid non-negative integers.
Die % Angabe scheint mir HTML 4 Rückwärtskompatibilität zu sein.
width="40px" wird von Chrome tatsächlich auch akzeptiert, aber nur deshalb, weil er aufhört zu scannen, wenn das Pattern /\d+%?/ nicht mehr passt. Ich kann auch width="40em" hinschreiben. Aber das wird wie 40px verarbeitet.
Rolf
Hallo,
In der HTML 5 Spec finde ich es nicht mehr. Dort steht nur noch:
4.7.16 Dimension Attributes
Author requirements: (...) The attributes, if specified, must have values that are valid non-negative integers.
ich fand einen Verweis auf das Parsen dieser non-negative Integers, wo der Algorithmus beschrieben war, der einen Fehler liefern soll, wenn er kein "digit" (mehr) findet. Zählt "%" als "digit"?
Gruß
Kalk
Hallo Tabellenkalk,
Zählt "%" als "digit"?
In meiner Codepage nicht 😉
Rolf
Hallo
Zählt "%" als "digit"?
In meiner Codepage nicht 😉
Hehe.
Nicht, dass ich der Meinung wäre, Prozentangaben als Breiten- oder Höhenangabe in den entsprechenden HTML-Attributen wären eine gute Idee [1], sie werden aber von allen grafischen Browsern interpretiert. Auch wenn sie im HTML5-Standard nicht mehr erwähnt werden, zuvor gab es diese Möglichkeit explizit und deshalb werden sie von den Browsern wohl bis in alle Ewigkeit unterstützt.
Tschö, Auge
Ausnahmen mögen diese Regel bestätigen. ↩︎
Hallo
Nur als Ergänzung.
Ein <img> Element kann die Attribute width und height bekommen. Das ist in HTML seit Urzeiten so vorgesehen, und es ist unabänderlich, dass diese Werte in Pixeln angegeben werden.
Öhhm, nein. Der Wert kann als Anzahl von Pixeln eingetragen werden, wobei dann keine Einheit notiert wird oder aber als Prozentwert und dann kommt als Unterscheidungsmerkmal zu Pixelangaben doch eine Einheit (%) hinter dem Wert hinzu.
Darum ist es nicht vorgesehen und nicht erlaubt, keine Einheit dazu zu schreiben.
Wie, was? Hast du dich in deinem Satzaufbau verfangen? 😀
Es ist sowohl vorgesehen als auch erlaubt, eine Einheit in Längenangaben zu verwenden. Das gilt aber nur und ausschließlich für Prozentangaben. Ansonsten gibt es bei Längenangaben in HTML-Attributen nur Pixelwerte und die müssen ohne Einheit notiert werden.
Sehr viele Elemente können über CSS die Eigenschaften width und height bekommen. Das gibt es, seit es CSS gibt. Aber CSS braucht Maßeinheiten. Wenn Du Pixel angeben willst, musst Du px hinter den Wert setzen.
Jep.
(3) … Und probiere auch mal aus, ob es nicht auch ganz ohne width Angabe funktioniert, wenn data-recalc-dims nicht mehr da ist.
Ich halte das weglassen der HTML-Attribute width und height für das img-Element für schlechten Stil. Ihre Anwesenheit reserviert in grafischen Browsern von vornherein den für das Bild vorgesehenen Platz. Damit wird das springen von Seiteninhalten beim laden von Bildern verhindert.
Die Attributwerte können ja, wie du selbst schon beschriebst, problemlos im CSS überschrieben werden. Das kann bei schlecht gewählten Werten natürlich ein neuerliches springen von Inhalten auslösen. Das sollte man im Hinterkopf behalten.
Die Bildquelle für das Apple-Bild ist fragwürdig.
[speichern des AppStore-Logos auf eigenem Webspace] Dafür gibt's zwei Gründe: (1) willst Du nicht, dass Apple jeden User tracken kann, der deine Seite abruft …
Nicht zu vegessen, für Amazon gilt exakt das gleiche Argument.
Tschö, Auge
Nochmal vielen Dank für all die Antworten! Ich bin zuversichtlich, dass ich mit eurer Hilfe zu einer Lösung komme.
Das ist jetzt der Code den ich in dem Custom HTML Widget stehen habe:
<a href="https://apps.apple.com/us/app/circul/id1493479787?itsct=apps_box&itscg=30200" ><img src="https://mycircul.de/wp-content/uploads/2020/10/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917-e1603456332702.png" width="115" alt="Download on the App Store" style= "width: 115"></a>
<br>
<a
href="https://play.google.com/store/apps/details?id=com.circul.ring&gl=DE"><img src="https://mycircul.de/wp-content/uploads/2020/10/google-play-badge-1.png" width="115" alt="Get it on Google Play"></a> hier
Lazyload und no-script kann bzw. weiß ich nicht wie ich es rausnehmen kann, da ich wie gesagt nur mit dem Pagebuilder arbeite...Mit dem Code, wie ich ihn hier reinkopiert habe, wird gar nichts mehr angezeigt...
Hallo Mr.Circul,
da ich wie gesagt nur mit dem Pagebuilder arbeite...
okay. Also stelle ich mich mal ganz dumm. Weil: ich habe keine Ahnung, was Pagebuilder ist. Weil ich kein Wordpresser bin.
Verstehe ich das richtig, dass Du das HTML, das Du da oben angegeben hast, 1:1 so als "Custom Widget" in ein Eingabefeld des Pagebuilders einträgst?
Rolf
Genau. Es gibt das Widget "Custom HTML", dort habe ich den obenstehenden Code eingetragen.
Hallo Mr.Circul,
okay.
tieflufthol
Tust Du nicht. Zumindest hast Du es nicht publiziert. Wenn ich die Seite aufrufe, kommt was ganz anderes.
Dann tu doch bitte, was ich Dir vorgeschlagen habe, und mach nicht irgendwas anderes hinein.
Die Lazyload Logik benötigt, so wie ich das sehe, folgende Bausteine:
Aber es passt nicht mit data-recalc-dims zusammen. Dieses Attribut scheint Wordpress dazu zu bewegen, width und height beim Laden der Seite zu berechnen und an das img Element zu kleben. In dem Moment ist aber noch das 1x1 Bild da. Der Lazyloader ersetzt die width- und height Attribute aber nicht, und darum siehst Du nichts. Deshalb: Weg mig data-recalc-dims, und feste Angabe von width="115".
Wenn Du auf Lazy Loading verzichtest, wird alles viel kompakter.
Wenn Du in mein Posting von heute 10:24 schaust, dann nimm nur den zweiten Beispielblock. Der erste ist eine Kopie dessen, was ich bei Dir fand, und keine Vorlage. Ich mach das gleich noch rot und grün.
Rolf
Hallo,
- Von `style="width: 115" habe ich abgeraten.
vom Abraten ganz abgesehen ist es falsch, denn im Unterschied zu HTML ist in CSS eine Einheit zwingend vorgeschrieben.
Live long and pros healthy,
Martin