php - suggestions - template drupal 7

Drupal 7: agrega la misma clase a todas las etiquetas<img> en el área de contenido

Question

Tengo un sitio de Portafolio en línea que transferí de HTML estático a Drupal 7, tratando de aprender Drupal. Tengo 3 páginas separadas que tienen galerías de imágenes. Tengo un archivo javascript (.js) que agrega reflejos a cualquier imagen que tenga una clase = "reflejar". En HTML, esto es fácil de hacer, obviamente, y estaba funcionando bien en mi sitio estático. Me gustaría seguir utilizándolo, pero no puedo imaginar cómo agregar la clase requerida a mis imágenes.

Resultado deseado:

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

y así...

Dirigiéndose a otras sugerencias encontradas: Todas mis imágenes actualmente no tienen una clase en absoluto. Encontré un par de soluciones alternativas propuestas, pero no se ajustaban a mis necesidades, ya que necesito agregar la misma clase a todas las etiquetas presentes, sin tener en cuenta ninguna otra, como el encabezado y el pie de página. Además, aunque sé un poco de PHP, no soy bueno en eso. Se supone que Drupal es completamente dinámico, así que estoy seguro de que hay una manera de hacerlo, pero estoy perdido.

Answer 1

Puede implementar theme_image () para hacer eso, en su archivo template.php solo escriba lo siguiente:

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) . '' />'';
}

Tenga en cuenta que esta clase se agregará a todas las imágenes del sitio.

Espero que esto ayude ... Muhammad.

Answer 2

Puedes poner tus imágenes en un div y asignarle una clase a todas las imágenes, algo como esto:

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

Y define tu clase:

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

Answer 3

Sí, puede envolver div con id y agregar css para la etiqueta img en el archivo css. También puedes usar jquery.