Jump to content

Calling an image field in a template


cmscritic
 Share

Recommended Posts

Hi Guys

I'm doing the unthinkable and attempting to recreate cmscritic.com with processwire. A task that I'm sure will be incredibly fulfilling once complete and I'm hoping will teach me how to use this CMS in the process. (pun not intended). 

I'm messing with the blog profile at the moment and when I look at the template, I see it's got a field "site title" which when viewing the page, is populated with the words "Basic Blog Profile" and used in the masthead. Since I want to use an image logo instead and have it easy to change within the backend, I added an image field to the template and uploaded my logo.  The issue i'm having is that I'm unsure as to how to call this and within which template. I can see it in the page now as an uploaded image but I don't know how to call it within the masthead.

Tough to explain, hopefully my question makes sense.

Here's a screenie to show what I mean.

capturegfw.png

Thanks  in advance!

Mike

  • Like 2
Link to comment
Share on other sites

I think you will find what you are looking for in the main.inc file on line 60. You could try to add something like this to that file. 

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

Check out this for outputting images if you have not already.

**Disclaimer, I have not tested it and could be completely wrong. I'm still learning myself, but thought I would give you my 2 cent. :)

Link to comment
Share on other sites

Thanks RJay.

So far, I followed the tutorial I found here and came up with this code, which outputs the logo above and the "site_title" below. Now all I need to do is figure out how to wrap the logo with <a href='{$config->urls->root}'> and I'm good. Code is as follows:
 

<?php $image = $page->logo_image->size(287,80); echo "<img class='logo' src='{$image->url}' alt='{$image->description}'  />"; ?> 
<?php echo "<a href='{$config->urls->root}'><h1>{$homepage->headline}</h1></a>"; ?>

Thoughts?

Link to comment
Share on other sites

Hi,

why not using it like:

<?php $image = $page->logo_image->size(287,80);?>
<?php echo "<a href='{$config->urls->root}'><h1><img class='logo' src='{$image->url}' alt='{$image->description}' /><br />{$homepage->headline}</h1></a>"; ?>
Link to comment
Share on other sites

Looking at the screen it must be a multiple images field. In that case it's an array and you have to either change it to max 1 image int he field setting or chose the first from the array:

<?php 
$image = $page->logo_image->first->size(287,80);
echo "<img class='logo' src='{$image->url}' alt='{$image->description}' />";
?> 

Ah didn't read careful..

This is also possible I think:

<?php echo "<a href='{$config->urls->root}'><h1><img class='logo' src='{$page->logo_image->size(287,80)->url}' alt='{$image->description}' /></h1></a>";?>
  • Like 2
Link to comment
Share on other sites

Looking at the screen it must be a multiple images field. In that case it's an array and you have to either change it to max 1 image int he field setting or chose the first from the array:

<?php 
$image = $page->logo_image->first->size(287,80);
echo "<img class='logo' src='{$image->url}' alt='{$image->description}' />";
?> 

Ah didn't read careful..

This is also possible I think:

<?php echo "<a href='{$config->urls->root}'><h1><img class='logo' src='{$page->logo_image->size(287,80)->url}' alt='{$image->description}' /></h1></a>";?>

That worked perfectly, (the second example that is) I wasn't sure the context to use. Thank you & thanks to all others who replied.

Link to comment
Share on other sites

Hi cmscritic, I just want to note that you now have the <h1>-Tag filled with an image, and only with an image.

Hhm, dunno if this is a good idea with respect to SEO and page semantic. (But my profession are the images, not SEO or semantic, just doesn't feel good to me)

Link to comment
Share on other sites

Hi cmscritic, I just want to note that you now have the <h1>-Tag filled with an image, and only with an image.

Hhm, dunno if this is a good idea with respect to SEO and page semantic. (But my profession are the images, not SEO or semantic, just doesn't feel good to me)

I agree, if just using the image, ditch the <h1>. From your first post, I think you were trying to replace the headline text with the logo if I understood correctly.

Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By spercy16
      These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items if (count($pages->get("/projects/")->images)) : // get array of images from the field $images = $pages->get("/projects/")->images; $count = 0; // iterate over each one foreach ($images as $image) : $count++; $sectionText = $pages->get("/projects/")->get("paragraph_$count"); $img = $image; $buttonCode = $pages->get("/projects/")->get("url_$count"); ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $img->description; ?></h2> <?php echo $sectionText; ?> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $buttonCode; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php endforeach; endif; ?> Thanks in advance for any help!
    • By picarica
      so hello there i have fiel field type i have lots of stuff there, and also an image i can easily get image from that field using
                                                        
      $options = array('quality' => 85, 'upscaling' => true, 'cropping' => 'north', 'sharpening' => 'medium'); $word = ".png"; // Test if string contains the word foreach($childgames->subor_hry as $file) { if(strpos($file, $word) !== false){ /* $imger = $file->size(473, 266, $options); */ echo $file; /* echo $file->url; */ } } so i get the fiel i tried invoking size on it like the commented out part and it doesnt work i get error Oh snizzle… Error:     Exception: Method Pagefile::size does not exist or is not callable in this context (in
      what am i doing wrong? can you guys help me by all logic this should work
    • By Max Esnée
      Hi,
      When I upload a large(ish) SVG (≈120ko in this case) into an image field, it tends to get stuck at 100% and block the whole website. If I force refresh the admin page, the svg has not been uploaded. The file is correctly copied into the assets folder though. Other svg tends to be uploaded fine albeit I've noticed that pages containing svg images in the admin are very slow to load generally. Other pages using the same template but with jpeg or png images are much faster to load.
      I get the following error in the JS console:

      I develop locally using MAMP on macOS and I'm using Firefox. I'm using the last ProcessWire version (3.0.165).
      I also tested in Chrome and got the same error.
    • By Marvin
      Hello, my name Marvin, i want to ask something. I'm new at processwire, and still learn it, i try yo showing an image, at a table, the image was show, but i can't resize the image
      please HELP
      Here i attach, my code belor
      <?php $num = 1; foreach($pages->get("/files/")->children as $child) { $current = $child === $page ? " class='current'" : ''; $result = $child->images; // $result->width(900); // $result->height(100); foreach($result as $items){ foreach($pages->get($child->name)->files as $file) { // $file = $child->files; // echo $file->name; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$file->httpUrl."'>".$file->name."</a></td><td><img src='".$items->url."'></td></tr>"; } } } ?>  
    • By franciccio-ITALIANO
      Hi everyone.
      I've created 12 templates that are the same but each with an extra bit of html code. 
      The piece of code is as follows:
      <div> <div class="box-pf"> <i class="fa fa-map-pin fa-2x fa-red faa-pulse animated"></i> <a href=""> <span class="uk-text-middle"><i>Sonchus oleraceus</i> 'Grespino degli Orti'</span></b> </a> </div> </div> On the third line we read "fa-red."
      I created 12 similar templates.
      The first template has only one box with fa-red, the last template has 12 boxes with icons of 12 different colors.
      So. is there any way to have only 1 template and add, if I want and when I want, a small or big, same or different piece of html code?
       
×
×
  • Create New...