tag:blogger.com,1999:blog-2316897086421279382024-03-13T15:27:42.313+01:00Overboord webprojectsOverboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.comBlogger38125tag:blogger.com,1999:blog-231689708642127938.post-66212996711194367172018-11-30T16:16:00.000+01:002018-11-30T16:16:55.262+01:00DRUPAL 8: Block of nodes referencing the current node<br />we have contentype<b> Publication</b> and a contenttype <b>Article</b><br />The contentype <b>Article </b>references the contenttype<b> Publication</b><br />(the referencing field is f.i. <span style="background-color: white; caret-color: rgb(158, 158, 158); color: #9e9e9e; font-family: Roboto, sans-serif; font-size: 14px;">field_editie_s</span> )<br />
Multiple articles reference one Publication<br />
<br />
Article --- fied_editie_s ---> Publication<br /><br /><b>Queste</b><br />Create a block view on anny Publication page listing all nodes referencing that page<br /><br /><br /><b>1. create view</b><br />Administration > Structure > Views > Add a New View<br />1.1 Create a block view<br />1.2 Filter on the child element: Article<br /><b><br />1.3 add relationship</b><br />
choose: '<i>content referenced from <span style="background-color: white; caret-color: rgb(158, 158, 158); color: #9e9e9e; font-family: Roboto, sans-serif; font-size: 14px; text-size-adjust: auto;">field_editie_s'</span></i><br />click: 'add and configure'<br />select 'require this relationship'<br />save<br /><b><br />1.4 add contextual filter</b><br />under relationship choose: field_editie_s: content<br />choose ID (content)<br />
click 'add and configure contextual filter<br />select 'provide default value'<br />select 'Content ID from URL'<br />
click save<br />
<br />
<br />
test it by inserting a node is from a publication node in the preview with contectual filters<br /><br />
now show the block on the publicatiosn pagesOverboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-77362507697176395532018-09-04T10:42:00.000+02:002018-09-04T11:25:24.220+02:00Drupal 8 And Spam....The most annoying thing on this web is those people running around and sending you long russian texts about dehydrators or viagra or whatever.... The web is like a city where half the population consists of naked or partly naked whores, the other half are salesman trying to sell you stuff you don't need or did not even know it existed and the last 1 percent or so is real information.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-E6KAVfZn490/W45CIxAR87I/AAAAAAAABvQ/asoaBzvlJXQCbnOphX9_jWDOXkqu1mCMACLcBGAs/s1600/twitter-spam.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="760" data-original-width="1160" height="261" src="https://2.bp.blogspot.com/-E6KAVfZn490/W45CIxAR87I/AAAAAAAABvQ/asoaBzvlJXQCbnOphX9_jWDOXkqu1mCMACLcBGAs/s400/twitter-spam.png" width="400" /></a></div>
<br />
<br />
Some of my sites keep being attacked by spambots posting this nonsense. I leaned heavily on the Aquia service Mollom, which was a great module, but that service unexplainably stopped in april 2018.<br />
<br />
<b>So, what to use on Drupal 8 sites to stop this useless salesy bantering and pointless digital screaming on our sites:</b><br />
<br />
<a href="https://www.drupal.org/project/captcha" target="_blank">Captcha</a><br />
The first module you can deploy is captcha. This is the simple <i>Stop and frisk </i>module to see if you are human.<br />
ImageCaptcha, is the <i>Stop and frisk and ask some more questions</i> version of the above. You have to interpret an image before you can send in a form. (I always find this one very annoying.)<br />
<br />
<a href="https://www.drupal.org/project/recaptcha" target="_blank">Re-Capcha</a><br />
This is the user friendly update of the above two modules, it simply asks you to check a box titled:<i> I am not a robot.</i> <br />
As long as the artificial intelligence is on the current level this module will suffice.<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-MVDTYM1wOwU/W45HPdZvsZI/AAAAAAAABvc/yhGGL2AwSTQ-sNQsRc3ZIXnfpC-xZH5DQCLcBGAs/s1600/alicia-vikander%2B%2525281%252529.webp" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" data-original-height="882" data-original-width="427" height="320" src="https://3.bp.blogspot.com/-MVDTYM1wOwU/W45HPdZvsZI/AAAAAAAABvc/yhGGL2AwSTQ-sNQsRc3ZIXnfpC-xZH5DQCLcBGAs/s320/alicia-vikander%2B%2525281%252529.webp" width="154" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Honey</td></tr>
</tbody></table>
<br />
<br />
<a href="https://www.drupal.org/project/honeypot" target="_blank">Honeypot</a><br />
This is a module that requires no user interaction at all, so it is my first choice to use. Depending on the user interaction times it decides whether you are a human or a bot. Furthermore it does a hide and seek action with fields that the bot thinks it needs to answer but the humans do not see. This module worked great, but of course the bot priogrammers are not stupid so they are finding ways to fool this one......<br />
<br />
<a href="https://www.drupal.org/project/antibot" target="_blank">Antibot</a><br />
Antibot uses some of the same techniques as honeypot, user interaction time and hidden fields, but seems to when honeypot... And the other way around. It is purely based on javascript/css, but prohibits users without javascript to send forms. (So you have to make an extra form for users without javascript with one of the above modules connected and another mailadres attached on which you will receive the old amount of spam)<br />
<br />
<a href="https://www.drupal.org/project/httpbl" target="_blank">Http:BL</a><br />
This one is not yet available for Drupal 8, but it seems to provide the same functionality as Mollom did.<br />
<br />
<a href="https://www.humanpresence.io/" target="_blank">Human Presence</a><br />
This one is rather affordable for drupal: 5 euros per month and seems to provide the same functionality as Mollom did, but also seems to use more advanced technologies... (Or they know how to present their products in a sexy way). I did not try this one out yet, and update here as soon as I did...<br />
<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-34252937055500431882017-11-23T13:49:00.000+01:002017-11-23T13:53:30.307+01:00Drupal 8: Add custom classes to pages using a field value<a href="https://4.bp.blogspot.com/-yhPw19tslJY/WhbDm6iiI_I/AAAAAAAAA7M/6wX02PpTDicAGGtM7xpCgygXGB0Gz9LdgCLcBGAs/s1600/Master_Yoda.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="720" data-original-width="540" height="320" src="https://4.bp.blogspot.com/-yhPw19tslJY/WhbDm6iiI_I/AAAAAAAAA7M/6wX02PpTDicAGGtM7xpCgygXGB0Gz9LdgCLcBGAs/s320/Master_Yoda.png" width="240" /></a>I have many projects where one special page needs a totally different design than the other pages. So in the css you need a different setup, for instance no right bar with a menu.<br />
I always write the pathname and the node-id to the body classes, but oftentimes you need to change the path of the pages, or you want to add other similarily designed pages to the set and then you need to add those path-classes to the css also, and this all apart from the fact that paths and node ids sometimes diverge in the development environment and the production environment.<br />
<br />
<b>The class is strong with this one</b><br />
So I made a very simple theme preprocess function which simply writes the field value of a custom <br />
field to the bodyclass. This way you can add pages to this special design by simply writing the same class value in that field.<br />
I added a text field 'field_bodyclass' tot the contentypes, and hidden it in the visibility settings for these contentypes. And using this preproces fs function:<br />
<br />
function MyModuleOrMyTheme_preprocess_html(&$variables) {<br />
$node = \Drupal::routeMatch()->getParameter('node');<br />
if($node) {<br />
$variables['attributes']['class'][] = $node->field_bodyclass->value;<br />
}<br />
.... other code.....<br />
}<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-65414753752287334072016-04-10T22:19:00.003+02:002023-09-13T23:04:11.170+02:00Drupal 8 - Unable to install Devel, system.menu.devel already exists in active configuration.<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-arDbOUNTTKY/VwqsoncaheI/AAAAAAAAAkw/r1Tlu480gL0pWanzvk8BtdO7Bhkd50ekQ/s1600/bonnacon01.jpg" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="186" src="https://1.bp.blogspot.com/-arDbOUNTTKY/VwqsoncaheI/AAAAAAAAAkw/r1Tlu480gL0pWanzvk8BtdO7Bhkd50ekQ/s320/bonnacon01.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">To protect and to serve....</td></tr>
</tbody></table>
Well life is shit sometimes. <br />
I migrated a Drupal 6 site to Drupal 8.<br />
All I wanted is to install devel and then develop like mad.<br />
But Devel won't install. It says:<br />
<i><span style="background-color: white; color: #cc0000;">Unable to install Devel, system.menu.devel already exists in active configuration.</span></i><br />
Diving into Drupal 8 I solved it, but I must honestly tell you that I do not really understand all consequences. It has something to do with the dependencies. The old site had Devel running, so maybe that caused the problem....<br />
<br />
<br />
<b>Solution (providing you have drush installed)</b><br />
Open terminal and navigate to the root folder of your website<br />
<b>$ drush php</b><br />
<i>Wait till the drush php prompt (<span style="color: #0b5394;">>>></span>) appears</i><br />
<span class="typ"><i>type</i><br /><b>Drupal</b></span><b><span class="pun">::</span><span class="pln">configFactory</span><span class="pun">()-></span><span class="pln">getEditable</span><span class="pun">(</span><span class="str">'system.menu.devel'</span><span class="pun">)-></span><span class="kwd">delete</span><span class="pun">();</span></b><br />
<i>push enter</i><br />
<i>some message appears like <span style="color: #0b5394;"><span class="s1">=> </span><span class="s2">Drupal\Core\Config\Config</span></span><span class="s1"><span style="color: #0b5394;"> {#8157}</span></span></i><br />
<i>type</i><br />
<b>exit</b><br />
<br />
After that I had no problem installing Devel (and develop like hell....)<br />
<br /><br />EDIT sept 2023 (I stumbled onto my own blog running into this problem once again)<br /><br /><b>In drupal 9 use</b><br /><p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 1px; margin-bottom: 0in;"><code class="western" style="font-family: "Liberation Mono", monospace;"><span style="font-family: Courier New, monospace;">php -d memory_limit=-1 vendor/drush/drush/drush config:delete </span></code></p><p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 1px; margin-bottom: 0in;"><em><span style="font-family: Courier New, monospace;"><span style="font-style: normal;">system.menu.devel</span></span></em></p><p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 1px; margin-bottom: 0in;"><br /></p><br /><br /><br /><br /><br /><br /><br /><br />
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 1px; margin-bottom: 0in;"><span style="font-family: Liberation Mono, monospace;"><span style="font-size: 14.6667px;"><i>edited sept 2023<br /><br /><br /><br /><br /></i></span></span></p>Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com6tag:blogger.com,1999:blog-231689708642127938.post-33060172037828523842015-01-07T08:38:00.000+01:002015-01-07T08:38:27.051+01:00Drupal 7 - changing overall site languageSo, as I am used to read and install everything in english, half of the sites we build are actually only in Dutch. That is, overall site language including the admin interface. I rather like to have the admin interface in english, cause you can more easily google the web on any problems using the english system messages.<br />So then: All the time I start drushing a site install, enabling my module sets, running some features, focusing on the technical design and the custom functionalities we have to build, and then suddenly realize that the whole lot has to be in Dutch. Or German. Or Latin, or French or Klingon.<br /><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-YOpROC2Aw-U/VKze_2vEu4I/AAAAAAAAAdA/TqSuhDqWNKg/s1600/JJAbramsKlingonScreenshot_gallery_primary.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-YOpROC2Aw-U/VKze_2vEu4I/AAAAAAAAAdA/TqSuhDqWNKg/s1600/JJAbramsKlingonScreenshot_gallery_primary.jpg" height="220" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Let's all Klingon</td></tr>
</tbody></table>
<b><br /></b>
<b>So, how did we change the site language again?</b><br /><br />1. Enable the Locale module<br />2. <a href="https://www.drupal.org/project/l10n_update" target="_blank">Download Localization update</a><br />3. Enable Localization update<br />(didn't expect that eh?)<br />4. Go to Configuration > Languages<br />(/admin/config/regional/language)<br />5. Add the language of your choice<br />(The module will then import the Drupal translation files for the core and all installed modules)<br />6. Change the default language and <i><span style="font-family: Verdana, sans-serif;">Voila</span></i>, as the French say, your site language has changed.<br /><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-yijItSpMvwI/VKzhH1g7VhI/AAAAAAAAAdM/LTpAXIXMaSY/s1600/Talen_Site-Install_-_2015-01-07_08.31.53.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-yijItSpMvwI/VKzhH1g7VhI/AAAAAAAAAdM/LTpAXIXMaSY/s1600/Talen_Site-Install_-_2015-01-07_08.31.53.png" height="67" width="640" /></a></div>
<br /><br /><br /><br /><br /><br /><br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-15198934409745825642014-10-27T15:37:00.002+01:002014-10-27T15:40:52.706+01:00Drupal - Rebuild permissionsBecause I always forget where to find the rebuild permissions button in Drupal, this is my reminder<br />
<br />
<br />
<div style="margin-bottom: 0in;">
<span style="font-family: monospace;"><b>drupal 6</b> /admin/content/node-settings/rebuild</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: monospace;"><b>drupal 7</b> /admin/reports/status/rebuild</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: monospace;"><br /></span></div>
<div style="margin-bottom: 0in;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-TpWS6DNH5ow/VE5YS0JaUOI/AAAAAAAAAcI/o1-ftZNcbSA/s1600/without-their-permission-cover_vert-4017c68da2beaea3b9664799d2eb973a73707f2a.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-TpWS6DNH5ow/VE5YS0JaUOI/AAAAAAAAAcI/o1-ftZNcbSA/s1600/without-their-permission-cover_vert-4017c68da2beaea3b9664799d2eb973a73707f2a.jpg" height="640" width="480" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I actually do not have permission to use this image....</td></tr>
</tbody></table>
<div style="margin-bottom: 0in;">
<br /></div>
Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-81568364958475696512014-10-16T00:55:00.001+02:002014-10-27T15:38:37.411+01:00Drupal 7 - apache solr - how to add an total results count to your resultsSomehow I naturally expected a total results entry somewhere in the arrays solr sends me, but I could not find it. <br />
<i>So, what is so weird about wanting to show the number of results?</i><br />
<br />
The solution is of course rather simple, like everything is simple in hindsight, but nevertheless it took me hours to come up with it. Mostly because I was googling through endless hits more or less about this problem and maybe I should try to catch some more sleep....<br />
<br />
The solution is to lift the value from the GLOBALS array. Add <span class="s4"> </span><span class="s7">$GLOBALS</span><span class="s8">[</span><span class="s5">'</span>pager_total_items<span class="s5">'</span><span class="s8">][</span><span class="s3">0</span><span class="s8">] somewhere to a variable in a preprocess hook or simply print in in your template file like thus:</span><br />
<span class="s8"><br /></span>
<br />
<div class="p1">
<b><span style="font-size: x-small;"><span class="s2"><div class=</span><span class="s6">"counter"</span><span class="s2">></span><span class="s3"><?php</span><span class="s1"> </span><span class="s4">print </span><span class="s7">$GLOBALS</span><span class="s8">[</span><span class="s5">'</span>pager_total_items<span class="s5">'</span><span class="s8">][</span><span class="s3">0</span><span class="s8">]</span><span class="s1">.</span><span class="s5">' results'</span><span class="s5">;</span><span class="s1"> </span><span class="s3">?></span><span class="s2"></div></span></span></b></div>
<div class="p1">
<br /></div>
<div class="p1">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-_3rrLrZxHoA/VD768Zxyd3I/AAAAAAAAAbo/fVYUUQ6SQQQ/s1600/sleepless.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-_3rrLrZxHoA/VD768Zxyd3I/AAAAAAAAAbo/fVYUUQ6SQQQ/s1600/sleepless.jpg" height="262" width="400" /></a></div>
<div class="p1">
<br /></div>
Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-50089436380655016792014-09-18T17:09:00.003+02:002014-09-18T17:09:45.261+02:00Drupal 7 - Picture - Adding captions to responsive imagesI've setup an D7 site (a D6 upgrade) with Picture and Breakpoint where I want to show a caption for some of the images. In the D6 version used the title attributes as captions for some of the images with a phptemplate_imagecache function. (Depending on the image style used.)<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-Uac_J1ippec/VBrx9_QHgsI/AAAAAAAAAbI/iGXVUVwY4fY/s1600/RobinWilliams3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-Uac_J1ippec/VBrx9_QHgsI/AAAAAAAAAbI/iGXVUVwY4fY/s1600/RobinWilliams3.png" height="241" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Oh caption, my caption</td></tr>
</tbody></table>
There are some modules (https://www.drupal.org/project/image_caption, https://www.drupal.org/project/image_field_caption, https://www.drupal.org/project/caption_filter, etc) which give you the possibility of adding a caption field, but as I do not want to build another module to convert all existing title tags to these caption attributes, and also need a solution for non javascript browsers, I needed something more basic.<br />
<br />
<b>Specifications</b><br />
Based on the specific imagestyle or specific picture mapping, decide to render or not render a caption. The content of the caption is the content of the title attribute.<br />
<br />
<b>Solution</b><br />
Add a theme function to your theme's template.php<br />
The idea is to simply override the theming function in picture (which is the module I use for my responsive images)<br />
<br />
<br />
<div class="p1">
<span style="font-size: x-small;">// this theming function assumes that the picture module is installed</span></div>
<div class="p2">
<span style="font-size: x-small;"><span class="s1">function THEMENAME</span>_picture<span class="s2">(</span>$variables<span class="s2">) </span>{</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s3"> </span>// first produce the standard picture output<span class="Apple-tab-span"> </span></span></div>
<div class="p2">
<span style="font-size: x-small;"> $output<span class="s4">=</span>theme_picture($variables)<span class="s2">;</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s3"> </span>// we only add titles to the images where a specific picture mapping is defined</span></div>
<div class="p3">
<span style="font-size: x-small;"><span class="s3"> </span><span class="s5">if </span><span class="s3">(</span>array_key_exists<span class="s3">(</span><span class="s2">'</span><span class="s6">breakpoints</span><span class="s2">'</span><span class="s3">, $variables) </span>&& array_key_exists<span class="s3">(</span><span class="s2">'</span><span class="s6">title</span><span class="s2">'</span><span class="s3">, $variables)){</span></span></div>
<div class="p4">
<span style="font-size: x-small;"><span class="s3"> </span><span class="s5">if </span><span class="s3">($variables</span><span class="s4">[</span><span class="s3">breakpoints</span><span class="s4">][</span><span class="s2">'</span>custom.user.normal<span class="s2">'</span><span class="s4">][</span><span class="s2">'</span>1x<span class="s2">'</span><span class="s4">][</span><span class="s3">image_style</span><span class="s4">] ==</span><span class="s2">'</span><b>rsp_adviesplaatjecustom_user_normal_1x</b><span class="s2">'</span><span class="s3">){</span></span></div>
<div class="p2">
<span style="font-size: x-small;"> <span class="Apple-tab-span"> </span> <span class="s5">if </span>($variables<span class="s4">[</span><span class="s2">'</span><span class="s6">title</span><span class="s2">'</span><span class="s4">] !=</span><span class="s2">''</span>){</span></div>
<div class="p4">
<span style="font-size: x-small;"><span class="s3"> <span class="Apple-tab-span"> </span><span class="Apple-tab-span"> </span> $output</span><span class="s4">=</span><span class="s3">$output.</span><span class="s2">'</span><div class="image-caption"><div class="image-caption-text"><span class="s2">'</span><span class="s3">.$variables</span><span class="s4">[</span><span class="s2">'</span>title<span class="s2">'</span><span class="s4">]</span><span class="s3">.</span><span class="s2">'</span></div></div><span class="s2">';</span></span></div>
<div class="p2">
<span style="font-size: x-small;"><span class="s2"> </span> <span class="s2"></span>}</span></div>
<div class="p2">
<span style="font-size: x-small;"> }</span></div>
<div class="p2">
<span style="font-size: x-small;"> }</span></div>
<div class="p2">
<span style="font-size: x-small;"> <span class="s5">return </span>$output<span class="s2">;</span></span></div>
<div class="p2">
<span style="font-size: x-small;">}</span></div>
<div class="p2">
<span style="font-size: x-small;"></span><br />
<span style="font-size: x-small;"></span></div>
<div class="p2">
<span style="font-size: x-small;"></span><br />
<span style="font-size: x-small;"></span></div>
<div class="p2">
<span style="font-size: x-small;"></span><br />
<span style="font-size: x-small;"></span></div>
<div class="p2">
<span style="font-size: x-small;"></span><br />
<span style="font-size: x-small;"></span></div>
<div class="p2">
<span style="font-size: x-small;"><br /></span></div>
<div class="p2">
<br /></div>
Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-74836571191394287972014-08-20T18:49:00.002+02:002014-08-20T18:49:41.827+02:00Drupal - Omega 4.x - layouts - how to create a layout and add a sidebar (or anything)<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-vSXohY0jPYw/U_TQ5I4WrFI/AAAAAAAAAZA/ljMeUMLZb5U/s1600/barwig_05.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://3.bp.blogspot.com/-vSXohY0jPYw/U_TQ5I4WrFI/AAAAAAAAAZA/ljMeUMLZb5U/s1600/barwig_05.png" height="320" width="228" /></a></div>
Lets start with a giant disclaimer - my lawyer advised me thus, to always start with a disclaimer, even if I am just entering a supermarket or visiting a friend for a coffee:<br />I don't know if all here under is the correct way to proceed. <br />Adding a layout as shown in the leveltuts tutorials did not work. But I probably just forgot a step, multiple times, or multiple steps at different times in the process. Anyway, I decided to do some low level cortex manipulation and <i>lo and behold,</i> that worked.<br />Low level cortex being simple copy-paste and renaming magic.<br /><br />
I wanted a layout with an extra region in it, and it seems that the best way to do that is to add a layout to your omega subtheme. As I am still novicing into the omega 4.x sass setup, I could be totally wrong on this. <i><br /></i><br />
<br />Well, anyhow, here my cookbook:<br /><b>1. </b>Create (if not already there) a folder 'layouts' in your omega subtheme folder<br />(So in my case the subtheme is called <i>rli2015</i> and the layouts folder in <i>/sites/all/themes/rli2015/layouts</i>)<br /><b>2.</b> copy the folder simple from your omega base theme to the layouts folder you just created (<i>sites/all/themes/omega/omega/layouts/simple</i>)<br /><b>3.</b> Rename this folder to what you wanna call your layout. <br />I called it <i>allpages</i> as I wanted to create a layout I can use over the whole site<br /><b>3.1 </b>rename the folder to your layout name. In this aexample <i>allpages.</i><br /><b>3.2 </b>rename the file <i>simple.pages.inc</i> to <i>allpages.layout.inc.</i><br /><b>3.3 </b>rename the file <i>simple-layout.tpl.php</i> to <i>allpages-layout.tpl.php.</i><br /><b>3.4 </b>In the <i>allpages.layout.inc</i> change:<br /><b>3.4.1 </b>name=<i>allpages</i><br /><b>3.4.2</b> description = <i>whatever text you want here</i><br /><b>3.4.3</b> preview= <i>allpages.png</i> (if you want to make an image for this layout, you can also leave it out)<br />
<b>3.4.4</b> template=<i>allpages-layout</i> <br />(has to be what you named your tpl file under 3.3)<br /><b>3.4.5 </b>Stylesheets (you can leave this one out, or simply add an empty one for later use)<br />
<br />
<div class="p1">
<i>; Stylesheets </i></div>
<div class="p1">
<i>stylesheets[all][] = css/layouts/allpages/allpages.layout.css</i></div>
<b>3.4.6</b> Add a region under the regions section<br />
<br />
<div class="p1">
<i>; Regions</i></div>
<div class="p1">
<i>regions[branding] = Branding</i></div>
<div class="p1">
<i>regions[header] = Header</i></div>
<div class="p1">
<i>regions[navigation] = Navigation bar</i></div>
<div class="p1">
<i>regions[highlighted] = Highlighted</i></div>
<div class="p1">
<i>regions[help] = Help</i></div>
<div class="p1">
<i>regions[content] = Content</i></div>
<div class="p1">
<i>regions[sidebar_first] = First sidebar</i></div>
<div class="p1">
<i>regions[sidebar_second] = Second sidebar</i></div>
<div class="p1">
<i><span style="color: red;">regions[sidebar_third] = Third sidebar</span></i></div>
<div class="p1">
<i>regions[footer] = Footer</i></div>
<b>3.5 </b>Also add this region to your inc file under your subtheme itself, in my case <i>rli2015.inc</i><br /><i><span style="color: red;">regions[sidebar_third] = Third sidebar</span></i><br /><b>3.6 </b>In your tpl file (<i>allpages-layout.tpl.php</i>) add the region you just added where you want it rendered<br />
<br />
<div class="p1">
<i><span class="s1"><?php</span> <span class="s2">print </span>render($page<span class="s3">[</span><span class="s4">'</span><span class="s5">sidebar_third</span><span class="s4">'</span><span class="s3">]</span>)<span class="s4">;</span> </i><span class="s1"><i>?></i><br />NB! If there is no content in the region, the region will not be rendered<br /><b>3.7 </b>Copy the <i>omega/sass/layouts/simple</i> folder to your custom theme sass layouts folder<br /><b>3.7.1</b> Rename simple to <i>allpages</i><br /><b>3.7.2 </b> Rename <i>simple.layout.scss</i> to <i>allpages.layout.scss </i>(has to be the same as the one you declared under 3.4.5)<br /><b>3.7.3</b> Strip it of all its content.<br /><b>4.</b> Go to admin/config/development/performance.<br /><b>5.</b> Clear all caches.<br /><b>6. </b>Go to appearance.<br /><b>7. </b>Choose the <i>settings</i> of your subtheme.<br />(in my case admin/appearance/settings/rli2015)<br /><b>8. </b>Enable layout extensions.<br /><b>9. </b>Select your custom layout and save the configuration.<br /><br />After that you have a html output with your extra third sidebar (providing you've added content to that sidebar....)<br /><br />If you have guard (bundle exec guard) running on your subtheme directory the css file should be automatically created under<i> /sites/all/themes/rli2015/css/layouts/allpages.</i><br />If not, add the allpages.layout.css file by hand.<br /><br /><b>NB! GUARD!</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-kDH4xbwzhXA/U_TMkVBm8qI/AAAAAAAAAY4/-aURDobNWgg/s1600/Mosaic-of-a-guard-dog-from-the-House-of-Orpheus-Pompeii-brimus471_productlarge.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-kDH4xbwzhXA/U_TMkVBm8qI/AAAAAAAAAY4/-aURDobNWgg/s1600/Mosaic-of-a-guard-dog-from-the-House-of-Orpheus-Pompeii-brimus471_productlarge.jpg" height="200" width="200" /></a></div>
<div class="p1">
<span class="s1">I had the problem that guard (bundle exec guard) <br />stopped working. It simply did not compile.</span></div>
<div class="p1">
<span class="s1">Dunno why...</span></div>
<div class="p1">
<span class="s1">Instead of that I ran <i>compass watch </i>multiple times in the same directory, stopping it with <i>ctrl-c</i>. And after some iterations of that I got messages about changes made. And after that, <i>bundle exec guard</i> also ran again. Dunno why....<br /></span></div>
<br /><br />.<br /><br /><br /><br /><br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-26992536651195278162014-08-01T15:03:00.003+02:002014-08-01T16:36:10.087+02:00Drupal 7 - Omega 4.x with Sass - how to add a css to the theme(this is a post under construction, more or less. I am digging into the omega4 -Sass - theming setup framework. Just rather pissed off by spending two whole days on installing RVM - one of the prerequisites for using Sass - on my mac. Will write a blog about that process, when I don't feel the need for strong langiuage anymore. This is just a post about simple tasks you wnat to perform and which nonody seems to want to add to the documentation. Probably because only fools like me don't know how to perform these simple tasks....)<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-lRvB6dh9Mls/U9ulmiHoUDI/AAAAAAAAAYM/C9hszJ9mHxk/s1600/25926-DEFAULT-L.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-lRvB6dh9Mls/U9ulmiHoUDI/AAAAAAAAAYM/C9hszJ9mHxk/s1600/25926-DEFAULT-L.jpg" height="201" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DPMS Panther LRT-SASS 7.62 NATO</td></tr>
</tbody></table>
<br /><br /><br />
This post supposes you have an omega 4 subtheme installed and the Sass environment set up and you have the guard running on your subtheme folder (bundle exec guard)<br />
(see f.i. http://www.code.binarybrand.com/index.php?title=Omega_4)<br />
<br />
<br />
1. Open your subtheme info file (in this example my subtheme is called rli2015, so we open rli2015.info)<br />
2. Add a line in the stylesheets section<br />
<i>stylesheets[all][] = css/rli2015.mobile.css</i><br />
3. navigatie to your sass folder (in this example themes/rli2015/sass) and add a file<br />
<i>rli2015.mobile.scss</i><br />
4. Imediately a file <i>rli2015.mobile.css</i> will me generated in your css folder<br />
5. This css file will also be added to your rendered page<br />
<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-87421209145600821342014-07-27T13:09:00.002+02:002014-07-27T13:09:38.675+02:00Drupal - Got error 28 from storage engine querySo I had one site with suddenly error 28.<br />
<br />
<b>Warning</b>: Got error 28 from storage engine
query: SELECT DISTINCT b.* FROM blocks b LEFT JOIN blocks_roles r ON
b.module = r.module AND b.delta = r.delta LEFT JOIN i18n_blocks i18n ON
(b.module = i18n.module AND b.delta = i18n.delta) WHERE (i18n.language
='nl' OR i18n.language ='' OR i18n.language IS NULL) AND ( b.theme =
'seven' AND b.status = 1 AND (r.rid IN (2,4) OR r.rid IS NULL) )ORDER BY
b.region, b.weight, b.module in <b>/var/hosting/sobibor/longshadowofsobibor.com/includes/database.mysql.inc</b> on line <b>148</b><br />
<br />
As of the site contents I usually first suspect a hacker with extreme right wing sympathies to have destroyed part of the site. <br />But the issue was very simple and unbiased: Not enough diskspace!<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-V76iqDwFdek/U9TdTcygrKI/AAAAAAAAAX8/JqstiFXqKH4/s1600/disk_thrower_-_Google_zoeken_-_2014-07-27_13.06.20.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-V76iqDwFdek/U9TdTcygrKI/AAAAAAAAAX8/JqstiFXqKH4/s1600/disk_thrower_-_Google_zoeken_-_2014-07-27_13.06.20.png" height="298" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Right wing disk thrower</td></tr>
</tbody></table>
<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-29766754172985986862014-07-27T10:38:00.001+02:002014-07-27T10:38:24.374+02:00Drupal 6 to Drupal 7 migration of Audiofields: a missing filefields problemDuring a recent D6 to D7 upgrade I got stuck on an irritating problem. Although the filefield module has been included in D7 core, during the migrate fields action the system kept presenting me with the impossibility to migrate filefields from the d6 definitions.<br /><br /><b>PROBLEM</b><br /><br />
<li class="first"><span class="error"><i>Missing field module: 'filefield'. This field cannot be migrated.</i></span></li>
<li class="last"><i>Missing formatter: The 'hidden' formatter used in 1
view modes for the field_advies_audio field is not available, these
displays will be reset to the default formatter.</i><br /><br />The reason for this problem is that the field has a widget_type audiofield_widget and a widgetmodule audiofield. So I naturally tried to upgrade the audiofield module, but this does not solve the problem. CCK migration simply refuses to migrate these fields. Dunno why exactly. (Instead of <i>Missing field module: 'filefield'. This field cannot be migrated.</i> a better error message would be: <i>Won't do audiofields. Don't fucking like them. Sue me.</i>)</li>
<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-9Ig5-FepMqw/U9S0HjhkQTI/AAAAAAAAAXs/NdVLtIFDg7s/s1600/298647350_orig.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-9Ig5-FepMqw/U9S0HjhkQTI/AAAAAAAAAXs/NdVLtIFDg7s/s1600/298647350_orig.jpg" height="220" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Whaaaat??</td></tr>
</tbody></table>
<div>
<br /><br /><b>SOLUTION</b><br /><br />Manually change the widget_type to filefield_widget and the widget_module to filefield. You can do this via phpmyadmin for instance. Or to do this for the multiple audiofield we've defined, run this query<br /><code><br />update {content_node_field_instance}<br /> set widget_type = 'filefield_widget', widget_module = 'filefield'<br /> where widget_module = 'audiofield';</code><br /><span style="color: orange; font-size: x-small;"><b>If you run it directly use the table name with prefix. The above you can run in Devel.</b></span><br /><br />I will post here lateron how to adress the presentation in the final upgraded site.<br /><br /><br /></div>
Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-48884267748360291832014-04-08T14:55:00.004+02:002014-04-08T14:56:23.650+02:00Drupal - cron memory exhausted trails and tribulations<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-yqz8fHF9JG0/U0PvKKD8cSI/AAAAAAAAAWs/6oON-Bv5CNg/s1600/_issues_29_assets_images_pena5.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-yqz8fHF9JG0/U0PvKKD8cSI/AAAAAAAAAWs/6oON-Bv5CNg/s1600/_issues_29_assets_images_pena5.jpg" height="320" width="237" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Having a Cron job</td></tr>
</tbody></table>
So, sometimes you simply miss a cron fail. That happens. Your client calls: <br />
Hey, the notifications stopped. <br />
New pages don't show up in the search results. <br />
Collections not getting indexed.<br />
A service is down.<br />
Whatever!<br />
<br />
And I always forget how to solve it. I just rumble along. Sometimes I increase the memory limit, the execution times never works (is hard coded in common inc I believe to be 240 or something), shut down one of the modules, ini_set this, ini_set that, prune some tables, pray, curse.....<br />
<br />
I must say I utterly dislike cron fails as they are so terribly boring. So I wanted to write an eloquent and excellent blog about all my cron resolving adventures, just to add some meaning to this annoying part of my life. But then, opening my development and maintenance logs, I remembered: There is no need for me to write anything. <br />
If you have a cron problem, simply visit <a href="https://drupal.org/node/553430">https://drupal.org/node/553430</a> and tell them I sent you.<br />
<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-88392970139534607152014-03-20T12:18:00.004+01:002014-03-20T12:20:57.380+01:00Drupal - access denied page after loginToday I got an access denied page after login, just rerooting me to the login page. I 've got this before, on a number of very different sites. Usually this problem coincides with big other problems in the website concerned, so you really can do without this annoying access problem. <br />
There can be an infinite number of causes: Crashed sessions table, changes in apache, php upgrades, butterflies in Australia....<br />
Here is my short track to quickly regain access to the site:<br />
<br />
<br />
<b>Solution 1</b><br />
Truncate the sessions table and then try again<br />
<br />
It is perfectly save to truncate the sessions table although all currently logged in users are then logged out. The sessions table keeps track of all user
sessions on your site. It has an entry for every user/browser combination that's logged in to your site. (Logging in from firefox and from chrome creates two entries in this table, and the same goes for logging in from different devices)<br />
<br />
<b>Solution 2</b><br />
Add cookie domain setting to your settings.php file, like this<br />
$cookie_domain = '.mydomain.ext';<br />
And then try again<br />
<br />
(see also https://drupal.org/node/1005570)<br />
<br />
<br />
<b>Solution 3</b><br />
When your sessions table is crashed, simply repair table and try again<br />
<br />
<br />
<b>Solution 4</b><br />
Find a religion that suits you bests and make an offering to the God or Gods who are proclaimed to be most helpful to developers by this chosen religion.....<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--VgtYMncF9M/UyrMkcv0TGI/AAAAAAAAAVs/uvRdBicIhVY/s1600/1113175f486b176ecc598951eb326e96.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/--VgtYMncF9M/UyrMkcv0TGI/AAAAAAAAAVs/uvRdBicIhVY/s1600/1113175f486b176ecc598951eb326e96.jpg" /></a></div>
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-59530159801693412622014-03-20T11:28:00.000+01:002014-03-20T11:29:07.927+01:00Drupal - unable to overwrite the settings.phpThe funny thing about drupal is it protects your files and permissions automatically. But sometimes I feel like a pilot in a plane where I do not know some of the automation. <br />
For instance, sometimes you want to overwrite the settings.php file and you do not have the permissions as the FTP user. Here is first a simple set of steps how to proceed.<br />
<br />
<b>Problem: </b><br />
You want to make changes to settings.php but are not allowed to overwrite.<br />
<br />
<b>Cause:</b><br />
Drupal automatically sets the following permissions on your default folder and on your settings.php therein<br />
<br />
<i>dr-xr-xr-x 3 {user} {group} 4096 Mar 20 12:31 default<br />-r-xr-xr-x 1 {user} {group} 10516 Mar 20 10:27 settings.php</i><br />
<a href="http://2.bp.blogspot.com/-VGzBkRHTFJE/UyrAUeibc1I/AAAAAAAAAVQ/tH2n-onITvM/s1600/devil03.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/-VGzBkRHTFJE/UyrAUeibc1I/AAAAAAAAAVQ/tH2n-onITvM/s1600/devil03.jpg" height="200" width="150" /></a><br />
The user being your ftp user then is not allowed to write into the default folder, nor to overwrite the settings.php file. <br />
Which is good, of course, but we temporarily want to be bad.<br />
<br />
<br />
<b>Solution:</b><br />
What you want is to change the permissions, overwrite settings.php, and then reset the permissions to what they where.<br />
<br />
1. login to your server shell and navigate to your site<br />
<i>cd /var/www/vhosts/domain.ext/sites</i><br />
2. change the permissions of the default folder<br />
<i>sudo chmod a+w default</i><br />
3. enter the default directory<br />
<i>cd default</i><br />
4. change permissions of your settings.php (oooow, spooky...)<br />
<i>sudo chmod 777 settings.php</i><br />
5. Now overwrite the settings.php with your FTP program.6. To restore the permissions of the default folder and the settings.php file just login to your site, go to administer -> reports -> status report<br />
<br />
<i>admin/reports/status</i><br />
7. running ls -l in your terminal will show you that all permissions are magically restored. Hail Drupal.<br />
<br />
<a href="http://4.bp.blogspot.com/-68RhnthAaRU/UyrB65t-LhI/AAAAAAAAAVc/nH-2a-GcyfI/s1600/flatline.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/-68RhnthAaRU/UyrB65t-LhI/AAAAAAAAAVc/nH-2a-GcyfI/s1600/flatline.jpg" height="300" width="400" /></a><span style="color: red; font-family: Courier New, Courier, monospace;"><b>Step 6 is maybe like a braindead way of restoring the permissions, but it is the good way of doing this, let drupal handle this stuff, and you point your brain to problems that are interesting on a human level....</b></span><br />
<br />
<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-86388492248493408952014-02-25T13:22:00.002+01:002014-02-25T13:29:32.978+01:00Drupal 7 - Creating a contentype with repeatable expandable fieldcollectionsI want to make me a simple to manage contenttype containing fields and field collections that I can present as collapsible fields. <br />
On page load the field value will be hidden and the labels will be shown as clickable links. Clicking them will expand the content of the field.<br />
I want to use field collections in the same way, but there give the maintainer the power to edit the 'label'. Adding fieldcollections of the form (title, content) should do that. On page load the title will be shown as a clickable link, and clicking on that will expand the content.<br />
<br />
For the collapsing functionality we use, as it is already there, ctools.<br />
<br />
<b>1. make a field display collapsible with ctools</b><br />
In general using ctools it's very easy to make a field display collapsible.<br />
<br />
<b>1.a Put this function in your template file</b><br />
<span style="font-size: x-small;">function MyTheme_collapse_content($c_content, $collapse_heading) {</span><br />
<span style="font-size: x-small;"> print theme('ctools_collapsible', array('handle' => $collapse_heading, 'content' => $c_content, 'collapsed' => TRUE));</span><br />
<span style="font-size: x-small;">}</span><br />
<br />
<b>1.b In the field template file simply put this code</b><br />
<span style="font-size: x-small;"><?php</span><br />
<div class="p1">
<span style="font-size: x-small;"> <span class="Apple-tab-span"> </span>$collapse_heading <span class="s1">= </span>$label<span class="s2">;</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s4"> foreach </span>($items <span class="s1">as </span>$delta => $item): </span></div>
<div class="p2">
<span style="font-size: x-small;"><span class="s5"><span class="Apple-tab-span"> </span> <span class="Apple-tab-span"></span>$c_content.=</span><span class="s2">'</span><div class="field-item <span class="s2">';</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s2"><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span></span> $c_content.=$delta <span class="s1">% </span><span class="s3">2 </span>? <span class="s2">'</span><span class="s6">odd</span><span class="s2">'</span> : <span class="s2">'</span><span class="s6">even</span><span class="s2">'; </span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s2"><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span></span> $c_content.=<span class="s2">'</span><span class="s6">"</span><span class="s2">';</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s2"><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span></span> $c_content.=<span class="s2">'</span><span class="s6"> </span><span class="s2">'</span>. $item_attributes<span class="s1">[</span>$delta<span class="s1">]</span>.<span class="s2">'</span><span class="s6">></span><span class="s2">';</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s2"><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span></span> $c_content.= render($item).<span class="s2">'</span><span class="s6"></div></span><span class="s2">';</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s5"> </span>endforeach<span class="s2">;</span></span></div>
<div class="p1">
<span style="font-size: x-small;"> MyTheme_collapse_content($c_content, $collapse_heading)<span class="s2">;</span></span></div>
<span style="font-size: x-small;">?></span><br />
<br />
<b>1.b.1 template naming</b><br />
If you worry what to name the field template files simply check https://api.drupal.org/api/drupal/modules!field!field.module/function/theme_field/7<br />
<br />
<br />
Now, how to accomplish this task for the fieldcollections?<br />
<br />
<b>2. Add a fieldcollection field to the contenttype</b><br />
In this example called <i>Page</i> or machinename <i>field_event_sub_page</i><br />
<b>2.1 Add two fields to the fieldcollection</b><br />
<b>2.1.a text field </b><i>page_title </i><br />
<b>2.1.b and a textarea </b><i>page_text </i>(filtered html)<br />
<br />
Now you can add field collections to the node consisting of a text field (page_title) and a textarea (page_text).<br />
Now I want these text fields (the page_title) to show as links, and clicking on these links should open the corresponding textarea's (page_text), giving me a single ode behaving more or less like a book with only two levels.<br />
<br />
Using the ctools collapsing the problem is now reduced to getting the page_title and page_text field content in the $c_content and the $collapse_heading variables in a theme function like the above:<br />
<br />
MyTheme_collapse_content($c_content, $collapse_heading)<span class="s2">;</span><br />
<span class="s2"><br /></span>
This is usually a very annoying deconstruction of the fieldcollection instance, I must say I get lost a lot of times.<br />
But now I found this very elegant solution by Mike Minecki<br />
<br />
<br />
<br />
<b>2.2 put these functions in your template.php</b><br />
<br />
<span style="font-size: x-small;">function MyTheme_preprocess_field(&$vars, $hook) {</span><br />
<span style="font-size: x-small;"> $element = $vars['element'];</span><br />
<span style="font-size: x-small;"> if (isset($element['#field_name'])) {</span><br />
<span style="font-size: x-small;"> if ($element['#field_name'] == '<b>field_event_sub_page</b>') {</span><br />
<span style="font-size: x-small;"> $vars['theme_hook_suggestions'][] = 'field__event_sub_page_collected';// waar is dit eigenlijk voor nodig</span><br />
<br />
<div class="p1">
<span style="font-size: x-small;"><span class="s1"> $field_array </span><span class="s2">= </span><span class="s3">array</span><span class="s1">(</span><span class="s4">'</span><b>field_fesp_linktitle</b><span class="s4">'</span><span class="s1">, </span><span class="s4">'</span><b>field_fesp_text</b><span class="s4">'</span><span class="s1">)</span><span class="s4">;//must match the fields you added to the field collection</span></span></div>
<span style="font-size: x-small;"> rows_from_field_collection($vars, '<b>field_event_sub_page</b>', $field_array);</span><br />
<span style="font-size: x-small;"> }</span><br />
<span style="font-size: x-small;"> }</span><br />
<span style="font-size: x-small;">}</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;">function rows_from_field_collection(&$vars, $field_name, $field_array) {</span><br />
<span style="font-size: x-small;"> $vars['rows'] = array();</span><br />
<span style="font-size: x-small;"> foreach($vars['element']['#items'] as $key => $item) {</span><br />
<span style="font-size: x-small;"> $entity_id = $item['value'];</span><br />
<span style="font-size: x-small;"> $entity = field_collection_item_load($entity_id);</span><br />
<span style="font-size: x-small;"> $wrapper = entity_metadata_wrapper('field_collection_item', $entity);</span><br />
<span style="font-size: x-small;"> $row = array();</span><br />
<span style="font-size: x-small;"> foreach($field_array as $field){</span><br />
<span style="font-size: x-small;"> $row[$field] = $wrapper->$field->value();</span><br />
<span style="font-size: x-small;"> }</span><br />
<span style="font-size: x-small;"> $vars['rows'][] = $row;</span><br />
<span style="font-size: x-small;"> } </span><br />
<span style="font-size: x-small;"> }</span><br />
<br />
<br />
<b>2.2 Put this rendering in your fieldcollection template file</b><br />
In this example that would be the field--field_event_sub_page.tpl.php template file.<br />
<div class="p1">
<span style="font-size: x-small;"> <span class="s1"><?php</span> </span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s2"> foreach</span>($rows <span class="s3">as </span>$row): </span></div>
<div class="p1">
<span style="font-size: x-small;"> <span class="Apple-tab-span"></span>$collapse_heading <span class="s3">= </span>$row<span class="s3">[</span><span class="s4">'</span><span class="s5"><b>field_fesp_linktitle</b></span><span class="s4">'</span><span class="s3">]</span><span class="s4">;</span></span></div>
<div class="p2">
<span style="font-size: x-small;"><span class="s4"> </span><span class="s6">$c_content </span><span class="s3">= </span><span class="s6">$row</span><span class="s3">[</span><span class="s4">'</span><b>field_fesp_text</b><span class="s4">'</span><span class="s3">][</span><span class="s4">'</span>safe_value<span class="s4">'</span><span class="s3">]</span><span class="s4">;</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s4"> </span>MyTheme_collapse_content($c_content, $collapse_heading)<span class="s4">;</span></span></div>
<br />
<div class="p3">
<span style="font-size: x-small;"><span class="s4"> </span>endforeach<span class="s4">;</span><span class="s6"> </span><span class="s1">?></span></span></div>
Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-50419317418667918422014-02-25T12:28:00.001+01:002014-02-26T21:52:22.593+01:00Accessibility - Using images as a link conforming to Dutch webrichtlijnen overheidAs I always forget this, here is a micro-blog-post about this requirement for the Dutch Govermental organisations. Governmental sites need to comply with the 'Webrichtlijnen overheid versie 2'.<br />
<br />
It is allowed to use an image as the content of a link, as long as the image has a useful and descriptive alt text.<br />
<br />
Ref. criteria for succes 2.4.4, 2.4.9 en 4.1.2<br />
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-4hb5Mbz7T_k/Uwx9z27PXyI/AAAAAAAAATk/rqwQuYeAxiU/s1600/small-party.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-4hb5Mbz7T_k/Uwx9z27PXyI/AAAAAAAAATk/rqwQuYeAxiU/s1600/small-party.jpg" height="262" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Rejoice!</td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-63614438918009270262014-02-06T10:37:00.002+01:002014-10-23T10:38:48.084+02:00Drupal - Accessibility: ways of adding language attributes to parts of your text that differ from the main page language<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Pu4RawoY_KY/UvNMNYX__rI/AAAAAAAAAOQ/8IJsaZp--E4/s1600/il_340x270.257858667.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Pu4RawoY_KY/UvNMNYX__rI/AAAAAAAAAOQ/8IJsaZp--E4/s1600/il_340x270.257858667.jpg" height="158" width="200" /></a></div>
<span style="text-align: center;">One of the accessibility rules, especially targeted to screen readers, is that text parts written in a language different from the main page and navigation language should be tagged (or more correctly 'attributed') with this other language, so the screen readers know when to use what language.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-E78lMLKy4V8/UvNM4AtUBMI/AAAAAAAAAO4/ELu6Zobn3p4/s1600/ears.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-E78lMLKy4V8/UvNM4AtUBMI/AAAAAAAAAO4/ELu6Zobn3p4/s1600/ears.jpg" height="200" width="138" /></a></div>
I remember the fun we had on the Institute for Plasmaphysics Rijnhuizen (Nieuwegein, the Netherlands) making the first Macs with screenreaders read out a Dutch text. As the reader was only able to read english texts a perfectly readable Dutch text came out as Jibberish spoken by someone who's been drinking Jenever (dutch booze) all day while eating a tuna-sandwich.....<br />
<br />
Here I show two ways how to achieve this, (that is adding the attributes to the tags, not the tuna-sandwich part).<br />
Case 1 in Drupal 6 wysiwyg with Tinymce, and Case 2 in Drupal 7 with CKEditor. Goal is to select a part of the html, and add a language attribute. Or to the containing tag or to add a span tag...<br />
<br />
<span style="color: blue; font-size: x-small;"> <tag>Lorem ipsum and so forth</tag></span><br />
<br />
should become<br />
<br />
<span style="color: blue; font-size: x-small;"> <tag lang="en">Lorem ipsum and so forth</tag></span><br />
<div>
<br />
<br />
<b style="background-color: orange;">CASE 1 Drupal 6 </b></div>
<a href="http://2.bp.blogspot.com/-rLYnDAxEXDA/UvNMP_OmZdI/AAAAAAAAAOc/H5TWrInpOzg/s1600/handmovie.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/-rLYnDAxEXDA/UvNMP_OmZdI/AAAAAAAAAOc/H5TWrInpOzg/s1600/handmovie.jpg" height="240" width="320" /></a><br />
<b>D6 site, with the WYSIWYG module using tinymce</b><br />
1. Add html attributes button to your RTE<br />
1.1 Go to Administer > Site configuration > wysiwyg profiles<br />
1.2 edit any of the profiles where you want the users to be able to add the language attribute<br />
<span style="font-size: x-small;">admin/settings/wysiwyg/profile/1/edit</span><br />
<div style="text-align: start;">
<span style="text-align: center;">1.3 Open 'Buttons and plugins'</span></div>
1.4 Check 'HTML attributes'<br />
1.5 Save<br />
<br />
<br />
<br />
<b>Result: How to add a language identifier</b><br />
In your browser you can now find a new button <br />
<a href="http://4.bp.blogspot.com/-9kxbjVD8mQA/UvNMTyJ96xI/AAAAAAAAAOs/3frnkOu09wo/s1600/Over_de_raad_Raad_voor_de_leefomgeving_en_infrastructuur_-_2014-02-06_09.45.14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-9kxbjVD8mQA/UvNMTyJ96xI/AAAAAAAAAOs/3frnkOu09wo/s1600/Over_de_raad_Raad_voor_de_leefomgeving_en_infrastructuur_-_2014-02-06_09.45.14.png" /></a><br />
<b><i>a. Select part of a text and click this button </i></b><br />
This opens up a popup screen where you can add attributes<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Z-EehBw96-Q/UvNMWSLSptI/AAAAAAAAAO0/sx9FYFEXvA4/s1600/Insert_Edit_Attributes_-_2014-02-06_09.45.56.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Z-EehBw96-Q/UvNMWSLSptI/AAAAAAAAAO0/sx9FYFEXvA4/s1600/Insert_Edit_Attributes_-_2014-02-06_09.45.56.png" height="320" width="302" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><i>b. Behind language add the language identifier for the language used</i></b>f.i. en (english), nl (dutch) etc.<br />
<a href="http://www.w3schools.com/tags/ref_language_codes.asp" target="_blank">See also http://www.w3schools.com/tags/ref_language_codes.asp</a><br />
<b><i>c. Click insert</i></b><br />
And the language identifier is added to the tag containing the textpart.<br />
NB! <br />
If you add an identifier to a part where a mother tag already contains the same language identifier, the identifier is not added. This seems logical because there is no need for this identifier at all.<br />
<br />
<br />
<br />
<b>Problem: adding lang attribute to inline tags</b><br />
You cannot add attributes to inline tags like <span><br />
This is really annoying cause you have lots of cases where the other language words or sentences are inline with the other text. Like when I tell you the Dutch word for annoying is <i>irritant</i>.<br />
<b><br /></b>
<b><br /></b>
<b>Solution: use <em></b><br />
<div class="separator" style="clear: both; text-align: center;">
<b><a href="http://3.bp.blogspot.com/-JYbhwhiiA3w/UvNdfrYQZTI/AAAAAAAAAPI/u1xcPm4Wfok/s1600/Muscles_Use%E2%80%99em_or_lose%E2%80%99em._Running_Quotes_-_2014-02-06_11.01.09.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://3.bp.blogspot.com/-JYbhwhiiA3w/UvNdfrYQZTI/AAAAAAAAAPI/u1xcPm4Wfok/s1600/Muscles_Use%E2%80%99em_or_lose%E2%80%99em._Running_Quotes_-_2014-02-06_11.01.09.png" height="189" width="200" /></a></b></div>
But a solution is to use the <em> tag and css. The html attributes will be added to the <em> tag.<br />
<i>NB! </i><br />
<i><b>a. First make the text part italic!</b></i><br />
<b><i>b. Then select part of the inside italic text, not all, and add the language identifier.<br />c. Save</i></b><br />
If you select the whole italic part (including the em tags), the system will find the nearest containing tag and add the language identifier to that one.<br />
<b>d. To avoid the other language being shown as italic, you can target this em element with the language selector in the css.</b><br />
<a href="http://www.w3schools.com/cssref/sel_lang.asp">http://www.w3schools.com/cssref/sel_lang.asp</a><br />
<br />
So like when you main language identifier is english<br />
<br />
<div style="text-align: center;">
<div style="text-align: left;">
<span style="color: blue; font-size: x-small;"> em:lang(nl),em:lang(fr), em:lang(ge)</span></div>
</div>
<span style="color: blue; font-size: x-small;"> </span><span style="color: blue; font-size: x-small;"> </span><span style="color: blue; font-size: x-small;">{</span><br />
<span style="color: blue; font-size: x-small;"></span><span style="color: blue; font-size: x-small;"> </span><span style="color: blue; font-size: x-small;"> </span><span style="color: blue; font-size: x-small;"> font-style:</span><span style="font-size: x-small;"><span style="color: purple;">normal; </span></span><br />
<span style="color: blue; font-size: x-small;"> </span><span style="color: blue; font-size: x-small;"> </span><span style="color: blue; font-size: x-small;">} </span><span style="font-size: x-small;"></span><br />
<span style="font-size: x-small;">
</span>
<br />
<i><br />NB!</i><br />
Adding the em:lang(en) in the above css would change all em to normal, because the language selector simply looks for any language identification, may it be in the tag itselve, or in the header of the document like <span aria-expanded="true" class="nodeLabelBox repTarget " role="treeitem"><span class="nodeName editable "><html </span></span><span class="nodeAttr editGroup "><span class="nodeName editable ">lang</span>="en"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">dir</span>="<span class="nodeValue editable ">ltr</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">xml:lang</span>="en"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">xmlns</span>="<span class="nodeValue editable ">http://www.w3.org/1999/xhtml</span>"</span><span class="nodeBracket editable insertBefore ">></span><br />
<br />
<br />
<span style="font-size: x-large;"><span style="color: red;"><em lang="zh-Hant</span><span style="color: red;">"></span></span><span style="color: lime; font-size: large;"><b>希望對您有所助益</b></span><span style="color: red; font-size: x-large;"><em></span><br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<b>PROBLEM!</b></div>
There is a major problem in Drupal concerning these attributes. From the accessiblity viewpoint, it should be very simple to add a language attribute to every element. But I have to figure out yet how to add a language attribute to a field like the title. (Or the resulting display of this in a nodereference rendering)<br />
There are two language layers here you have to consider: The field language, which simply identifies in which languagepart of the site you want this field to show up, so in case of content translation this is the context language of the container entities, in case of field translation it is the [lang] part of the field. <br />
For instamce, Being Dutch have nodes with partly Dutch and English titles: "Presentatie resultaten onderzoek 'Designed to Last' op 8 oktober 2014".<br />
Trying to convince my governmental organisations to change the titles of their reports to solid Dutch does not work, so I have to deal with this. The result should be<br />
<br />
<h1>Presentatie resultaten onderzoek <span lang="en" xml:lang="en">'Designed to Last'</span> op 8 oktober 2014</h1><br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I solved it using a jquery on the specific nodes with these kinds of titles, but thats rather an unsatisfying solution.</div>
<br />
<br />
<span style="background-color: orange;">CASE II : Drupal 7 </span><br />
<br />
So, I figured out how to do this in Drupal 7 with CKEditor. There is a CKEditor plugin you can install and download<br />
Of course, because why should life be easy, there are some irritating bugs or features or whatever....<br />
<br />
<b>0. Plugin</b><br />
You can download the plugin from here<br />
<a href="https://github.com/fredck/CKEditor-Languages-Plugin">https://github.com/fredck/CKEditor-Languages-Plugin</a><br />
<br />
In the example hereunder my module path is<br />
/sites/all/modules/contrib/ckeditor<br />
and I've installed the ckeditor itself in<br />
/sites/all/modules/contrib/ckeditor/ckeditor<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>1. Now make a folder 'languages' in </b></div>
<div class="separator" style="clear: both;">
/sites/all/modules/contrib/ckeditor/ckeditor/plugins</div>
<br />
<b>2. put plugin.js and icon.png in this folder</b><br />
/sites/all/modules/contrib/ckeditor/ckeditor/plugins/languages<br />
<br />
<b>3. open ckeditor.config.js in the root of your module and add these lines</b><br />
<div class="p1">
<span class="s1"><span class="Apple-tab-span"> </span><br /><span style="color: blue; font-size: x-small;"> config.extraPlugins </span></span><span style="color: blue; font-size: x-small;"><span class="s2">= 'languages'</span><span class="s1">;</span></span></div>
<div class="p2">
<span style="color: blue; font-size: x-small;"> // The languages you want to support (code:name).</span></div>
<div class="p4">
<span style="color: blue; font-size: x-small;"><span class="s3"> config.language_list </span><span class="s1">= </span><span class="s4">[ </span><span class="s1">'de:German'</span><span class="s3">, </span><span class="s1">'fr:French'</span><span class="s3">, </span><span class="s1">'es:Spanish'</span><span class="s3">, </span><span class="s1">'it:Italian'</span><span class="s3">, </span><span class="s1">'en:English'</span><span class="s3"> </span><span class="s4">]</span><span class="s3">;</span></span></div>
<div class="separator" style="clear: both;">
</div>
<div>
<br />
NB! This is different from the installation instructions on GIThub.<br />
<br />
<b>4. Clear your Drupal cache AND clear your browser cache</b><br />
(the ckeditor does not clear its javascript files on the normal Drupal cache clear)</div>
<div>
<br /></div>
<div>
<b>5. Go to your CKEditor settings and add the languages button to your editor</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-IQ_RnhEzR10/VEfJ-SwXy9I/AAAAAAAAAb4/JXsA4dJb1BQ/s1600/Edit_Column_Het_wilde_leven_van_boer_harm_Raad_voor_de_leefomgeving_en_infrastructuur_-_2014-10-22_16.43.52.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://3.bp.blogspot.com/-IQ_RnhEzR10/VEfJ-SwXy9I/AAAAAAAAAb4/JXsA4dJb1BQ/s1600/Edit_Column_Het_wilde_leven_van_boer_harm_Raad_voor_de_leefomgeving_en_infrastructuur_-_2014-10-22_16.43.52.png" /></a></div>
<div>
(In an older version the visual UI did not work, but the manual did. Now this seems ok)<br />
<br />
<br />
<b>6. Content filters</b><br />
You'd probably might have to change you content filters to allow for these attributes, but apart from that it should work. I had to add <br />
<br />
<span style="color: blue; font-size: x-small;"> p h1 h2 h3 h4 em span [*]</span><br />
<br />
under the extra allowed content in the ckeditor setting for my filtered and full html<br />
(/admin/config/content/ckeditor/edit/Filtered)<br />
For more infor on this see <a href="http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules">http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules</a><br />
<br />
<br />
<b>7. Rejoice in many languages</b><br />
And yes, ganz lustig, it works<br />
<br />
<pre id="line1"><b><span style="color: blue; font-size: x-small;"> And yes, <<span class="start-tag">span</span> <span class="attribute-name">dir</span>="<a class="attribute-value" href="https://www.blogger.com/null">ltr</a>" <span class="attribute-name">lang</span>="<a class="attribute-value" href="https://www.blogger.com/null">de</a>" <span class="attribute-name">xml:lang</span>="<a class="attribute-value" href="https://www.blogger.com/null">de</a>">ganz lustig</<span class="end-tag">span</span>>, it works</span></b></pre>
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-75447712835666838682014-02-04T16:59:00.002+01:002014-02-04T16:59:28.715+01:00Make two divs equal height with jquery (in Drupal)One problem I often face is that I have two divs, a content div and next to it another div with a menu, or links to related content or whatever. And I want both divs,<i> f.i. #content and #rightbar</i>, to be equal height, but they are added loosely to the html bacause the html needs to be responsive. Sometimes you can get it working with css, but lots of time I get lost.<br />
One solution is to simply compare the two and make them equal height with a javascript/jQuery function.<br /><br />
<br />
<div class="p1">
<span style="font-size: x-small;"><span class="s1">function </span>equalHeight<span class="s1">(</span>one,two<span class="s1">) {</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s1"><span class="Apple-tab-span"></span> var </span>tallest <span class="s2">= </span><span class="s3">0</span>;</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="Apple-tab-span"></span> tallest<span class="s2">=</span>one.height<span class="s1">()</span>;</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="Apple-tab-span"></span><span class="s1"> if (</span>tallest <span class="s2">< </span>two.height<span class="s1">()) {</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s1"><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span></span> tallest<span class="s2">=</span>two.height<span class="s1">()</span>;</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="Apple-tab-span"></span><span class="s1"> }</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s1"></span> one.height<span class="s1">(</span>tallest<span class="s1">)</span>;</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="Apple-tab-span"></span> two.height<span class="s1">(</span>tallest<span class="s1">)</span>;</span></div>
<br />
<div class="p2">
<span style="font-size: x-small;">}</span></div>
<div class="p2">
<br /></div>
<div class="p2">
<br /></div>
<div class="p2">
Call this function in a document ready like so<br />
</div>
<div class="p1">
<br /></div>
<div class="p1">
<span style="font-size: x-small;">(function (<span class="s1">$</span>) {<br />// drupal jquery wrapper</span></div>
<div class="p2">
<span style="font-size: x-small;"><span class="s1"> $</span>(<span class="s3">document</span>)<span class="s1">.ready</span>(function() {</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s1"><span class="Apple-tab-span"> </span> </span><span class="s2">equalHeight</span><span class="s1">(</span><span class="s2">$</span><span class="s1">(</span>"#content"<span class="s1">)</span><span class="s2">,$</span><span class="s1">(</span>"#rightbar"<span class="s1">))</span><span class="s2">;</span></span></div>
<br />
<div class="p1">
<span style="font-size: x-small;"> })<span class="s1">;</span></span></div>
<div class="p1">
<span class="s1"><span style="font-size: x-small;"><br /></span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s1"> function </span>equalHeight<span class="s1">(</span>one,two<span class="s1">) {</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s1"><span class="Apple-tab-span"></span> var </span>tallest <span class="s2">= </span><span class="s3">0</span>;</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="Apple-tab-span"></span> tallest<span class="s2">=</span>one.height<span class="s1">()</span>;</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="Apple-tab-span"></span><span class="s1"> if (</span>tallest <span class="s2">< </span>two.height<span class="s1">()) {</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s1"><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span><span class="Apple-tab-span"></span></span> tallest<span class="s2">=</span>two.height<span class="s1">()</span>;</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="Apple-tab-span"></span><span class="s1"> }</span></span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="s1"></span> one.height<span class="s1">(</span>tallest<span class="s1">)</span>;</span></div>
<div class="p1">
<span style="font-size: x-small;"><span class="Apple-tab-span"></span> two.height<span class="s1">(</span>tallest<span class="s1">)</span>;</span></div>
<br />
<div class="p1">
<span style="font-size: x-small;"><span class="s1"></span></span></div>
<div class="p2">
<span style="font-size: x-small;"> }</span></div>
<div>
<span style="font-size: x-small;">// emdof drupal jquery wrapper</span></div>
<div class="p1">
<span class="s1"><span style="font-size: x-small;">
</span></span></div>
<div class="p2">
<span style="font-size: x-small;"><span class="s1">}(</span>jQuery<span class="s1">))</span>;</span></div>
Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-29007856328176118672014-02-03T09:56:00.002+01:002014-02-03T14:07:42.593+01:00Lost books of the Bible: The book of MetatheriaThere must be a lost biblebook which explains why all marsupials went straight to Australia after Noahs Ark stranded. 'Bye Noah, thanks for saving us!' And none of them decided to stop somewhere halfway in Afghanistan or China.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-NeGsstmAWEE/Uu9ZjzpSszI/AAAAAAAAANw/5fZHZlVwsVI/s1600/Noah_catacombe.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-NeGsstmAWEE/Uu9ZjzpSszI/AAAAAAAAANw/5fZHZlVwsVI/s1600/Noah_catacombe.jpg" height="640" width="457" /></a></div>
<br />
Well then, except for the opossum and the shrew opossum which went to respectively North and South America, and some lazy marsupials which, crossing Indonesia, decided to take a break and simply stayed there.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-_0mUQLA9eYE/Uu9Zh7nCZjI/AAAAAAAAANs/1by34YJGvr0/s1600/tasmaanse-tijger.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-_0mUQLA9eYE/Uu9Zh7nCZjI/AAAAAAAAANs/1by34YJGvr0/s1600/tasmaanse-tijger.jpeg" height="246" width="400" /></a></div>
<br />
And they thus spoke to them, saying: 'Ah, don't worry, we'll cach up later....'. But that's all explained in this lost Bible book: 1 Metatheria 2:7<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-13556471957859428962014-01-25T23:15:00.000+01:002014-01-25T23:18:08.513+01:00Life and Death questions: Where to write the copyright in an image tag? In the Alt or in the Title attribute?One of the important questions in my life is where to write the copyright statement in an Image tag. It's sometimes keeps me awake at night. It is one of those daunting questions which are not answered by one google query. For lots of use cases adding the copyright statement as a caption under the image is not an option.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ntuwCKcnR0I/UuQ2xM4pY1I/AAAAAAAAANY/4fVLUwnEmC4/s1600/CC-copywrong-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The copyright sign mirrored" border="0" src="http://3.bp.blogspot.com/-ntuwCKcnR0I/UuQ2xM4pY1I/AAAAAAAAANY/4fVLUwnEmC4/s1600/CC-copywrong-logo.jpg" height="320" title="I stole this image somewhere from a website, so now it is mine - (c) Egbert Bleyenburg" width="320" /></a></div>
<br />
<br />
<br />
<b>ALT</b><br />
The alt attribute should contain a description, in 150 characters or fewer, preferably a description in the context of the embedding page, of the visual content of the image. This is the part that mr. Google indexes. So it is the SEO part of the image as well as the visually impaired part, targeted at screenreaders and the like.<br />
<br />
<b>TITLE</b><br />
The title contains the text that appears in the tooltip when you move your mouse over the image. It should contain additional info, like if the image is linked, where the link will lead you.<br />
<br />
<br />
<b><i><span style="font-size: large;">The Answer: The Title attribute</span></i></b><br />
As the copyright is not a visual description of the image, you should therefore add it to the title attribute. This is also suggested by w3c.<br />
<br />
<b>But</b><br />
But on the other hand, as you probably would like to buzz the photographers name around on the internet, and would like the search engines to find all the images belonging to a certain copyright holder, the alt attribute is also used for the copyright statement by lots of sites. The alt text should never begin with the copyright statement, but it is used a lot.<br />
I do not know if there are any accessibility rules targeting the credit statement specifically for this matter. <br />
Reading all information I suppose that from the viewpoint of accessibility it is a bad solution, but from the viewpoint of the search engines, it is a good solution.<br />
<br />
<br />
<br />
<br />
<br />Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-11253464605257345162014-01-24T14:30:00.004+01:002014-02-06T12:46:15.834+01:00Drupal 7 - specifying different output per role type in a templateLot's of time I want content or links hidden for unauthenticated users but shown to the site administrators or other user roles. As I always forget how I do it, and then search in old code or ask my old friend mister Google, here's a little blog about how to:<br />
<br />
In the template, for instance a field template for a field in a view, add this code.<br />
<br />
<pre class="default prettyprint prettyprinted"><code><span class="com"><i><span style="font-size: x-small;">// load the global user object</span></i></span></code></pre>
<pre class="default prettyprint prettyprinted"><span style="font-size: x-small;">global $user;</span></pre>
<pre class="default prettyprint prettyprinted"><code><span style="font-size: x-small;"><span class="com"><i>// Check if user has (f.i.) the 'administrator' or 'contributor' role.</i></span><span class="pln">
</span><span class="kwd">if</span><span class="pln"> (</span><span class="pln">in_array</span><span class="pun">(</span><span class="str">'administrator<span class="str">'</span><span class="pun">,</span><span class="pln"> $user</span><span class="pun">-></span><span class="pln">roles</span><span class="pun">)||<span class="pln">in_array</span><span class="pun">(</span><span class="str">'contributor<span class="str">'</span><span class="pun">,</span><span class="pln"> $user</span><span class="pun">-></span><span class="pln">roles</span><span class="pun">)</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span></span></span><i><span class="pln"> </span></i></span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span style="font-size: x-small;"><i><span class="com"> // do something</span></i><span class="pln">
</span><span class="pun">} else {</span></span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun"><i><span style="font-size: x-small;"> // do something else</span></i></span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun"><span style="font-size: x-small;">}</span></span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun">
</span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun">
</span></code></pre>
NB! I use this on small sites. It is fast and easy.<br />
<br />
For larger sites solution you should define these things using permissions, otherwise the site will in time become unmaintainable. Adding a permission to another role might then mean changing twenty template files or so.<br />
<br />
<pre class="default prettyprint prettyprinted"></pre>
<pre class="default prettyprint prettyprinted"><span style="font-size: x-small;"><i> // user_access default takes the current logged in user as user object
if (user_access('permission x')) { </i></span></pre>
<pre class="default prettyprint prettyprinted"><code><span style="font-size: x-small;"><i> // do something</i></span></code></pre>
<pre class="default prettyprint prettyprinted"><span style="font-size: x-small;"><i> } else </i></span><span style="font-size: x-small;"> {</span></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun"><i><span style="font-size: x-small;"> // do something else</span></i></span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun"><span style="font-size: x-small;"> }</span></span></code></pre>
<div>
<code><span class="pun"><span style="font-size: x-small;"><br /></span></span></code></div>
<br />
Because setting up the normal permissions may become very complex, you can also add custom permissions with this module https://drupal.org/project/config_perms and use them in your template file for this kind of functionality.Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-46010546246161489622013-12-02T13:44:00.004+01:002014-01-09T09:06:15.334+01:00National Library of the Netherlands - Migrating multilingual xHTML from a shoe-box to Drupal 7<div class="separator" style="clear: both; text-align: center;">
</div>
In fact I am a very lazy person. That's why I studied theoretical physics. In school I simply compared the number and thickness of the books for the different studies, and concluded that physics must be the one where this laziness would prosper most.<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-CZRKjuz9m40/UpyGIRLeVfI/AAAAAAAAAMo/bVp50ARJceM/s1600/Qed_rules.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-CZRKjuz9m40/UpyGIRLeVfI/AAAAAAAAAMo/bVp50ARJceM/s320/Qed_rules.jpg" height="187" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Feynman diagrams</td></tr>
</tbody></table>
The thing is, as soon as you understand a part of physics, you can stop reading. Not so with history, not so with all other subjects. They require hard mental labour.<br />
(I have to find some apology for studying philosopy lateron, so any suggestions are welcome....)<br />
<br />
<b>Hail Laziness</b><br />
Laziness is one of the least respected human inclinations. If there where no lazy people, no one would have invented the car, the combine, the phone et cetera. We would all be working our asses off all day in the fields, pushing little grains out of their stalks one by one. Books would have no indexes. Skyscrapers no elevators. Chairs no legs.<br />
<b><br /></b>
<b>Royal Library of the Netherlands</b><br />
One fine day (early 2012) we got like the following request from the <a href="http://www.kb.nl/en" target="_blank">Royal Library</a>. <br />
<br />
<i>On the left we've got twenty shoeboxes of HTML, and on the right we have a brand new core structure for the website in Drupal 7: Contenttypes, Display Suite, Views and all. <br />Could you please import the information from the shoeboxes into the Drupal 7 system. Thankyouverymuch and Yesterday would be fine.</i><br />
<br />
Being Lazy we simply said: Yes, of course we can. There is nothing we can't do. <br />
And then imagine the soundtrack of Jaws on the background........ <br />
<br />
<b>Delusions of simplicity </b><br />
We said so because the concept in itself is very simple. <br />
<br />
Here we have content A, B and C. In booklet X. <br />
There, on the other side, is a new booklet Y.<br />
Now copy A, B and C to booklet Y.<br />
<br />
<span style="color: lime;"> X( A B C )</span> --> <i><span style="font-family: "Trebuchet MS",sans-serif;"><b> <span style="color: purple;">Y( A B C ) </span></b></span></i><br />
<br />
<br />
<b>What the hell were you thinking!</b><br />
The source being ante-diluvian xHTML, more or less templated, from which we had to sift images, downloads and all other digital objects, parse all content from all these different structured pages, and then load and upload everything in the totally different structured Drupal 7 system.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-ysPGhyD7X2g/UpyHXNYoRMI/AAAAAAAAAM4/BtmhqmCY6nY/s1600/13_74g37a_1v_2r.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-ysPGhyD7X2g/UpyHXNYoRMI/AAAAAAAAAM4/BtmhqmCY6nY/s640/13_74g37a_1v_2r.jpg" height="440" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Book of Hours of Simon de Varie.<b> </b>Paris, 1455; Tours, c. 1455.<br />
Vellum, 99 leaves, 116 x 85 mm. - 74 G 37a, fol. 1v-2r</td></tr>
</tbody></table>
We're talking repeatable fieldcollections in repeatable fieldcollections, migrating source images to different caching formats, programmatically generating en configuring viewmodes, and showing them via the Display Suite and the Media module, which at the time was still in the development phase. And apart from that, there was still development going on the the target Drupal site. <br />
Oh Yeah, and did I mention the multilingual part? English and Dutch.<br />
<br />
So it's a project with a big red rubber stamped warning on the cover: <br />
<br />
<b><span style="color: red;"><span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"> Send project manager to </span></span></span></b><br />
<b><span style="color: red;"><span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"> high altitude trainingcamp </span></span></span></b><br />
<b><span style="color: red;"><span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"> before start!</span></span></span></b><br />
<br />
Or, stated differently, in common ICT jargon: Blood, Sweat and Tears ahead.<br />
<br />
<b>Analysis: Dance like a butterfly...</b><br />
The approach we used was the equivalent of<i> dance like a butterfly and sting like a bee</i> in webdevelopment. There is no way to oversee all problems in this kind of large projects concerning conversions between two totally different systems. In the quotation we made, which needed to be fixed price, we tried to include some bleeding control, but we knew beforehand that we were entering the <i>Swamp </i>part of our Portfolio. <br />
It proved for instance especially difficult to emulate the maintenance features in the old system, which was an xml based editor. There was no way we could migrate these features to the new D7 setup. We were down to analysing every feature and approach it from a totally different angle in D7. <br />
Another unexpected tricky part was recalculating all internal links in the site. We had to iterate all pages aproximately twenty times before we had all link types covered. Some linkit, some entityreferences, some link fields, et cetera.<br />
Don't get me started...<br />
For the sake of your mental health I will not elaborate on the technical details, anyone interested can contact me directly, but it's a lot like this <br />
<span style="color: blue; font-size: xx-small;"> $filename2=createfilenameforimage($filenamearr);</span><br />
<span style="color: blue; font-size: xx-small;"> $file2 = file_save_data($image2, 'public://'.$filename2,FILE_EXISTS_RENAME);<br /> $field_collection_item->field_afbeelding=array(LANGUAGE_NONE => array('1' => (array)$file2));</span><br />
<span style="color: blue; font-size: xx-small;"> $field_collection_item->field_alttekst[LANGUAGE_NONE][0]['value'] = $animageobject->alt; <br /> $field_collection_item->field_titletekst[LANGUAGE_NONE][0]['value'] = $animageobject->title; </span><br />
<br />
and than for days on end....<br />
(And as for the bleeding part: Whoever thought up the idea of littering PHP code with all these dollar signs?)<br />
<br />
<b>5% inspiration, 99% iteration</b><br />
I think we did about ten migrations. And after every migration the Royal Library checked the new site and discovered some new features or parts that weren't specified but certainly needed to be migrated as well. The Math was never right!<br />
<br />
<b>Never again!</b><br />
And when you are finaly finished, and the site is migrated and the Royal Library is happy, the first three days you say to yourself: Never again. Behind every mountain there was another mountain, behind every tree there was a madman with an axe, behind every solution there appeared a brand new grinning unexpected problem produced by the very same solution, with five other problems stacked up his sleeve.<br />
But on the fourth day you realise how much fun we had, how much we learnt about the internal workings of Drupal.<br />
<br />
<b>Geek sucks </b><br />
I sometimes mind the Geeky part of my work, days of trying to get a certain piece of code right, minimal pixel adjustment feuds with the designers, that stuff. But when the subject matter itself is something like the Royal Library content, or digital heritage projects in general, I might just possibly be able to live with that.<br />
<br />
<br />
<a href="http://www.kb.nl/en" target="_blank">http://www.kb.nl/en </a>Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-45906848655858081692013-11-30T23:12:00.006+01:002013-12-02T11:49:51.022+01:00Drupal 7 - Moving the messages text from a zone to a region in an Omega subthemeThe messages always mess up my page layout, so I usually simply want them on the top of my page content. <br /><br />1. remove message from its default postion<br />1.a Copy zone--content.tpl.php to your subtheme's template directory (if you have not done that already)<br />1.b Remove these lines<br /><span style="font-family: "Courier New",Courier,monospace;"><span style="font-size: xx-small;"> <?php if ($messages): ?><br /> <div id="messages" class="grid-<?php print $columns; ?>"><?php print $messages; ?></div><br /> <?php endif; ?></span></span><br />
<br />2. transfer the messages variable to the region template<br />2.a Open template.php<br />2.b add a preprocess functio, or modify if you alreay have one<br /><span style="font-family: "Courier New",Courier,monospace;"><span style="font-size: xx-small;"><br /> function THEMENAME_preprocess_region(&$vars) {<br /> $theme = alpha_get_theme();<br /> if ($vars['elements']['#region'] == 'content') {<br /> $vars['messages'] = $theme->page['messages'];<br /> }</span></span><br />
<span style="font-family: "Courier New",Courier,monospace;"><span style="font-size: xx-small;"> }</span></span><br />
<br /><br />3. add the messages to the region template<br />Just write anywhere you want in the template<br /><span style="font-size: xx-small;"><span style="font-family: "Courier New",Courier,monospace;"> <?php if ($messages): ?><br /> <div id="messages" class="grid-<?php print $columns; ?>"><?php print $messages; ?></div><br /> <?php endif; ?></span></span>Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0tag:blogger.com,1999:blog-231689708642127938.post-69352430752010069042013-11-30T23:12:00.004+01:002013-11-30T23:15:17.412+01:00Drupal 7 - Adding multiple javascript files to an Omega subthemeAdding a javascript to an Omega subtheme is a bit complex. <br />
I'd rather use <span class="code">scripts[] = js/chr.js in the info file, which works by the way, but for some reason you first need to add the js file as a library, and then enable it in the settings.<br />(see https://drupal.org/node/1416128 and https://drupal.org/node/1205984)<br />I this example I add one library containing two javascript files.<br /><br /><b>0. Add your javascript files in the js folder of your theme</b><br />(in this example I use files chr.js and chr2.js)<br /><br /><b>1. Add some code like this to your theme's info file</b></span><br />
<span style="font-size: x-small;"><i><span class="code">libraries[chromega][name] = CHR KHR main javascript<br />libraries[chromega][description] = Quirqks and Jeeeequery fun for th CHR website<br />libraries[chromega][js][0][file] = chr.js<br />libraries[chromega][js][0][options][weight] = 1<br />libraries[chromega][js][1][file] = chr2.js<br />libraries[chromega][js][1][options][weight] = 2</span></i></span><br />
<span class="code">(you can use any name where I use chromega)</span><br />
<br />
<span class="code"><b>2. Go to your theme's settings page</b><br /><b><br />3. Select tab <i>toggle libraries</i> and add your custom library</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SqnkLI4pn6M/Uppaznkit4I/AAAAAAAAAMU/ljeXvlGN184/s1600/Appearance+_+International+Commission+for+the+Hydrology+of+the+Rhine+basin+(CHR)+-+2013-11-30_22.37.15.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="173" src="http://1.bp.blogspot.com/-SqnkLI4pn6M/Uppaznkit4I/AAAAAAAAAMU/ljeXvlGN184/s320/Appearance+_+International+Commission+for+the+Hydrology+of+the+Rhine+basin+(CHR)+-+2013-11-30_22.37.15.png" width="320" /></a></div>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><br /></span>
<span class="code"><b>4. Clear you cache </b> </span><br />
<span class="code"><b><br />5. and then GO javascripting</b> (I always forget the structure for the D7 javascript files so thats why I add this wonderfull example) </span><br />
<span class="code"><br /></span>
<span class="code"><span style="font-size: xx-small;"><span style="font-family: "Courier New",Courier,monospace;">// JavaScript Document<br />// http://drupal.org/node/756722<br />(function ($) {<br /> //////////////////////////////////////////////////////////////////////////////////////// All code here<br /> $(document).ready(function() {<br /> // maak op d ehomepage beide blokken even lang<br /> dotherightthing(); <br /> });<br /> function dotherightthing(){<br /> alert('Do the right thing!');<br /> }<br /> //////////////////////////////////////////////////////////////////////////////////////// end of all code <br />}(jQuery));</span></span></span><br />
<span class="code"><br /></span>
<b><span class="code"><br /></span></b>
<b><span class="code"> ---</span></b><br />
<b><span class="code"><br />Nota bene</span></b><br />
<span class="code">For some reason this (lazy) way of adding the javascript in the template file does not work</span><br />
<br />
<pre><span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">function <b>themename</b>_preprocess_page(&$variables) {
drupal_add_js(path_to_theme() . '/js/chr.js');
}</span></span></pre>
Overboordhttp://www.blogger.com/profile/01341766120758679799noreply@blogger.com0