App Store Badge wird nicht angezeigt

[Rolf B]

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&#038;ssl=1" >
</a>
<br>
<a href="https://apps.apple.com/us/app/circul/id1493479787?itsct=apps_box&amp;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