Welkom bij Joomla!NL

Om alle mogelijkheden van dit forum te kunnen gebruiken, moet je je eerst registreren.

Vermeld in iedere vraag duidelijk:
  1. De versie van Joomla! 3.X die je gebruikt
  2. De volledige url van je website indien mogelijk.
  3. De versie van de extensie waar de vraag over gaat.

Foto in Artikel

Foto in Artikel

18 mei 2018 23:52 - 19 mei 2018 11:54
#1
Ik weet even niet meer of dit nu wel of niet kan.

Ik heb het volgende;
Code:
<img alt="Mysterious, Planet X" dir="ltr" lang="nl" src="images/klein/dec2015/trans-neptunian-objects.png" style="width: 250px; height: 180px;" title="te trans-neptunian twee van veel verder waarschijnlijk wachten" lang="nl" />

In de verwijzing van een foto, staat ook de title, alt, dir en lang.

Goed ik wil dus de foto in css zetten, maar ik wil wel dat de title, alt en dir erin blijft staan.
Deze weet ik wel
Code:
<span class="foto1"></div>
maar dan ben ik wel de title, alt, dir en lang kwijt.

Hoe moet ik dit doen, om de foto in css te krijgen.

Hartelijk dank alvast voor de genomen moeite.

Edit Jelle: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.
Laatst bewerkt 19 mei 2018 11:54 door Jelle.
  • JoopMantel
  • JoopMantel's Profielfoto Heeft onderwerp gestart
  • Bezoeker
  • Bezoeker

Foto in Artikel

19 mei 2018 05:56
#2
De info die je bij de afbeelding wilt hebben wordt gebruikt om een pagina goed te kunnen indexeren in google. Google leest echter alleen html en niet css, dus de extra info is niet nodig. Ik ben wel benieuwd waarom je de extra info erbij wilt hebben en wat de reden is om een afbeelding in css te gaan verwerken.
Gemarkeerd als webneus door: Astrid
  • pjasmits
  • pjasmits's berichtenfoto
  • Bekend met Joomla!NL
  • Bekend met Joomla!NL
  • Berichten: 177

Foto in Artikel

19 mei 2018 11:52 - 19 mei 2018 11:53
#3
Alle gegevens die worden toegevoegd aan een foto, is belangrijk voor zoekmachines om te laten weten waar de foto over gaat.
De snelheid voor het laden van een pagina wordt hiermee ook verhoogt.

Ik heb het zelf nog niet geprobeerd, maar ik dacht dat het wellicht mogelijk is om een class="" toe te voegen in <img
Code:
<img alt="Mysterieus, Planeet" dir="ltr" lang="nl"[b] class="foto1"[/b] style="width: 250px; height: 180px;" title="te trans-neptunian twee van veel verder waarschijnlijk wachten" lang="nl" />

Edit Jelle: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen!
Laatst bewerkt 19 mei 2018 11:53 door Jelle.
  • JoopMantel
  • JoopMantel's Profielfoto Heeft onderwerp gestart
  • Bezoeker
  • Bezoeker

Foto in Artikel

19 mei 2018 12:37
#4
Wat wil je dan bereiken met die class? Als je de afbeelding invoegt met JCE en alle velden netjes invult, dan heb je toch alle benodigde info in je html staan?
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37060

Foto in Artikel

19 mei 2018 13:27
#5
Besef ook dat als je meerdere foto's opneemt, moet je dus iedere foto een aparte class opgeven en vervolgens voor die iedere class ook css regels.
Je css bestand wordt dan volgens mij ook onnodig groot. Bij het laden van de website(pagina) wordt ook je volledige css ingelezen, wat mijn inziens ook onnodige laadtijd inneemt.
Mijn inziens onnodig werk en werkt mogelijk fouten in de hand.

Overigens ik weet ook niet of het zo wel juist werkt. Zelf zeg je dat je het nog niet geprobeerd hebt. Probeer het dus eerst zelf eens en kijk of het naar jouw wensen werkt.
Groeten, Romke
Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen uitsluitend via dit Forum
Is je vraag opgelost? Dan kan je hem zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

  • Romke
  • Romke's Profielfoto
  • Algemeen Moderator
  • Algemeen Moderator
  • Berichten: 3629

Foto in Artikel

19 mei 2018 13:39 - 19 mei 2018 13:43
#6
@Romke
Sinds CSS3 is het mogelijk meerdere beelden via css aan een class toe te voegen.
Wel is het zo dat inderdaad alle css gelezen wordt en dat dit dus niet echt snelheid verhogend is voor het laden.

@JoopMantel
Een beeld laden blijft een beeld laden of deze nu via css geladen wordt of via html dat geeft geen snelheidsverhoging.
Bij elke htm lpagina wordt de css geladen, als het beeld niet in de html-pagina, maar in de css staat wordt deze geladen,
dan zal voor de overige pagina's waar het beeld niet in staat deze toch geladen worden,
wat dus betekent dat de complete site niet sneller, maar juist trager wordt.

Je kunt geen class toevoegen aan een img, dus alleen een dir, alt toevoegen aan een class is er ook niet bij.
Kortom, wat je wil zal niet lukken. Een alt en een dir kun je niet toevoegen aan een beeld wat via css wordt geladen.
Ik gebruik alleen achtergrond images of repeterende afbeeldingen in css, dat vind ik makkelijk en die hebben dus ook geen alt nodig.


Voorbeeld van een in css geladen beeld:
Code:
.class { background-image: url("images/template/image.jpg"); background-repeat: no-repeat; background-position: right 20px top 10px; position: relative; top: -10px; }
Laatst bewerkt 19 mei 2018 13:43 door pjasmits.
  • pjasmits
  • pjasmits's berichtenfoto
  • Bekend met Joomla!NL
  • Bekend met Joomla!NL
  • Berichten: 177

Foto in Artikel

19 mei 2018 15:12 - 19 mei 2018 15:15
#7
Het gaat om 1 foto per artikel


Op de gehele pagina staan 8 artikelen zoals op de foto is weergegeven, om dus een beetje meer snelheid te krijgen dacht ik dus aan een css bestand. Echter ik wil dus juist wel de title, alt en andere informatie behouden. nu kan ik wel uit het voorbeeld van pjasmits gebruiken echter dan vervalt alle info van de foto.

Zodra ik dit dus zo ga gebruiken
Code:
<img alt="Mysterieus, Planeet" dir="ltr" lang="nl"[b] class="foto1"[/b] title="te trans-neptunian twee van veel verder waarschijnlijk wachten" lang="nl" />

lijkt mij juist dat dan de info blijft bestaan van de foto, de rest wat de foto nodig heeft kan inderdaad in een css bestand toegevoegd worden zoals pjasmits heeft aangegeven.
Code:
.class { background-image: url("images/template/image.jpg"); background-repeat: no-repeat; background-position: right 20px top 10px; position: relative; top: -10px; }

Over welke JCE component spreekt u eigenlijk?
Edit Astrid: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

Dit bericht bevat een afbeelding als bijlage.
Log in of registreer om die te bekijken

Laatst bewerkt 19 mei 2018 15:15 door Astrid.
  • JoopMantel
  • JoopMantel's Profielfoto Heeft onderwerp gestart
  • Bezoeker
  • Bezoeker

Foto in Artikel

19 mei 2018 15:23 - 19 mei 2018 15:32
#8
Klopt helemaal met een class="foto" toe te voegen in een
Code:
<img alt="Mysterieus, Planeet" dir="ltr" lang="nl" [color=red][b]class="foto1"[/b][/color] title="te trans-neptunian twee van veel verder waarschijnlijk wachten" lang="nl" />
foto wordt dan niet vertoond, sjips

Ik weet dat met een
Code:
<div class="foto"></div>
dat wel werkt, maar dan bent men alle info kwijt van de foto.

Edit Jelle: Nogmaals!!! Ik heb de code tussen codetags geplaatst, volgende keer zelf doen!!
Laatst bewerkt 19 mei 2018 15:32 door Jelle.
  • JoopMantel
  • JoopMantel's Profielfoto Heeft onderwerp gestart
  • Bezoeker
  • Bezoeker

Foto in Artikel

19 mei 2018 16:29 - 19 mei 2018 18:16
#9
Dat is precies wat er in mijn vorig antwoord ook al stond.
Je bent inderdaad de alt, dir en title kwijt.
Probeer eens andersom:
Code:
<div class="foto1"> <img alt="Mysterieus, Planeet" dir="ltr" lang="nl" title="te trans-neptunian twee van veel verder waarschijnlijk wachten" lang="nl" /> </div>
Laatst bewerkt 19 mei 2018 18:16 door Astrid.
  • pjasmits
  • pjasmits's berichtenfoto
  • Bekend met Joomla!NL
  • Bekend met Joomla!NL
  • Berichten: 177

Foto in Artikel

19 mei 2018 17:00 - 19 mei 2018 18:14
#10
@pjasmits

Ik heb het geprobeerd, en dit is dan wel het resultaat in het script gedeelte.


De foto laat hij natuurlijk zien, echter wel de vraag of dan ook de rest meegenomen wordt door een zoekmachine.

Hummm, even iets gecontroleerd bij w3

Bijlage niet gevonden



Niet goed dus, heel jammer.

Toch wel spijtig, dat in een css bestand niet eraan toegevoegd kan worden de alt, title, lang en zo verder.

Ik denk dat ik zelf er eens goed erover na moet denken, om alles zo te laten als het is, en of alles in een css bestand te plaatsen en de rest te laten vervalen waarover het eigenlijk ging.

Was trouwens een zeer goed idee, dank je wel voor het mee denken stel ik zeer op prijs.
Edit Astrid: Ik heb je berichten samengevoegd. Het is niet de bedoeling dat je hier een dagboek bijhoudt!

Dit bericht bevat een afbeelding als bijlage.
Log in of registreer om die te bekijken

Laatst bewerkt 19 mei 2018 18:14 door Astrid.
  • JoopMantel
  • JoopMantel's Profielfoto Heeft onderwerp gestart
  • Bezoeker
  • Bezoeker

Foto in Artikel

19 mei 2018 17:30
#11
Even uit nieuwsgierigheid, maar wat gebeurd er als de code er als volgt uitziet?

Code:
<div class="foto1" alt="Mysterieus, Planeet" dir="ltr" lang="nl" title="te trans-neptunian twee van veel verder waarschijnlijk wachten" lang="nl"> </div>

Zou je eens willen kijken?
  • pjasmits
  • pjasmits's berichtenfoto
  • Bekend met Joomla!NL
  • Bekend met Joomla!NL
  • Berichten: 177

Foto in Artikel

19 mei 2018 17:33 - 19 mei 2018 18:05
#12
Mijn hemel zeg wat een wellicht briljant idee, en wellicht zal dat ook wel eens kunnen werken. Ik laat het zo even weten.
Edit Astrid: Ik heb het citaat verwijderd. Het quoten van direct voorafgaande reacties voegt niets toe.
Laatst bewerkt 19 mei 2018 18:05 door Astrid.
  • JoopMantel
  • JoopMantel's Profielfoto Heeft onderwerp gestart
  • Bezoeker
  • Bezoeker
Moderators: PeterJuliank92JelleRomke
Tijd voor maken pagina: 1.061 seconden

Wil je Joomla!NL steunen?

Steun Joomla!NLAlle teamleden werken enthousiast, op vrijwillige basis, mee aan Joomla!NL. Maar een website met forum kost nu eenmaal geld. Dus als je Joomla!NL wilt steunen, dan kan dat, graag zelfs!

Lees hier meer informatie