Adding images through "add page"

Permalink
How would I go about making it so that I could add an image to a certain block, directly from the "Add page" UI, without having to create a page and then add the image from there? All responses greatly appreciated!

 
Alexmclovin replied on at Permalink Reply
Could anyone even just point me into the right direction? Surely this is possible, how hard would it be? Should I consider hiring someone to do it for me? Anything!
jordanlev replied on at Permalink Reply
jordanlev
I'm not sure I completely understand what you're asking... but it sounds like the "Composer" feature might be helpful here, or you could create a page attribute of the image type and then output the image in the appropriate place in your page type template. Or if the image is going to be the same on all pages you could use Page Defaults.
Alexmclovin replied on at Permalink Reply
Thanks for the reply, the composer feature does indeed seem useful but I think attributes is what I'm actually trying to say. When you open the add page interface, I would like to be able to select an image there that would then show up on the page. I'm sorry if I'm not being clear enough
jordanlev replied on at Permalink Best Answer Reply
jordanlev
Okay. Here's how to set up the attribute:

1) Go to Dashboard -> Pages and Themes -> Attributes. In the "Add Page Attribute" section at the bottom, choose "Image/File" from the dropdown menu and click "Go". Enter a handle (for example, "my_page_image") and a name (for example, "My Page Image"). Then click the "Add Attribute" button.

2) Go to Dashboard -> Pages and Themes -> Page Types. Click the "Edit" button next to the page type you want this image to be available on (or the button might be called "Settings", depending on which version of C5 you have). Then check the box next to the new attribute you just created, and save.

Now the attribute choice will appear every time someone adds a new page of that type. To make the image appear on your page, you need to put some code in your page type template (in your theme) like this:
<?php
$img = $c->getAttribute('my_page_image');
if ($img) {
  $img_src = $img->getRelativePath();
  list($img_width, $img_height) = getimagesize($img->getPath());
  echo '<img src="' . $img_src . '" width="'. $img_width . '" height="' . $img_height . '" alt="" />';
}
?>


Or if you want to restrict the image to a certain size, you can do this:
<?php
$img = $c->getAttribute('my_page_image');
if ($img) {
  $img_src = $img->getRelativePath();
  $thumb = Loader::helper('image')->getThumbnail($img, 300, 200); //<--set max width and height here (first number is width, second is height)
  echo '<img src="' . $thumb->src . '" width="'. $thumb->width . '" height="' . $thumb->height . '" alt="" />';
}
?>


Do note that in either case, you are not actually adding a block to the page, so users cannot edit the image from the page itself nor can they move it around to a different location.
Alexmclovin replied on at Permalink Reply
This is exactly what I meant! Thank you so much, great explanation everything worked on the first try