Fail 101 - adding a header image

Russell · October 12, 2014

So I have a skeleton site setup using the delayed output templates and thought I could tackle the simple task of adding a header image. Alas, I seem to be failing at even that basic task. Below are the snippets of code I have added, with my additions in bold, and the output I am getting on the site. If someone can point out where I'm sure there's an obvious problem, I'd appreciate it.

_init.php

// Variables for regions we will populate in _main.php
// Here we also assign default values for each of them.
$header_image = $page->header_image;
$title = $page->get('headline|title'); 
$content = $page->body;
$sidebar = $page->sidebar;

_main.php (I know I shouldn't need the two lines to output, I just split this up as part of my debugging)

<body class="<?php if($sidebar) echo "has-sidebar "; ?>">
<!-- Header Image -->
<div id='header_image'>
	<?php
		$header_image = "<img src='$header_image->url' alt='$header_image->description' />";
		echo $header_image;	
	?>
</div>

Inspecting the home page on site output shows

<body class="has-sidebar ">

<!-- Header Image -->
<div id="header_image">
<img src="" alt="">
</div>

<!-- top navigation -->

I have added a new image field called header_image to the site and added it to the "home" and "basic-page" templates, then added the field to the "home" page and populated it with an image and description.

Why are the field values not being output in the final rendered site?

Thanks.

Russell.

adrian · October 12, 2014

Try:

$header_image = "<img src='$header_image->first()->url' alt='$header_image->first()->description' />";

An image field behaves as an array so you need to specify which image:

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

Russell · October 12, 2014

Thanks for the info, but still having troubles. Your code sample doesn't work, and looking at the link you supplied, it appears a single image should work using this syntax

echo "<img src='{$page->image->url}'>";

Unfortunately that isn't working either, giving the same result I originally got. It's late here however, so maybe my brain is malfunctioning. I'll have to look at it with fresh eyes tomorrow.

kongondo · October 12, 2014

The question is is your header_image field set to accept multiple images or only a single image? Anyway, if it was set to accept multiple images, Adrian's code should have worked. Have you confirmed the image field is actually called header_image? Have you confirmed there is actually an image on that page you are trying to output? If you use the code below in your main template file and view the page with header_image, what do you get?

echo count($page->header_image);
exit;

Russell · October 12, 2014

I just checked, it was set to multiple images. I changed it to 1 and tried both code formats again, and still no luck. Running your count code returns 1. Yes the field is called header_image

Here's a section of the edit screen showing the field.

kongondo · October 12, 2014

OK, an output of 1 means there is an image there.

I have tested your exact code on a fresh test PW site at lightning.pw using the default site profile - intermediate version (aka 'delayed output version') and the image is output correctly. There must be some other funkiness going on on your install. Can you provide a screenshot of your Fields > Edit Field: header_image Details Tab similar to mine below? I have a feeling you have selected the 'wrong' formatted value on that page. What you describe would happen, for instance, if you selected the 'Rendered string of text (that you provide)' option but didn't provide a string...

In addition, the HTML output that you've shown in your OP, for the <img> tag, is that the exact output or do you have something similar to the code below? Or, more precisely, if no image is output and you view the source in FireFox Firebug, the code will be like what you've posted above but if viewed in Chrome, it will be like below (but it adds the " " for the attributes when copied):

<img src alt>

Screen: header_image Details Tab when editing the field

Russell · October 13, 2014

Here's my screenshot

As for the output, I'm using Chrome on an iMac. Here's a screenshot of the page with the element inspector open, so you can see what I see with the following code int eh _main.php

	<!-- Header Image -->
	<div id='header_image'>
		<?php
			$header_image = "<img src='{$header_image->url}' alt='{$header_image->description}' />";
			echo $header_image;	
		?>
	</div>

If I change the code to below, which reflects the suggestion from adrian

	<!-- Header Image -->
	<div id='header_image'>
		<?php
			$header_image = "<img src='$header_image->first()->url' alt='$header_image->first()->description' />";
			echo $header_image;	
		?>
	</div>

the image becomes

kongondo · October 13, 2014

Well I am stumped on this one. Clutching at straws now.

Have you tried with a different image?
Temporarily deleting all code in your _main.php and echoing the following (or putting it at the very top of the file) :

echo "<img src='{$page->header_image->url}' alt='{$page->header_image->description}' />";
exit;

Do you see the image?

Btw, Adrian's code is for when you have an array of items.

Russell · October 13, 2014

Thanks for the suggestions. Yeah I realise Adrian's cide is for multiple images, but I'm clutchng at straws too. It'll be 24 hours or so before I'm on my desktop again. I'll try your suggestions and whatever else I can think of then. I'm wondering if repeating the same name across multiple areas might cause an issue?

I'll report back when I can.

kongondo · October 13, 2014

Only other thing I can think of is have you double checked that you have defined $header_image in your _init.php as you stated in you OP? If you haven't, it will fail silently - similar to what you are seeing (or to be precise, not seeing!).

Edited October 13, 2014 by kongondo

Russell · October 14, 2014

OK well I'm confused now. I thought I'd try the naming conflict idea first, so i went and changed the names in each area to something unique from the other areas, and it worked. So I then worked backwards resetting the changed names back to what they were, and now I'm back to the original code, referencing just one image, and it still works. All I can put it down to is maybe some sort of caching issue with my original incorrect code.

Thanks for the persistence in trying to help. At least I understand how image fields work properly now, even if I don't know what the actual problem I had was

kongondo · October 14, 2014

Glad you got it sorted. I don't get the bit about the naming conflicts. What 'areas' are you referring to?

Russell · October 14, 2014

I just mean field-name = _init variable name = div id = re-assigned html echo field. There shouldn't be a conflict, but that's the type of thing that can get you into trouble in some languages.

Sign In

Fail 101 - adding a header image

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members