Jump to content
suntrop

Get image from other pages via images field

Recommended Posts

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

Share this post


Link to post
Share on other sites

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/

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites

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!!

  • Like 1

Share this post


Link to post
Share on other sites

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>";

}

  • Like 2

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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' />";
}
  • Like 2

Share this post


Link to post
Share on other sites

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??  

post-72-0-97215800-1377364786_thumb.jpg

Edited by landitus
  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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).

  • Like 1

Share this post


Link to post
Share on other sites

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.   ???

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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: 
hr1eEsl.jpg

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). 

  • Like 1

Share this post


Link to post
Share on other sites

/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?

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By AndZyk
      Hello,
      we have many projects as pages containing images inside regular image fields and repeater matrix elements. Now we would like to organize our assets.
      ProcessWire saves assets with id as folder name and makes separate folders for repeater matrix elements.
      Is there a way to collect all assets of one page and export them in a folder with the page name/title?
      I think I could achieve this by using the command line wget for this website or maybe by a hook. But maybe someone has done this before. 😉
      Regards, Andreas
    • By benbyf
      Never really got my head around field groups and it shows, In my module uninstall I think I figured out how to delete a page, then a template and it's fieldgroup so that nothing gets upset. But for fields that belong to templates that need to stoick around I'm still abit stuck to how you would remove the field and when I try I still get:
      Unable to delete field '[field name]' because it is in use by these fieldgroups: 'user'
      is there a tutorial or best method for removing added fields, pages and templates?
    • 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>"; } } } ?>  
×
×
  • Create New...