css id uniek maken

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

css id uniek maken

Post by Gregor »

In de w3c-validator kom ik bij het valideren van een blog-pagina de volgende meldingen tegen:
Error: Duplicate ID socialmediashare1.
From line 427, column 1; to line 427, column 49
gina</h4>↩<div class="social_share" id="socialmediashare1">↩ <di
Warning: The first occurrence of ID socialmediashare1 was here.
From line 222, column 1; to line 222, column 49
gina</h4>↩<div class="social_share" id="socialmediashare1">↩ <di
Vanuit een artikel roep ik een 'foto-udt' aan met daarin o.a.:

Code: Select all

$mod = cms_utils::get_module('CGSmartImage'); // make sure the module is loaded
$cgblog = cms_utils::get_module('CGBlog');  // changed this line.
$gCms = cmsms();
$image_heigth = 170;
$large_size = 640;
$path = 'uploads/images/';
$noremote = 'noremote=""';
$noembed = 'noembed=""';
$action = 'responsive';
$notag = 'notag=0';
/* CGBlog article related  (string) */
$cgblog_id = isset($params['cgblog_id']) ? $params['cgblog_id'] : '436'; //random number
Ik denk dat het ophalen van het cgblog-id niet juist is; aan de variabele wordt 436 toegekend ipv. het feitelijke cgblog-id. Hoe zou ik wel het cgblog-id kunnen ophalen?

Verderop in de 'foto-udt' roep ik een template aan:

Code: Select all

echo("<div class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-$cgblog_id header:#socialmediashare1\">");
     echo("<a class=\"floatbox\" href=\"$image_no_space\"> $image</a>");
     if ($title) {
De template 'socialmediashare' heeft de volgende code:

Code: Select all

<h4>Deel deze pagina</h4>
<div class="social_share" id="socialmediashare1">
  <div class="btn_facebook" id="facebook1">
     {include file='cms_template:shareFacebook'}
  </div>
  <div class="btn_twitter" id="twitter1">
     {include file='cms_template:shareTwitter'}
  </div>
  <div class="btn_googleplus" id="googleplus1">
     {include file='cms_template:shareGooglePlus'}
  </div>
  <div class="btn_pinterest" id="pinterest1">
     {include file='cms_template:sharePinterest'}
  </div>
  {* een voorbeeld hoe de knoppen uit te lijnen 
  <div class="btn_pinterest">
     {include file='cms_template:sharePinterest'}
https://stackoverflow.com/questions/10554093/trying-to-line-up-twitter-pinterest-facebook-buttons
  </div> *}
</div>
<br/>
Om het geheel compleet te maken, roep ik op de blog-pagina in de rechterkolom ook {include file='cms_template:SocialMediaShare'} aan.

W3C lijkt het niet leuk te vinden dat meermalen eenzelfde ID wordt aangeroepen. Een side effect is dat iemand die de pagina 'liked' dat dat ook meteen voor alle foto geldt. Dit zou eigenlijk niet de bedoeling moeten zijn.

Nu dacht ik door het doorgeven van het cgblog-id aan de template om de id uniek te maken, maar ik meen me te herinneren dat dat niet mogelijk is. Kan dit alleen niet terughalen. Wat zou een mogelijke oplossingsrichting zijn?

Link ter illustratie:
https://www.uisge-beatha.eu/2016/06/Ove ... -Champagne

Alvast dank!
deactivated010521

Re: css id uniek maken

Post by deactivated010521 »

In html moet id uniek zijn. In je socialmediashare template staan verschillende id's hardcoded.

Code: Select all

<div class="social_share" id="socialmediashare1">
<div class="btn_twitter" id="twitter1"> 
etc...

Na een snelle scan op een detailpagina van je blog zie ik dat je id="socialmediashare1" ook voor je float-box afbeeldingen gebruikt:

Code: Select all

<div class="floatbox_right floatbox" data-fb-options="group:cgblog-436 header:#socialmediashare1">
Nu weet ik niet precies wat data-fb-options doet dit zal iets met floatbox options (en styling) te maken hebben en mogelijke de error melding kunnen veroorzaken?

De vraag is of je id="socialmediashare1" nu wel nodig hebt? Wordt deze voor de aansturing van JavaScript gebruikt of voor de styling in CSS?

Verwijderen van gedupliceerde id's is het makkelijkste.

Als je de id voor zowel JavaScript als CSS nodig hebt en deze toch uniek wilt maken zou je iets met het blog_id en/of een counter moeten doen.

Styling en JavaScript/jQuery wordt dan wel wat lastiger:

CSS: (id start met socialmediashare)

Code: Select all

[id^="socialmediashare"] {
  color: red;
}
HTML:

Code: Select all

<div id="socialmediashare1">
<div id="socialmediashare2...">
JQuery:
http://api.jquery.com/attribute-starts-with-selector/



Tipje:

Zelf gebruik ik nauwelijks id's voor styling. Ik geef de voorkeur aan classes (deze kan je meerdere keren gebruiken en hebben een lagere css specificity: https://pawelgrzybek.com/css-specificity-explained/).

Voor JavaScript gebruik ik liever ook geen id's. Ik geef de voorkeur aan data-attributes. Als het echt een id moet zijn markeer ik deze met "js" als: id="js-floatbox" zo kan je styling en js functionaliteit altijd uit elkaar houden.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: css id uniek maken

Post by Gregor »

Dank je Arnoud.

Floatbox heeft de unieke ID nodig om, in dit geval, de socialmedia-buttons boven een foto te plaatsen. Uit de documentatie:
header - string | #hiddenDivId
footer - ...
Display transparent-background content immediately above or below the floatbox with the header and footer options. These can be set in the same manner as captions described above, and can use direct text, encoded html, or a reference to a hidden div (recommended). Although described here in the item-specific section of this options reference, like all options header and footer can be assigned globally, per page, by type, and by class name.
Er zou dus een onderscheid moet komen tussen "socialmediashare" en verschillende buttons. Ik weet niet precies wat Twitter, Facebook etc. gebruiken om de onderdelen op de pagina te identificeren, anders dan dat zij de canonical-url gebruiken. In dat geval zou dus de canonical-url moeten worden aangepast naar de url van de foto als er een foto wordt getoond en naar de url als het gaat om de button om een artikel te delen....
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: css id uniek maken

Post by Gregor »

Op welke wijze kan ik in een UDT het id van het cgblog artikel achterhalen? Ik dacht met de volgende code, maar die geeft mij niet het cgblog_id terug:
$cgblog_id = isset($params['cgblog_id']) ? $params['cgblog_id'] : '436';
deactivated010521

Re: css id uniek maken

Post by deactivated010521 »

Volgens mij heb je in die sharebuttons voor de floatbox helemaal geen id's als: shocialmediashare1, facebook1, twitter1 etc nodig. Althans ik zie er geen css aanhangen.

Ja in je UDT lees je de waarde voor cgblog_id goed uit. Je moet hem dan ook goed meegeven aan je UDT als: {mijn_udt cgblog_id=$entry->id} oid.

Code: Select all

$cgblog_id = isset($params['cgblog_id']) ? $params['cgblog_id'] : '436';
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: css id uniek maken

Post by Gregor »

arnoud wrote:Volgens mij heb je in die sharebuttons voor de floatbox helemaal geen id's als: shocialmediashare1, facebook1, twitter1 etc nodig. Althans ik zie er geen css aanhangen.
Ik ga ze weghalen en zien hoe het werkt. Wat zou ik dan kunnen doen om te zorgen dat bijv. de 'likes' uniek zijn per object op de pagina, dus de like van de pagina is een andere like dan de like van een van de foto's enz.?
arnoud wrote:Ja in je UDT lees je de waarde voor cgblog_id goed uit. Je moet hem dan ook goed meegeven aan je UDT als: {mijn_udt cgblog_id=$entry->id} oid.

Code: Select all

$cgblog_id = isset($params['cgblog_id']) ? $params['cgblog_id'] : '436';
Dan moet ik de cigblog_id doorgeven bij de aanroep van de UDT, maar kan ik in de UDT ook het cgblog_id ophalen?
deactivated010521

Re: css id uniek maken

Post by deactivated010521 »

Je kunt de url wel uniek maken maar of Twitter of Facebook ze, niet als 1 url zien durf ik niet voor 100% te zeggen. (Volgens mij vermoed jij ook, dat de canonical URL leidend is?)

Wellicht kan je internal links / section urls testen.

Code: Select all

<a name="foto1"></a> 
<img src="foto1">

<a name="foto2"></a> 
<img src="foto2">

http://yoururl.com/#foto1
cgblog_id (de primary key) is uniek en eigenlijk het enige wat je nodig hebt in een UDT. Je kunt wel aan de hand van titel, datum en category een cgblog_id uitlezen maar dat is omslachtig en niet gebruikelijk.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: css id uniek maken

Post by Gregor »

arnoud wrote:cgblog_id (de primary key) is uniek en eigenlijk het enige wat je nodig hebt in een UDT. Je kunt wel aan de hand van titel, datum en category een cgblog_id uitlezen maar dat is omslachtig en niet gebruikelijk.
Weet je hoe ik cgblog_id in een udt boven water haal als ik 'm niet mee stuur als parameter naar de udt?
deactivated010521

Re: css id uniek maken

Post by deactivated010521 »

In een blog detail pagina heb je de $entry->id (blog_id) al voorhanden, deze aan een UDT doorgeven is het aller makkelijkste.

Ik denk dat je iets verkeerds doet als dit niet lukt.

Maar je vraagt om een andere method, de enige die overblijft als je bovenstaande niet wilt of kan gebruiken is gevens uit de URL halen via de _REQUEST superglobal:

http://php.net/manual/en/reserved.variables.request.php
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: css id uniek maken

Post by Gregor »

Ok, dus als ik het goed begrijp is in een UDT geen informatie beschikbaar van een module als ik die niet of a) meegeef in de udt en dan ophaal als parameter of b) via een _REQUEST

In geval van a) moet ik de foto-udt aanpassen naar bijv.:
{foto file="Gallery/Zomer17/Saildrive/Saildrive - 02.jpg" title="Old one" side="right" width="150" cgblog={$entry->id}}
deactivated010521

Re: css id uniek maken

Post by deactivated010521 »

Ja, dat heb je goed.

REQUEST kan je trouwens ook direct in een Smarty Template gebruiken.

https://www.smarty.net/docsv2/en/langua ... smarty.tpl

Los van jouw use-case maar ter inspiratie in onderstaande code fragement, check ik bijvoorbeeld of ik op de news pagina zit of niet.

Code: Select all

{if preg_match('/^\/news/', $smarty.server.REQUEST_URI)}
{else}
{/if}
Afhankelijk van een ja/nee kan je dan in een (module)template iets laten zien of weghalen. Dit vind ik een beter methode dan voor die ene pagina een template introduceren met een kleine wijziging.
Post Reply

Return to “Dutch - Nederlands”