• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 11 posts ] 
Author Message
 Post subject: css id uniek maken
PostPosted: Tue Jan 09, 2018 7:49 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
In de w3c-validator kom ik bij het valideren van een blog-pagina de volgende meldingen tegen:
Quote:
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:
$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:
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:
<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/Overgoten-met-Champagne

Alvast dank!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Tue Jan 09, 2018 9:38 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1244
In html moet id uniek zijn. In je socialmediashare template staan verschillende id's hardcoded.

Code:
<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:
<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:
[id^="socialmediashare"] {
  color: red;
}


HTML:
Code:
<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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Tue Jan 09, 2018 10:19 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
Dank je Arnoud.

Floatbox heeft de unieke ID nodig om, in dit geval, de socialmedia-buttons boven een foto te plaatsen. Uit de documentatie:
Quote:
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....


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Tue Jan 09, 2018 2:59 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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';


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Tue Jan 09, 2018 3:40 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1244
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:
$cgblog_id = isset($params['cgblog_id']) ? $params['cgblog_id'] : '436';


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Tue Jan 09, 2018 5:11 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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:
$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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Thu Jan 11, 2018 10:48 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1244
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:
<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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Thu Jan 11, 2018 11:40 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Thu Jan 11, 2018 4:20 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1244
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Thu Jan 11, 2018 6:11 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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}}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: css id uniek maken
PostPosted: Fri Jan 12, 2018 9:24 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1244
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:
{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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 11 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
HostPapa CMS Made Simple hosting