1

I have created a content type having two fields:

  1. Title
  2. Image (multiple image field)

Then I create a page view for the same. Added these two fields. Now I have to create an external theming in view so from view-Theme Information- Row Style output, I have created a view-tpl.php page in the templates folder.

I have given this design in this view:

<style type="text/css">
    .imgStyle
    {
        width:100px;
        height:100px;
        border:3px solid grey;
    }
</style>

<img id="mainImage"" 
     src="images/collection-img/nandikesvara-front-3000-06.png" height="500px" width="540x"/>
<br />
<div id="divId" onclick="changeImageOnClick(event)">
    <img class="imgStyle" src="images/collection-img/nandikesvara-front-3000-06.png" />
    <img class="imgStyle" src="images/collection-img/nandikesvara-back-3000-06.png" />
    <img class="imgStyle" src="images/collection-img/nandikesvara-front-3000-06.png" />
    <img class="imgStyle" src="images/collection-img/nandikesvara-back-3000-06.png" />
    <img class="imgStyle" src="images/collection-img/nandikesvara-front-3000-06.png" />
</div>
<script type="text/javascript">

    var images = document.getElementById("divId")
                         .getElementsByTagName("img");

    for (var i = 0; i < images.length; i++)
    {
        images[i].onmouseover = function ()
        {
            this.style.cursor = 'hand';
            this.style.borderColor = 'red';
        }
        images[i].onmouseout = function ()
        {
            this.style.cursor = 'pointer';
            this.style.borderColor = 'grey';
        }
    }
    function changeImageOnClick(event)
    {
        event = event || window.event;
        var targetElement = event.target || event.srcElement;

        if (targetElement.tagName == "IMG")
        {
            mainImage.src = targetElement.getAttribute("src");
        }
    }
</script>

So I want to fetch one by one image path to pass in src of images. I have tried this $fields['image']->content but it print images as an object. How can I get the paths of images to pass in src tag.

closed as unclear what you're asking by leymannx, mradcliffe, Kevin, Pierre.Vriens, DRUPWAY Dec 20 '18 at 9:30

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    All of this complexity can be avoided by using entity view modes and not doing field based views. – Kevin Dec 17 '18 at 14:05
  • 1
    Also you can use css to change cursor and color and not do any javascript........ – Kevin Dec 17 '18 at 15:08
  • Also, if you do use Javascript, you should use Drupal behaviors instead of inline script tags. – hotwebmatter Dec 17 '18 at 21:13
  • thank you very much for the great & valuable suggestions, i am new to drupal and learning things. I haven't any idea about entity views modes, I always use field views. Now i start learning about entity views modes. – Pratish Jha Dec 18 '18 at 5:18
1

Here's a Drupal 7 example showing how to use:

field_get_items() to select the field from the node,

file_load() to load the image file,

image_load() to get the URI from the image file

image_style_url() to format the image differently for different contexts

... and as a bonus, check for good data and substitute a default image if the field image is no good.

// If there is a field image.
if (!empty($node->field_image)) {
  $field = field_get_items('node', $node, 'field_image');
  if (!empty($field[0]['fid'])) {
    $image_file = file_load($field[0]['fid']);
    $image      = image_load($image_file->uri);
  }
}
// If image, then scale it. If not use the default image.
if (!empty($image)) {
  if (is_string($image)) {
    $image_source = $image;
  }
  else {
    $image_source = $image->source;
  }
  $url        = image_style_url('image_style', $image_source);
  $url_mobile = image_style_url('image_style_mobile', $image_source);
}
else {
  $url        = 'https://example.com/sites/default/files/default_image.png';
  $url_mobile = 'https://example.com/sites/default/files/default_image_mobile.png';
}

Hope this helps. Good luck!

EDIT: @Kevin makes a very good point in the comments above:

All of this complexity can be avoided by using entity view modes and not doing field based views.

Basically, Drupal gives you the ability to set up view modes in the "Manage Display" tab for each content type. There, you can decide which fields will be shown or hidden in each view mode, and how they should be formatted for display. If you use this feature, you shouldn't need to deal with it in PHP template files.

0

You get the URI of an image (and file) field by:

$node->field_image->entity->getFileUri();

And you get the url of a styled instance of your image by:

$bildstyler = ImageStyle::load('thumb');
$bildstyler->buildUrl($node->field_image->entity->getFileUri());
  • it's drupal 7 not 8. – berramou Dec 17 '18 at 13:33

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