[Wordpress PHP/HTML] img links werken niet

[ExilaaHH]

Hallo tweakers,

Het volgende probleem doet zich voor:

Ik ben bezig met een nieuwe website. Op deze website wil ik een menu balk met in plaats van tekst linkjes afbeelding linkjes
Om dat te doen gebruik ik de volgende code:

<a href="index.html"> <img src="Images/Bear.bmp" height="96" width="96"> </a>

Ik de grootte van de betreffende div, menu extra groter gemaakt zodat er genoeg ruimte is voor de afbeelding

Echter in Firefox toont hij een leeg vak (welke de grootte heeft van wat ik heb aangegeven in de css)
En in Internet explorer toont hij een vak met omleining met daarin een klein rood kruisje(het gebruikelijke)

Wat heb ik zelf geprobeerd:
Gekeken of ik geen fouten heb gemaakt in extensies van afbeeldingen
Gekeken of ik geen fouten heb gemaakt in Hoofdletters
Gekeken of de mappen kloppen
Gekeken of de afbeelding uberhaubt getoont kan worden
-Ik heb de afbeelding in de CSS als background-image gedaan waarna hij wel werkte
Regelrecht code van het internet gekopieerd die het zelfde doet zonder succes
Een aantal dingen geprobeerd met ../image/Bear.bmp en Image in plaats van image maar ook zonder succes.


Hopelijk kan iemand mij verder helpen en mij de gouden tip bezorgen.
Mocht er informatie gewenst zijn of missen hoor ik dat graag

[RobIII]

Als je eens kijkt met een tool als Firebug/IE F12 Dev.tools/Chrome Dev.tools/Safari Dev.tools/Opera Dragonfly/Fiddler2 dan zie je geheid een 404 voorbij komen. 10 tegen 1 dat je pad verkeerd is of inderdaad een fout in hoofd/kleine letters.

ExilaaHH schreef op maandag 19 september 2011 @ 23:35:
Een aantal dingen geprobeerd met ../image/Bear.bmp en Image in plaats van image maar ook zonder succes.

Zomaar wat geprobeerd of gericht, wetende waar je mee bezig bent, geprobeerd?

Sidenote: je beseft dat .bmp niet het handigste formaat is om te gebruiken op 't web?

[ Voor 24% gewijzigd door RobIII op 19-09-2011 23:38 ]

[ExilaaHH]

Dat dacht ik zelf ook. Ik heb met teamviewer ook een aantal anderen naar het probleem laten kijken. Ook hun konden geen fout pad vinden.
Ik ga verder direct even kijken met Firebug!

[RobIII]

ExilaaHH schreef op maandag 19 september 2011 @ 23:38:
Dat dacht ik zelf ook. Ik heb met teamviewer ook een aantal anderen naar het probleem laten kijken. Ook hun konden geen fout pad vinden.
Ik ga verder direct even kijken met Firebug!

Heb je een url met een testcase?

[Vos]

Als je de directe link naar het plaatje gebruikt i.p.v. bijvoorbeeld images/plaatje.jpg dan sluit je dat ook al uit. Kan niet helemaal opmaken of je dat geprobeerd hebt.

Maar zoals Rob zegt een url zou handig zijn...nu is het beetje gissen.

[ExilaaHH]

Ik draai deze website local helaas,

Mijn kennis bij firebug is niet erg groot maar hij zegt het volgende wanneer ik met de muis op een van de afbeeldingen sta:

Laden ingegeven url mislukt

Deze url verwijst echter naar een website welke gewoon online staat en de afbeelding staat ook gewoon in de juiste map.

Ik zal er verder even voor zorgen dat de website online wordt geplaatst zodat jullie je advies beter kunnen geven

[ Voor 15% gewijzigd door ExilaaHH op 19-09-2011 23:46 ]

[RobIII]

ExilaaHH schreef op maandag 19 september 2011 @ 23:44:
Mijn kennis bij firebug is niet erg groot maar hij zegt het volgende wanneer ik met de muis op een van de afbeeldingen sta:

Je ziet ook gewoon http-statuscodes. Als het goed is zie je daar een 404 oid.

Als je op 't plusje klikt voor de URL moet je ook de headers kunnen zien (request / response) onder het headers tabje (linkse pijk):

En als je op 't response tabje (rechtse pijl) klikt moet je de afbeelding zien.

ExilaaHH schreef op maandag 19 september 2011 @ 23:44:

Deze url verwijst echter naar een website welke gewoon online staat en de afbeelding staat ook gewoon in de juiste map.

Dus als je op de URL (in firebug) klikt krijg je de afbeelding te zien?

[ Voor 29% gewijzigd door RobIII op 19-09-2011 23:53 ]

[ExilaaHH]

ik heb de website online geplaatst onder : www.test.marcschuurman.nl

Ik ga nu naar jou aanwijzingen kijken roblll

[RobIII]

ExilaaHH schreef op maandag 19 september 2011 @ 23:53:
ik heb de website online geplaatst onder : www.test.marcschuurman.nl

Ik ga nu naar jou aanwijzingen kijken roblll

Die geven dus een 404...
http://test.marcschuurman.nl/Images/Bear.bmp bestaat dus niet; dat is:
a) een hoofd/kleine letters probleem
b) een pad probleem (verkeerde directory (al dan niet relatief/absoluut))
c) een typo ergens in 't pad
d) een rechten probleem op (een deel van) 't pad/afbeelding
e) een rewrite probleem
f) niet-geupload probleem

De kop komt in ieder geval uit http://test.marcschuurman.nl/wp-content/themes/SanneTheme/images/Banner.jpg .... -> antwoord b

http://test.marcschuurman...anneTheme/images/Bear.bmp

[ Voor 62% gewijzigd door RobIII op 20-09-2011 00:00 ]

[Morrar]

Gewoon even voor de zekerheid: je werkt lokaal op een windhoosbak en online op een Linux / Unix / BSD bak? Want het gebeurt zo vaak dat mensen niet op hun hoofdletters letten. Dus ook gecheckt of het Bear.bmp of bear.bmp is?

Idem voor images of Images (je geeft trouwens aan dat je ook image en Image hebt geprobeerd, maar zonder s)

EDIT: op die server staan geen van deze plaatjes.

[ Voor 7% gewijzigd door Morrar op 19-09-2011 23:57 ]

[ExilaaHH]

@Roblll enig idee hoe ik dat oplos? want in mijn optiek doe ik eigenlijk alles goed

@Morrar Ik heb erg goed op de hoofdletters gelet, ook als ik in de adresbalk de naam van het plaatje invoer :

http://test.marcschuurman...anneTheme/images/Bear.bmp

Dan werkt deze ook.

Erg vreemd dus ook als je die link vergelijkt met de html code zie je dat deze goed overeenkomt

[Morrar]

Ja maar die komt uit de URL:
http://test.marcschuurman...anneTheme/images/Bear.bmp

En de HTML haalt em uit:
http://test.marcschuurman.nl/images/Bear.bmp

Kortom als src moet je dan doen:
src="/wp-content/themes/SanneTheme/images/Bear.bmp"

[ Voor 46% gewijzigd door Morrar op 19-09-2011 23:59 ]

[RobIII]

ExilaaHH schreef op maandag 19 september 2011 @ 23:57:
@Roblll enig idee hoe ik dat oplos?

Door basisles 1 HTML en relatieve/absolute paden door te nemen (en eventueel te kijken naar base, maar dat is les 2). Elk ander antwoord is prut.
[google=html absolute relative paths]

Waarom 't in je CSS wél werkt? Omdat die staat in /wp-content/themes/SanneTheme/ en je een relatief pad (vanuit die CSS, niet de 'HTML'), namelijk images/Bear.bmp, gebruikt.

Ik zie overigens in je HTML de ene keer images en dan weer Images. Wees consequent en make up your mind

[ Voor 51% gewijzigd door RobIII op 20-09-2011 00:06 ]

[Morrar]

Met andere woorden, je structuur is zo

code:

<test.marcschuurman.nl>
|
+ index.html
|
+ wp-content
        |
        + SanneTheme
                |
                + images
                    |
                    + Bear.bmp

Terwijl je HTML Zoekt naar:

code:

<test.marcschuurman.nl>
|
+ index.html
|
+ images
    |
    + Bear.bmp

[ Voor 6% gewijzigd door Morrar op 20-09-2011 00:04 ]

[ExilaaHH]

Waar het nu dus eigenlijk op neer komt is dat ik deze code:

<a href="index.html"> <img src="Images/Bear.bmp" height="96" width="96"> </a>

Verander na dit :

<a href="index.html"> <img src="http://test.marcschuurman.nl/wp-content/themes/SanneTheme/images/Bear.bmp" height="96" width="96"> </a>

Nog even teruggaand op die http codes.
Ik heb je beide afbeeldingen bekeken alleen mist bij mij het tabblad all

Ik kan dus eigenlijk niet die http codes bekijken of ik zie iets over het hoofd(wat zeker zo is )

[RobIII]

ExilaaHH schreef op dinsdag 20 september 2011 @ 00:05:
Waar het nu dus eigenlijk op neer komt is dat ik deze code:

<a href="index.html"> <img src="Images/Bear.bmp" height="96" width="96"> </a>

Verander na dit :

<a href="index.html"> <img src="http://test.marcschuurman.nl/wp-content/themes/SanneTheme/images/Bear.bmp" height="96" width="96"> </a>

Nee.

Ja, het kan. Maar je hebt overduidelijk niet de moeite genomen je te verdiepen in relatieve en absolute paden. En dan zie ik niet waarom ik (of wij) nog meer zou moeten uitleggen/hinten.

ExilaaHH schreef op dinsdag 20 september 2011 @ 00:05:
Nog even teruggaand op die http codes.
Ik heb je beide afbeeldingen bekeken alleen mist bij mij het tabblad all

Heb je de bovenste tab-rij op "Net" staan? En als je dan nog steeds geen "all" ziet klik je toch gewoon op HTML/Images e.d.

ExilaaHH schreef op dinsdag 20 september 2011 @ 00:05:
Ik kan dus eigenlijk niet die http codes bekijken of ik zie iets over het hoofd(wat zeker zo is )

Jawel, daar is een tool als Firebug nou net voor; dat jij niet weet hoe je 'm moet gebruiken is iets anders HTTP status codes zijn juist om meer informatie te verschaffen over een probleem (waar mogelijk).

[ Voor 42% gewijzigd door RobIII op 20-09-2011 00:11 ]

[Morrar]

Nou fruit voor het slapen doe ik nog een schot dan:

Relatieve paden worden gerekend *vanaf het bestand waarin ze aangeroepen worden*.
Dus src="images/Bear.png" in index.html gaat zoeken vanuit de directory waar index.html in staat (root)
En background-image: url('images/Bear.png') in mijnstijl.css gaat zoeken vanuit de directory waar mijnstijl.css staat

Dus als index.html en mijnstijl.css in dezelfde directory staan, zoeken ze naar dezelfde bestand.
Staan ze in verschillende directories, dan komen ze ook bij andere bestanden uit (of vinden ze het bestand niet).

[ExilaaHH]

Daar heb ik mij inderdaad niet in verdiept. Wat ik bij deze dus ook ga doen.

Waar ik verder vanuit ging was dat mijn thema map in deze dus Sannetheme de root map was.
Daardoor ging ik ervanuit dat ik dan de volgende code moest doen voor afbeeldingen:

images/afbeelding.jpg

Wat dus nu niet het geval blijkt te zijn (of dit moet duidelijk worden uitgelegt in dat relatieve en absolute paden verhaal)
Het vreemde is voor een vorig project met wordpress kon dit gewoon wel.

[RobIII]

ExilaaHH schreef op dinsdag 20 september 2011 @ 00:11:
Daar heb ik mij inderdaad niet in verdiept. Wat ik bij deze dus ook ga doen.

ExilaaHH schreef op dinsdag 20 september 2011 @ 00:11:
Waar ik verder vanuit ging was dat mijn thema map in deze dus Sannetheme de root map was.
Daardoor ging ik ervanuit dat ik dan de volgende code moest doen voor afbeeldingen:

[google=assumptions are the mother]
Meten == weten

ExilaaHH schreef op dinsdag 20 september 2011 @ 00:11:
Wat dus nu niet het geval blijkt te zijn (of dit moet duidelijk worden uitgelegt in dat relatieve en absolute paden verhaal)

Dat wordt het Zo niet, andere link klikken want dan heb je een gare uitleg.

ExilaaHH schreef op dinsdag 20 september 2011 @ 00:11:
Het vreemde is voor een vorig project met wordpress kon dit gewoon wel.

Die maakte dan geheid gebruik van base.

[ Voor 8% gewijzigd door RobIII op 20-09-2011 00:14 ]

[ExilaaHH]

Zoals ik zei heb ik direct even opgezocht wat betreft relatieve en absolute paden.
Eigenlijk direct al een perfecte uitleg gevonden waardoor het voor mij nu eigenlijk helemaal duidelijk is

Iniedergeval bedankt voor de uitleg en hints om mij opweg te helpen naar een goede website

@morrar Bedankt voor de duidelijke uitleg en slaapse
@Roblll Bedankt voor al je duidelijk uitleg met plaatjes e.d. wordt erg op prijs gesteld!

Nou dat firebug nog eens even goed bestuderen en dan ben ik weer een vrolijk man, zoals ik er nu op een uitermate fijn programma op bugs te vinden. bedankt voor de hint!

[Hiroj]

Je kunt het beste op de volgende manier je afbeeldingen (in de thema map) aanroepen:

HTML:

<img src="<?php bloginfo('template_url');?>/images/mijnafbeelding.jpg" alt="" title="" />

Mocht je eventueel je thema op een ander domein installeren, dan hoef jij verder niks meer aan te passen :-)
Gezien je een eigen thema maakt, dien je altijd de handleiding van wordpress door te nemen voor dit soort stuff. Alles staat daar gewoon in.

[ExilaaHH]

Hiroj bedankt voor die handige code.

Wat betreft die handleidingen, Het is mij zo op school aangeleerd tijdens een Wordpress project en het is mijn dus verkeerd aangeleerd. Doordat ik uitleg op school kreeg achtte ik een wordpress handleiding niet nodig, vandaar:)

[Hiroj]

ExilaaHH schreef op dinsdag 20 september 2011 @ 12:03:
Hiroj bedankt voor die handige code.

Wat betreft die handleidingen, Het is mij zo op school aangeleerd tijdens een Wordpress project en het is mijn dus verkeerd aangeleerd. Doordat ik uitleg op school kreeg achtte ik een wordpress handleiding niet nodig, vandaar:)

Ahh vandaar. Je moet nooit vanuit gaan dat je school jou alles op de juiste manier aanleert.
Vat het volgende niet als commentaar op, maar het is ook een stukje van jou verantwoordelijkheid om te onderzoeken wat betere methodes zijn. Leraren zullen hier op geilen