web-dev-qa-db-fra.com

Une meilleure solution pour transformer le champ d'image en arrière-plan div?

Dans Drupal 7, je veux transformer mon champ d'image dans Views en quelque chose comme

<div style="background-image:url([field_someimgefield_image]);"></div>

afin que je puisse appliquer l'effet de défilement JQuery Parallax. Cependant, je ne suis pas en mesure d'obtenir le "chemin absolu" complet de mon image, même si j'utilise le "chemin absolu" sur les fonctionnalités de "sortie de ce champ sous forme de lien" et de "suppression des balises HTML". Tout ce que j'ai obtenu, c'est le nom du fichier, pas le chemin absolu complet.

Un autre problème que j'ai est le "Global: texte personnalisé" dans les champs, il n'a pas l'option de filtre de texte, donc je ne serais pas en mesure d'écrire le code ci-dessus.

Jusqu'à présent, je n'ai trouvé que le module " BackgroundField " pour le remplacement. Quelqu'un connaît une meilleure solution pour l'image d'arrière-plan div?

PS: l'astuce CSS ne fait que la rendre similaire, elles sont totalement différentes.

------ mise à jour des informations le 2 février 2015: 12:58 pm (

Les vues que j'ai sont une liste de nœuds contenant le titre et d'autres champs. Par conséquent, chaque nœud doit avoir son propre arrière-plan du champ d'image.

------ informations de mise à jour le 2 février 2015: 14:46 ---

On dirait que le module " BackgroundField " que j'ai mentionné ci-dessus est similaire à Background Images , qui ne fonctionne pas trop.

viewsentitiesmedia
6
CocoSkin

Il y a aussi la suite de modules Images d'arrière-plan :

Les images d'arrière-plan sont une collection de modules qui permettent aux utilisateurs d'ajouter des images d'arrière-plan aux éléments html sur les pages du site.

Il existe également un sous-module de groupe de champs pour la prise en charge des images d'arrière-plan appelé Image d'arrière-plan des groupes de champs :

Ce module crée un formateur d'affichage de groupe de champs qui consiste en un wrapper avec un arrière-plan.

L'arrière-plan peut être défini à partir de:

  • Un champ d'image de l'entité affichée
  • Un champ de couleur (des modules Color Field ou jQuery Colorpicker)

Ce module peut être utilisé avec Display Suite et est particulièrement utile pour créer des ensembles de panneaux Fieldable Panels personnalisés.

Vous mentionnez le défilement de parallaxe ... Je sais ce que c'est, je n'ai jamais eu à l'implémenter - vous voudrez peut-être essayer d'utiliser Parallex Background :

C'est un module simple qui permet de définir un effet de parallaxe verticale sur l'arrière-plan de n'importe quel élément du DOM.

Je vous suggère de bien vouloir travailler davantage sur vos compétences Google-fu.

4
tenken

Au lieu d'utiliser l'un de ces modules, vous pouvez remplacer la sortie de champ via une fonction de thème comme celle-ci:

    function MYTHEME_field__field_someimgefield_image($variables) {
        $output = '';

        // Render the label, if it's not hidden.
        if (!$variables['label_hidden']) {
            $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
        }

        // Render the items.
        $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
        foreach ($variables['items'] as $delta => $item) {
            // Generate styled background image.
            $img_uri = $item['#item']['uri'];
            $img_style = $item['#image_style'];
            $bg_img = image_style_url($img_style, $img_uri);
            $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
            // Write image url to inline css and drop the rendered item.
            $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . ' style="background-image:url(' . $bg_img . ')"></div>';
        }
        $output .= '</div>';

        // Render the top-level DIV.
        $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

        return $output;
    }

À votre avis, activez "Utiliser le modèle de champ" dans les paramètres de style du champ. Ainsi, les vues rendront votre champ via la fonction de thème ci-dessus. Bien sûr, vous devrez donner au champ une largeur et une hauteur pour rendre l'image d'arrière-plan visible.

4
Konstantin

Vous avez peut-être besoin du module Image URL Formatter .

Ce module ajoute [s] un formateur d'URL pour le champ image. Ensuite, vous pouvez générer directement l'URL de l'image.

Fonctionne avec les vues. Il vous donnera un choix supplémentaire de "Formateur", qui devrait dire quelque chose comme "Chemin d'accès à l'image" ou "URL de l'image".

En ce qui concerne également "Global: Texte personnalisé", je pense que cela est censé être FULL HTML, mais il est exécuté via filter_xss et d'autres divers désinfectants. Vous pouvez donc mettre le HTML directement dans le champ, vous n'avez pas besoin d'un filtre de saisie de texte.

2
Beebee

Peut-être que le module Dynamic Background est ce dont vous avez besoin car il vous permet de cibler un div? Il a également un arrière-plan de contexte pratique pour configurer des arrière-plans basés sur le contexte pour des choses comme les dates, les chemins, etc. https://www.drupal.org/project/dynamic_background

0
deanflory