Get image from other pages via images field

[suntrop]

Hi! This is my first posting at this forum and I am on my first PW website. The CMS looks pretty cool and I like its approach of handling data. Well, there is just one thing I don't understand or perhaps that way is new to me. The assets management.

My website (about 100 pages) has a slider with 3 images in its header. As I understand I have to attach an image always to a particular page. If I want to use the same image on another page, I have to upload it again. Right? I can't access it from a field on another page (beside access via TinyMCE).

Thanks for help!

Sebastian

[adrian]

You can definitely access images from other pages.

When inserting into a RTE field (either TinyMCE or CKEditor) there is the option to insert an image from any page in the tree.

If you are wanting to grab the image from another page using the API, then something like this will work:

$image = $pages->get(/page-name/)->imagefield->url;

If your imagefield is set to support multiple images you'll need to specify which image you want, eg: first(), eq(x), last() etc.

EDIT: Btw, welcome to PW.

Be sure to check out these resources:

http://cheatsheet.processwire.com/

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

[suntrop]

Adrian, thanks for your reply. Sharing images by the RTE is fine for images in the content. But I was thinking of an access outside the editor and without the API. That seems to be not available in PW? I wanted my colleague to be able changing and reordering images per page – best without re-uploading images again.

Anyway, if there is no way, I think I'll create some pages as 'sliders' and connect them as PageListConnect.

Thanks!

Sebastian

[Martijn Geerts]

That has indeed nothing to do with proccesswire.

Use php or something to make some magic.

( i don't know why you don't like the easier pw way)

[pideluxe]

One way to achieve this is to create an image field 'slideimages' in the root-page (or in a hidden settings-page). You can upload your slider-images there in one place and your colleague can rearrange them as needed.

In your template file you access the images like 

$pages->get("/")->slideimages

(or the appropriate path for your settings-page) and then foreach over the images to output the slider-code.

[suntrop]

That has indeed nothing to do with proccesswire.

Use php or something to make some magic.

( i don't know why you don't like the easier pw way)

Perhaps I don't know what exactly you mean by 'the easier pw way', but I guess it'll be more time consuming and more difficult to configure all sliders on different pages and connect them with a plain drop-down select field (if there are more than a couple of them). TinyMCE isn't a good choice either here, because it is just a matter of time when there is HTML code in it that makes things messy 

One way to achieve this is to create an image field 'slideimages' in the root-page (or in a hidden settings-page). You can upload your slider-images there in one place and your colleague can rearrange them as needed.

In your template file you access the images like 

$pages->get("/")->slideimages

(or the appropriate path for your settings-page) and then foreach over the images to output the slider-code.

Thanks pideluxe!

Don't get me wrong guys  I like what I see here in PW, but I am used to manage assets a different way and have to find the best solution for now. So … thanks again for your help!!

[Martijn Geerts]

What I ment,

There's no CMS better/easier in assets management then ProcessWire.

You can make it your self very hard to build sliders without taking the PW way.

ps, you don't need a dropdown.

$imagePages = $pages->find("template=basic-page, slideimages.count>3, limit=3");   <- assumed that your image field is called slideimages

foreach($imagePages as $p) {

    echo "<ul>";

    foreach($p->slideimages as $image) {

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

    }

    echo "</ul>";

}

[suntrop]

Many thanks Martijn. This will just return a list of three images. But I need to configure a slideshow of three images on each page individually. Mostly the images are different on each page, but sometimes the images are the same (maybe with another order).

I think I will just drop those images on each page and re-upload the images, when I need them. I was afraid of the time, when I have to change some images and have to find them manually on all my pages.

However, I think I'll get along with it  Thanks again!

[Martijn Geerts]

I think you're thinking to complex.

For slideshows (just to have one) you can put those in your homepage.

Or if you want to slide products, upload those images on an actual product page.

Or create a settings page, etc., etc.

[Soma]

Or you could use my ImagesManager module to centralize images. Then use a select to add them to pages. Images are saved as a page. Look in the forum as it's not in the modules repository.

[suntrop]

The ImageManager sounds like a good solution. I'll install it and try to get all my sliders done with that

[ryan]

Look in the forum as it's not in the modules repository. 

Why not? 

My website (about 100 pages) has a slider with 3 images in its header. As I understand I have to attach an image always to a particular page. If I want to use the same image on another page, I have to upload it again. Right? I can't access it from a field on another page (beside access via TinyMCE).

The way I would solve this is to create pages for shared assets, probably with a one-one relationship between pages and images. Something like /shared/images/... Give each of the shared image pages a title and an image. Then use a page reference field, perhaps with an asmSelect (multiple selection) to select the header images you want shown on each of your pages. In situations where I have image selection like this, I also like to provide a default/random selection in cases where nothing is selected (or too few are selected). So I might do something like this:

$limit = 3; // number of images required
$imagePages = $page->header_image_pages; // page reference field
$n = $limit - count($imagePages); // n=number of images we need to get
if($n > 0) {
  // not enough images selected
  $imagePages->add($pages->find("parent=/shared/images/, sort=random, id!=$imagePages, limit=$n")); 

} else if($n < 0) {
  // too many images selected
  $imagePages = $imagePages->slice(0, $limit); 
}

// output the images
foreach($imagePage as $imagePage) {
  $image = $imagePage->image; 
  echo "<img src='$image->url' alt='$imagePage->title' />";
}

[landitus]

I like Ryan's take on that problem, because it seems flexible and clean. The only issue is that the client or CMS user won't be able to see the image he needs, o even worse, won't be able to find it if there's not a descriptive page name. I've been have the same issues that @suntrop describes. I think some kind of visual queue would be more user friendly.

The thing is PW won't guess anything about what's in you page (that's great) so it won't classify or make a distinction between a regular page or an image page. This falls somehow short in this kind of situations where you want to select an image page from an assets parent page and it will be hard (for the CMS user) to find it based on a select or text string.

Maybe this kind of usage needs another kind of input field. Instead of an asmSelect (and multiple select), there could be an assetSelect, which could display images or uploads to a page in a modal window. Kind of what know Wordpress is using when selecting images attached to a post. I guess this doesn't contradict PW treatment of the data, but enforces the input field concept, which is more presentational and imposes a way of displaying/selecting data. From the distance this would look like an assets manager, but instead the input field turns any page into a an assets manager, without changing any data.

Is this making any sense??  

Edited August 24, 2013 by landitus

[adrian]

I know this doesn't really solve your issue, but it is another tool that you might be able to make use of:

http://modules.processwire.com/modules/page-list-image-label/

[landitus]

I know this doesn't really solve your issue, but it is another tool that you might be able to make use of:

http://modules.processwire.com/modules/page-list-image-label/

yes, I was having this module in mind. Does it work inside a PageSelect input field? This module could be a start. But still, I'm striving towards a even more user friendly solution when dealing with assets (from other pages) while playing nice with PW philosophy. 

More ideas: Maybe the assetSelect or PageAssetSelect field has an option to restrict to a given page (like /shared/images/) and from that on, it presents the user with a modal window populated with all the assets attached to those pages and subpages. This is already in place with the current select input fields.

[Soma]

yes, I was having this module in mind. Does it work inside a PageSelect input field? This module could be a start. But still, I'm striving towards a even more user friendly solution when dealing with assets (from other pages) while playing nice with PW philosophy. 

Yes it does work with PageListSelect and everywhere you see the page tree (naturally).

[landitus]

I've been thinking more about the PageAssetSelect field idea and while I like it (  ), there might be some issues with PW way of handling page relations.

Right know it's a Page -> Page relationship. Simple, effective. My proposed PageAssetSelect field could replicate this but with a visual UI for selecting the Pages. But, should it display the first image found of the Page? Should it make that assumption? Despite this, which could be a setting, it still would assume each asset lives in a single page. 

Even further, if it could show the user all images/assets attached to a Page parent and children (and repeater fields!), then there would be no assumptions. And, it would be more flexible in consequence. And it would take page relations to a whole new level. But the relationship would be Page -> Asset assigned to page. Is this an issue? Is this something that would class with PW way of handling data? Would it fit?

I think I should wait for Ryan's opinion on this.  

[apeisa]

It would be way to choose file(s) from another page(s). It fits pw perfectly fine.

[suntrop]

I am with landitus – while it is an easy way to pick a predefined slider, you can't see the images. But the Page List Image Label module seems to be workaround for that.

However, I like his idea of a PageAssetSelect or maybe the image field could be extended, thus one can select images from other pages (like TinyMCE or API).

[theFisher86]

I like Ryan's take on that problem, because it seems flexible and clean. The only issue is that the client or CMS user won't be able to see the image he needs, o even worse, won't be able to find it if there's not a descriptive page name. I've been have the same issues that @suntrop describes. I think some kind of visual queue would be more user friendly.

The thing is PW won't guess anything about what's in you page (that's great) so it won't classify or make a distinction between a regular page or an image page. This falls somehow short in this kind of situations where you want to select an image page from an assets parent page and it will be hard (for the CMS user) to find it based on a select or text string.

Maybe this kind of usage needs another kind of input field. Instead of an asmSelect (and multiple select), there could be an assetSelect, which could display images or uploads to a page in a modal window. Kind of what know Wordpress is using when selecting images attached to a post. I guess this doesn't contradict PW treatment of the data, but enforces the input field concept, which is more presentational and imposes a way of displaying/selecting data. From the distance this would look like an assets manager, but instead the input field turns any page into a an assets manager, without changing any data.

Is this making any sense??  

Did anything ever happen with this idea as it's exactly what I'm looking for.  The lack of an asset Manager is the biggest detriment to PW in my opinion.

[Macrura]

not sure i'd use the word detriment – the whole assets management thing has been discussed a zillion times and i think most users prefer the PW way of handling assets to any alternatives. What are you trying to achieve?

[kongondo]

@landitus. Have a look at this

 https://processwire.com/talk/topic/11040-visual-page-selector-commercial-page-picker-module-for-processwire/

[landitus]

@kongondo WOW!!!! I'm very happy to see this module! I can't wait to try it in my projects. Way to go!!

[Tom.]

I must agree with OP. I have had an example in the past where we have had a slider that is different on each page, however one image maybe the same. At the moment the user will have to re-upload that image into the image field, however in CKEditor he can select it from the page. 

It would be cool to see this: 

This will work very much like CKEdit's current asset selector. This will allow for a page tree for example

/media/ (hidden)
   /boats/ (image field - for drag and drop bulk upload)
    /ports/ (image field - for drag and drop bulk upload)

That way if you ever need to use a picture of a boat or a port, you already have uploaded, you don't need to repeat content that could take up space on the server. 

I must apologies, I'm by no means a backend developer. I have no idea how possible this is (or how clean this is). As a front-end developer, I'm very thankful and lucky that ProcessWire gives me the power and flexibility to make my projects come life (any project). 

[kongondo]

/media/ (hidden)

   /boats/ (image field - for drag and drop upload)

    /ports/ (image field - for drag and drop upload)

That way if you ever need to use a picture of a boat or a port, you already have uploaded, you don't need to repeat content that could take up space on the server. 

Something like this maybe?