Display image via api

[derelektrischemoench]

Hi guys,

I'm trying to call an image inside an <img>- Tag, to make the directory structure more versatile, making it unnecessary to always type the whole path to the image

I'm relatively new to web development, php, Processwire and the likes so this might occur like a stupid question to you. 

But please, bear with me, I've spent the last hour on this and I'm starting to feel stupid.

Currently I have a few images embedded like so:

<img src="direct/path/to/image.png"></img>

But this sucks. is there a way that I can achieve a link to a certain image, respectively its filename, id or similar like e.g. so:?

<img src= <?echo "image.png" ?>>

or instead of a filename an ID or something similar, so that if I change the path of the image resource, they still get embedded.

The solution to this is probably very simple, but I'm fairly new to php and Processwire and I couldn't figure it out.

Help would be much appreciated.

Best regards

DeM

[LostKobrakai]

If you're talking about static images (not part of an image field in the backend) then have a look at the $config->urls->somethings.

// full url: /site/templates/img/static.jpg
<img src="<?php echo $config->urls->templates."img/static.jpg"; ?>" alt="Some image" />

If not then like this:

$images = $page->images; // If multi image field

foreach($images as $image){
  $url = $image->url;
  // echo html image tag
}

$image = $page->image; // If single image field (max number == 1)
$url = $image->url;
// echo html image tag

[pwired]

I'm relatively new to web development, php, Processwire and the likes so this might occur like a stupid question to you. 

Don't worry, every new language looks complicated in the beginning. But as you play and work with it, the more it starts to make sense. Consider your self lucky you have found processwire, a system that makes sense in so many ways that making websites with it is going to be a pleasure. Before you know it you will reach the point where you wonder your self: "how come I didn't know this already" ? 

Remember: In processwire everything is handled as "a page". Hence it's limitless organisation power !

What you need to start with is some basic html replacements with php, here are some examples.

1. Instead of an absolute path you use this:

<img src="<?php echo $config->urls->templates?>pics/me.jpg" />

2. Instead of storing images in a sub folder under templates you can store them using the backend

and then call them on the current "page" $page like this:

example1:

$image = $page->images->getRandom();

$image = $page->images->first();

$image = $page->images->eq(1);                    // eq(1) = second image

$image = $page->images->get("name=picture.jpg");  // get by image name

 

example2:

 

<img src="<?php echo $image = $page->images->get("name=picture.jpg"); ?>"/>

 

example3:

 

<div class="your class">

  <?php

  $image = $page->images->get("name=logo.jpg");

  $image = $image->width(200);

  echo "<img src='$image->url'/>";

  ?>

</div>

 

 

Instead of using $page for the current "page" you can call images from any "page"

when using $pages instead of $page

 

Here is a simple example when using the bxslider picture slider:

(here "bxslider-pictures" is the "page" used to organize the pictures for the bxslider picture slider)

 

<li>

<?php

$temp = $pages->get("/bxslider-pictures/");

$image = $temp->images->get("name=hill.jpg");

$image = $image->width(200);

echo "<img src='$image->url'/>";

?>

</li>

 

You see ? It is all doable and gives you total freedom on the front side of processwire.

Here is more you can eat all your code out with images:

https://processwire.com/api/fieldtypes/images/

Welcome to Processwire.

[derelektrischemoench]

If you're talking about static images (not part of an image field in the backend) then have a look at the $config->urls->somethings.

// full url: /site/templates/img/static.jpg
<img src="<?php echo $config->urls->templates."img/static.jpg"; ?>" alt="Some image" />

This is what I need. I just need a link to  an image that doesn't change its filename but probably its directory.Unfortunately, though, the above example doesn't work for me.

[LostKobrakai]

Why would they change? Images inside the template folder are part of the layout and mostly of the "put it there and leave it" fashion. Dynamic things should really be stored in image fields. There made for that.

[derelektrischemoench]

Why would they change? Images inside the template folder are part of the layout and mostly of the "put it there and leave it" fashion. Dynamic things should really be stored in image fields. There made for that.

Hm okay. Like I said, I'm new to this whole thing

@pwired:

I uploaded the images I wanted to the page (basically I added an image field to the template and the dragged and dropped them in there). Then I did the 

<img src="<?php echo $image = $page->images->get("name=filename.png"); ?>"/>

Unfortunately that didn't work.

Where's my mistake?

Thanks for pointing the thing with the image field out, though, somehow my brain seems to be clogged, I didn't even remotely consider this option :/

Greetz DeM

[LostKobrakai]

You cannot just echo the image. You need to echo the url property of the image.

// No need to save the image in a variable if you don't need it multiple times
<img src="<?php echo $page->images->get("name=filename.png")->url; ?>"/>

// else
<?php $image = $page->images->get("name=filename.png"); ?>
<img src="<?php echo $image->url; ?>"/>

[derelektrischemoench]

Of course. That worked. Thank you so much, this saved me a whole lot of trouble.

Greetings from Baden- Württemberg ;-)

[pwired]

https://processwire.com/talk/topic/10-how-do-i-interact-with-the-image-field-in-processwire/

[derelektrischemoench]

https://processwire.com/talk/topic/10-how-do-i-interact-with-the-image-field-in-processwire/

Thx. The critical link I was missing was the whole image- field thing. I read tons of other stuff while googling for a solution and all of them had the echo $page->images - code but only from the code I wondered how PW could find the path to those images. 

Of course by storing it in an image field on the site. Quite obvious, actually.

Thanks again.