alt-text wird nicht ausgegeben

Fragen zum Erstellen von Templates für webEdition.
m.molitor
Junior Member
Beiträge: 7
Registriert: Fr 15. Sep 2017, 13:39

alt-text wird nicht ausgegeben

Beitragvon m.molitor » Di 7. Nov 2017, 11:32

Unser ehemaliger Programmierer hat uns ein Template mit einem Slider erstellt.
Nun ist es so, dass die Browser den alt-text aller im Slider befindlichen Bilder nicht auslesen können (folglich relativ SEO-unfreundlich).
Meine Vermutung ist, dass es am Template liegt und da etwas nicht optimal angelegt wurde.
Vielleicht können eure sachkundigen Augen mir sagen, ob ich mit meiner Vermutung richtig liege.
Bin selbst nämlich nur Grafiker mit webEdition Grundkentnissen was das Anlegen von Inhalten angeht.

Code: Alles auswählen

<!-- SLIDER -->
<section class="content slider services-slider">
	<ul class="<we:ifNotEditmode>bxslider</we:ifNotEditmode>">
		<we:block name="slider">
			<li>
				<div class="wrapper">
					<div class="<we:ifNotEditmode>slider-wrapper</we:ifNotEditmode>">
						<div class="block">
							<we:ifEditmode>
								Bild links:<br>
								<we:href name="project_url_1" type="int" />
								<we:img name="slider_img_left" width="auto" height="auto" only="src" />
								<we:img name="slider_img_left_hover" width="auto" height="auto" only="src" />
							</we:ifEditmode>
							<we:ifNotEditmode>
							<a href="<we:var type="href" name="project_url_1" />">
								<img class="main-img" src="<we:var type="img" name="slider_img_left" />">
								<img class="hover-img" src="<we:var type="img" name="slider_img_left_hover" />">
							</a>
							</we:ifNotEditmode>
						</div>
						<div class="fourth fourth-left">
							<we:ifEditmode>
								Bild (klein) links:
								<we:href name="project_url_2" type="int" />
								<we:img name="slider_img_fourth_1" width="auto" height="auto" only="src" />
								<we:img name="slider_img_fourth_1_hover" width="auto" height="auto" only="src" />
							</we:ifEditmode>
							<we:ifNotEditmode>
							<a href="<we:var type="href" name="project_url_2" />">
								<img class="main-img" src="<we:var type="img" name="slider_img_fourth_1" />">
								<img class="hover-img" src="<we:var type="img" name="slider_img_fourth_1_hover" />">
							</a>
							</we:ifNotEditmode>
						</div>
						<div class="fourth fourth-right">
							<we:ifEditmode>
								Bild (klein) rechts:
								<we:href name="project_url_3" type="int" />
								<we:img name="slider_img_fourth_2" width="auto" height="auto" only="src" />
								<we:img name="slider_img_fourth_2_hover" width="auto" height="auto" only="src" />
							</we:ifEditmode>
							<we:ifNotEditmode>
							<a href="<we:var type="href" name="project_url_3" />">
								<img class="main-img" src="<we:var type="img" name="slider_img_fourth_2" />">
								<img class="hover-img" src="<we:var type="img" name="slider_img_fourth_2_hover" />">
							</a>
							</we:ifNotEditmode>
						</div>
						<div class="half">
							<we:ifEditmode>
								Bild unten:
								<we:href name="project_url_4" type="int" />
								<we:img name="slider_img_large" width="auto" height="auto" only="src" />
								<we:img name="slider_img_large_hover" width="auto" height="auto" only="src" />
							</we:ifEditmode>
							<we:ifNotEditmode>
							<a href="<we:var type="href" name="project_url_4" />">
								<img class="main-img" src="<we:var type="img" name="slider_img_large" />">
								<img class="hover-img" src="<we:var type="img" name="slider_img_large_hover" />">
							</a>
							</we:ifNotEditmode>
						</div>
					</div>
				</div>
			</li>
		</we:block>
	</ul>
	<div id="slider-prev"></div>
	<div id="slider-next"></div>
</section>
<!-- SLIDER ENDE -->

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: alt-text wird nicht ausgegeben

Beitragvon WBTMagnum » Di 7. Nov 2017, 12:53

Hallo,

Folgendes sollte funktionieren (beispielhafte Umsetzung an einem Bild):

Code: Alles auswählen

<we:ifEditmode>
   Bild links:<br>
   <we:href name="project_url_1" type="int" />
   <we:img name="slider_img_left" width="auto" height="auto" />
   <we:img name="slider_img_left_hover" width="auto" height="auto" />
</we:ifEditmode>
<we:ifNotEditmode>
   <a href="<we:var type="href" name="project_url_1" />">
      <img  class="main-img" 
            src="<we:input type="img" name="slider_img_left" only="src"/>"
            alt="<we:input type="img" name="slider_img_left" only="alt"/>">
      <img  class="hover-img"
            src="<we:input type="img" name="slider_img_left_hover" only="src"/>"
            alt="<we:input type="img" name="slider_img_left_hover" only="alt"/>">
   </a>
</we:ifNotEditmode>
Folgende Anmerkungen dazu:
  • Die Alternativtexte müssen bei den Bildern natürlich befüllt sein.
  • Ich sehe hier weniger ein SEO Problem, mehr ein Problem aus Sicht der Barrierefreiheit.
  • Den Code könnte man noch an weiteren Stellen optimieren (z.B. hover-Umsetzung, Backend Styling, Titel Feld einfügen, etc.). Das ist aber ein anderes Thema ;-).
HTH,
Sascha

m.molitor
Junior Member
Beiträge: 7
Registriert: Fr 15. Sep 2017, 13:39

Re: alt-text wird nicht ausgegeben

Beitragvon m.molitor » Di 7. Nov 2017, 13:16

Vielen Dank, für die schnelle Antwort!
:D
Ich werde das gleich mal versuchen um zu setzen.
Natürlich betrifft das ganze vor allem die Barierrefreiheit, allerdings ist es in unserem Fall auch ein SEO-Problem.

m.molitor
Junior Member
Beiträge: 7
Registriert: Fr 15. Sep 2017, 13:39

Re: alt-text wird nicht ausgegeben

Beitragvon m.molitor » Mi 8. Nov 2017, 10:45

Die Alttexte sind natürlich befüllt, und werden auch brav im Editmode angezeigt.

Leider Funktioniert die Lösung von WBTMagnung bei mir nicht.
Mir werden nun nur noch leere Felder mit dem kleinen blauen Fragezeichen ausgegeben :(
Scheint wohl nicht kompatibel zu sein mit dem Slider.

LG, Monique

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: alt-text wird nicht ausgegeben

Beitragvon WBTMagnum » Mi 8. Nov 2017, 11:43

Hallo Monique,

Nicht verzage. Wie sieht dein Code denn jetzt aus? Was genau meinst du mit "kleinen blauen Fragezeichen"?

Liebe Grüße,
Sascha

m.molitor
Junior Member
Beiträge: 7
Registriert: Fr 15. Sep 2017, 13:39

Re: alt-text wird nicht ausgegeben

Beitragvon m.molitor » Mi 8. Nov 2017, 13:58

Hallo Sascha,

der Slidercode sah nachdem ich deine lösung umgesetzt hat so aus:

Code: Alles auswählen

	<!-- SLIDER -->
<section class="content slider services-slider">
	<ul class="<we:ifNotEditmode>bxslider</we:ifNotEditmode>">
		<we:block name="slider">
			<li>
				<div class="wrapper">
					<div class="<we:ifNotEditmode>slider-wrapper</we:ifNotEditmode>">
						<div class="block">
							<we:ifEditmode>
								Bild links:<br>
								<we:href name="project_url_1" type="int" />
								<we:img name="slider_img_left" width="auto" height="auto" only="src" />
								<we:img name="slider_img_left_hover" width="auto" height="auto" only="src" />
							</we:ifEditmode>
							<we:ifNotEditmode>
							<a href="<we:var type="href" name="project_url_1" />">
								<img class="main-img" 
										 src="<we:input type="img" name="slider_img_left" only="src"/>"
										 alt="<we:input type="img" name="slider_img_left" only="alt"/>">
								<img class="hover-img" 
										 src="<we:input type="img" name="slider_img_left_hover" only="src"/>"
										 alt="<we:input type="img" name="slider_img_left_hover" only="alt"/>>
							</a>
							</we:ifNotEditmode>
						</div>
						<div class="fourth fourth-left">
							<we:ifEditmode>
								Bild (klein) links:
								<we:href name="project_url_2" type="int" />
								<we:img name="slider_img_fourth_1" width="auto" height="auto" only="src" />
								<we:img name="slider_img_fourth_1_hover" width="auto" height="auto" only="src" />
							</we:ifEditmode>
							<we:ifNotEditmode>
							<a href="<we:var type="href" name="project_url_2" />">
								<img class="main-img" 
										 src="<we:input type="img" name="slider_img_fourth_1" only="src"/>"
										 alt="<we:input type="img" name="slider_img_fourth_1" only="alt"/>">
								<img class="hover-img" 
										 src="<we:input type="img" name="slider_img_fourth_1_hover" only="src"/>"
										 alt="<we:input type="img" name="slider_img_fourth_1_hover" only="alt"/>">
							</a>
							</we:ifNotEditmode>
						</div>
						<div class="fourth fourth-right">
							<we:ifEditmode>
								Bild (klein) rechts:
								<we:href name="project_url_3" type="int" />
								<we:img name="slider_img_fourth_2" width="auto" height="auto" only="src" />
								<we:img name="slider_img_fourth_2_hover" width="auto" height="auto" only="src" />
							</we:ifEditmode>
							<we:ifNotEditmode>
							<a href="<we:var type="href" name="project_url_3" />">
								<img class="main-img" 
										 src="<we:input type="img" name="slider_img_fourth_2" only="src"/>"
										 alt="<we:input type="img" name="slider_img_fourth_2" only="alt"/>">
								<img class="hover-img" 
										 src="<we:input type="img" name="slider_img_fourth_2_hover" only="src"/>"
										 alt="<we:input type="img" name="slider_img_fourth_2_hover" only="alt"/>">
							</a>
							</we:ifNotEditmode>
						</div>
						<div class="half">
							<we:ifEditmode>
								Bild unten:
								<we:href name="project_url_4" type="int" />
								<we:img name="slider_img_large" width="auto" height="auto" only="src" />
								<we:img name="slider_img_large_hover" width="auto" height="auto" only="src" />
							</we:ifEditmode>
							<we:ifNotEditmode>
							<a href="<we:var type="href" name="project_url_4" />">
								<img class="main-img" 
										 src="<we:input type="img" name="slider_img_large" only="src"/>"
										 alt="<we:input type="img" name="slider_img_large" only="alt"/>">
								<img class="hover-img" 
										 src="<we:input type="img" name="slider_img_large_hover" only="src"/>"
										 alt="<we:input type="img" name="slider_img_large_hover" only="alt"/>">
							</a>
							</we:ifNotEditmode>
						</div>
					</div>
				</div>
			</li>
		</we:block>
	</ul>
	<div id="slider-prev"></div>
	<div id="slider-next"></div>
</section>
<!-- SLIDER ENDE -->
und hat zu folgendem Ergebnis geführt:
Bildschirmfoto 2017-11-08 um 11.50.33.png
Bildschirmfoto 2017-11-08 um 11.50.33.png (164.65 KiB) 2144 mal betrachtet
Aussehen sollte es nämlich so, und das tut es eigentlich auch (mit dem ursprünglichen Code), nur werden die alt-Texte nicht abgerufen.
Bildschirmfoto-2017-11-08-um-11.50.58.jpg
Bildschirmfoto-2017-11-08-um-11.50.58.jpg (67.25 KiB) 2144 mal betrachtet

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: alt-text wird nicht ausgegeben

Beitragvon WBTMagnum » Mi 8. Nov 2017, 14:50

Ups! Bitte ersetzen:
  • von: <we:input type="img" ....
  • auf: <we:img ....
Dann sollte es wieder klappen.

HTH,
Sascha

PS: Das Attribute only brauchst du im Editmode nicht.

m.molitor
Junior Member
Beiträge: 7
Registriert: Fr 15. Sep 2017, 13:39

Re: alt-text wird nicht ausgegeben

Beitragvon m.molitor » Fr 10. Nov 2017, 16:27

Hallo Sascha,

nun werden die Bilder zwar angezeigt, allerdings zerlegt es genauso die Darstellung, keine Ahnung, warum das passiert.
Bildschirmfoto-2017-11-10-um-15.06.45.jpg
Bildschirmfoto-2017-11-10-um-15.06.45.jpg (248.45 KiB) 2119 mal betrachtet

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: alt-text wird nicht ausgegeben

Beitragvon WBTMagnum » Fr 10. Nov 2017, 17:02

Ich vermute, dass das Bild im falschen <div> eingebettet wurde oder ein <div> davor nicht richtig geschlossen wird. Schau mal in die Console des Browser. Auch ein Blick in den wE Errorlog könnte hilfreich sein.

HTH,
Sascha


Zurück zu „webEdition Templates erstellen (we:Tags)“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 18 Gäste