By Eider on

I have created a View with teaser images, but I want the images to have an additional css class for a 3d Carousel.

The current output of the image field:

  <div class="views-row views-row-2 views-row-even">
      
  <div class="views-field-field-teaser-fid">

                <span class="field-content"><img  class="imagefield imagefield-field_teaser" width="205" height="300" alt="" src="http://yoursite.com/dev/sites/default/files/my-image.jpg?1280411025" /></span>
  </div>
  </div>

I want to add "carousel" to 

<img  class="imagefield imagefield-field_teaser" .....

How can I achieve this?

Comments

Eider’s picture

Eider commented

Well, I've solved it so if anyone would like to do the same thing:

The name of the view is "collection" and I've created "views-view-fields--collection.tpl.php" with the following content:

<?php foreach ($fields as $id => $field): ?>
<?php /* Remove the ugly div code */ ?>
<?php $showimage = str_replace('imagefield imagefield-field_teaser','cloudcarousel', $field->content); ?>
      <?php print $showimage; ?>
<?php endforeach; ?>

I found it not really nice to use str_replace, but I don't know any method that is somewhat better.

nathanjo’s picture

nathanjo commented

Additionally, you can do this by looking at the Views Theme Information, you can see suggested templates.

Eider’s picture

Eider commented

Is it also possible to change the output of the Only local images are allowed. tag with the templates?
I couldn't find a neat solution to change this output, but had to do a replace with php in order to get add the right css class.

W.M.’s picture

W.M. commented

The above code generates errors in Drupal 7. The images do not appear at all. Any ideas as to what modifications need to be done to this php code in order to make it work inside Drupal 7?

Thanks.

CanOne’s picture

CanOne commented

you could do this with js like

$( ".YOURVIEW img" ).addClass( "newClass" )

but this is of course only workin if js is enabled

i used it once to get a reflection workin..this reflection works only if js is enabled anyway so i didnt needed the class if js was disabled

its not the best solution..but the easiest i think

gone404’s picture

gone404 commented

I ended up using THEME_preprocess_image() in template.php

Here is a code snippet:

/**
 * THEME_preprocess_image_style() is also available.
 */
function mytheme_preprocess_image(&$variables) {
  if(isset($variables['style_name'])) {
    if($variables['style_name'] == 'spotlight') {
      $variables['attributes']['class'][] = "banner";
      $variables['attributes']['class'][] = "with-shadow";
    }
  }
  //var_dump($variables);
}
charlie charles’s picture

charlie charles commented

Hi gone404

I'm trying to preprocess my image style like this example

<img class="media-object img-rounded img-responsive" src="http://placehold.it/350x250" >

My preprocess_image function is not adding any classes?

function bootstrap_subtheme_preprocess_image(&$variables) {
  if(isset($variables['style_name'])) {
    if($variables['style_name'] == 'logged-in') {
      $variables['attributes']['class'][] = "media-object";
      $variables['attributes']['class'][] = "img-responsive";
      $variables['attributes']['class'][] = "img-rounded";
    }
  }

}

Many thanks for your help

a.far2002’s picture

a.far2002 commented

You may want to use this into your CSS code:

.field-content > img{
...(whatever is in your "carousel" class)...
}

The trick is it selects and style every "img" tag element where the parent is a "field-content" class element.

Example:
Select and style every "p" tag element where the parent is a "div" tag element:

div > p { 
    background-color: yellow;
}

The following CSS article is very helpful:


Source: http://www.w3schools.com/cssref/sel_element_gt.asp
fateme365’s picture

fateme365 commented

You can add the following css to select img tag easily

div div img
{
  .....
}