2

I'm using views to output a link. The user gets two fields in which to add the href and the text on the link. I wan't them to be able to put a class on the link as well. How can I do this?

In views I have set a fixed class to all those links, but I wan't to be able to add another class if I wan't to, from the backend.

  • you want to add class to anchor tag <a> ? – Petro Popelyshko Feb 13 '13 at 15:40
  • Yes that's what I want to do. – Johan Dahl Feb 13 '13 at 15:49
  • Are you only asking how to add the class to the Views output, or do you also want help adding the form element and storing the data for the classname? – Andy Feb 13 '13 at 21:34
  • Both. I'm not sure I understand, but I wan't a form element in the backend where the user can put some text that will become the class of the link. – Johan Dahl Feb 14 '13 at 8:07
  • OK. And currently you have a link field attached to an entity, and that's what the user edits, yeah? (Also, are you using Views to display a list of links attached to different entities, or are you using it as a convenient way to display the link attached to just one entity?) – Andy Feb 14 '13 at 11:17
6

You can do this on the server side with a Views field tpl.php file, or on the client side with jQuery.


For the server side method, go to your view edit -> Advaced -> Theme:Information -> chose your field you need to create a one template file (in your theme/templates folder):

For example: if your field name is title you will see something similar to this:

Field Content: Title (ID: title): - click on it and cope the code

views-view-field--YOURVIEWNAME--page--title.tpl.php -paste it here

Now you have 3 variables to play with

 * - $field: The field handler object that can process the input
 * - $row: The raw SQL result that can be used
 * - $output: The processed output that will normally be used.

Easy way - do it with str_replace function :D

<?php $output = str_replace('<a', '<a class="someclass"', $output); ?>
<?php  print $output; ?>

Also you can play around with($row) and create your own output. To easy development install devel module so you can dpm($row) and see what it contains. or you can print_r($row). have fun <3


Fastest way to do this with jQuery you can simple add class to your fields anchor tag.

$(document).ready(function() {
    $('.your-views-class-name .your-view-field a').addClass('someclass');
}

open firebug(int firefox) and find your view class name and field class name which contains anchor tag and add class to it. You can do this in YOURTHEME - scripts.js or any other js file you want.

  • 1
    Yeah I know I can do it with jQuery. It's just that if feels wrong doing it that way. I don't mind it for small fixes, but to use jQuery to add classes for lot's of content just feels wrong. – Johan Dahl Feb 13 '13 at 16:23
  • yea, i can agree with you, probabaly you will need to create template for that field and manage classes there, need some research about this – Petro Popelyshko Feb 13 '13 at 16:29
  • Yeah I heard you can create templates for views. But I don't understand how that will give me a backend field to input the class name. However, I'm new to Drupal and views in particular so I have no clue really. – Johan Dahl Feb 13 '13 at 16:33
  • updated my answer – Petro Popelyshko Feb 13 '13 at 16:55
  • I'm trying to implement this solution. Is it necessary to implement the jquery and template file or is only creating the template file enough? I'm asking this as I did the template file but not getting the good result... – Justme Apr 19 '16 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.