CODEWITHSUNDEEP
phpdrupaldrupal-7drupal-theming
Biggest
Biggest

Reputation: 671

Drupal 7 - add the same class to all <img> tags in the content area

I have an online Portfolio site that I transferred from a static HTML into Drupal 7 - trying to learn Drupal. I have 3 separate pages that have image galleries. I have a javascript (.js) file that adds reflections onto any image that carries a class="reflect". In HTML, this is easy to do, obviously, and it was working just fine in my static site. I would like to continue using it, but I cannot for the life of me figure out how to add the required class to my images.

Desired Result:

<img src="image.jpg" class="reflect" />
<img src="image2.jpg" class="reflect" />
<img src="image3.jpg" class="reflect" />

and so on...

Addressing other found suggestions: All of my images currently do not carry a class at all. I did find a couple of proposed work-around's but they didn't quite suit my needs as I need to add the same class to all of the tags present, while ignoring any elsewhere, such as the header and footer. Plus, while I know a little PHP, I'm not great at it. Drupal is supposed to be completely dynamic so I'm sure there's a way to do this, but I'm at a loss.

Upvotes: 4

Views: 828

Answers (3)

Muhammad Reda
Muhammad Reda

Reputation: 27033

You can implement theme_image() to do that, in your template.php file just type the following:

function [YOUR_THEME]_image($variables)
{
    $attributes = $variables['attributes'];
    $attributes['src'] = file_create_url($variables['path']);

    $attributes['class'][] = 'reflect'; // add the class name here

    foreach (array('width', 'height', 'alt', 'title') as $key) {

        if (isset($variables[$key])) {
            $attributes[$key] = $variables[$key];
        }
    }

    return '<img' . drupal_attributes($attributes) . ' />';
}

Kindly note that this class will be added to all the images across the site.

Hope this helps... Muhammad.

Upvotes: 4

Lalit Jain
Lalit Jain

Reputation: 136

Yes, you can wrapper div with id and add css for img tag in css file. You can also use jquery.

Upvotes: 0

Peon
Peon

Reputation: 8020

You can put your images in a div and assign a class through it to all images something like this:

<div class="imgDiv">
    <img src="image.jpg" alt="" />
    <img src="image2.jpg" alt="" />
    <img src="image3.jpg" alt="" />
</div>

And define your class:

.imgDiv img {
    border: 2px solid #f00;
}

Upvotes: 0

Related Questions