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 Mats
      BETA: SplashAndGrab
      https://github.com/madebymats/InputfieldSplashAndGrab
      This module attaches a search input to selected image fields that lets you search and download images from Unsplash.
      (Unsplash is a stock photo service where you can download images for free and use as you wish. No strings attached.)   
      You can search by string, colors, orientation/crop and order by relevance or time published
      I find Unsplash useful both for placeholder images when building sites but also as a time saver for editors if they don’t have any images at hand, just search, download and publish.

      Thanks to @apeisa for building the  FlickrInputField Module and @Robin S for AddImageUrls,  took a lot ideas and code from those modules.
    • By Markus (Blue Tomato)
      We have created a module to create BlurHash strings for images while uploading in ProcessWire. This blurry images will be saved in the database because they are very small (20-30 characters) and can be used for Data-URL's  as placeholders for image-lazy loading.
      https://github.com/blue-tomato/ImageBlurhash
      E.g. where we use this in production:
      https://www.blue-tomato.com/en-INT/blue-world/ https://www.blue-tomato.com/en-INT/blue-world/products/girls-are-awesome/ https://www.blue-tomato.com/en-INT/buyers-guides/skateboard/skateboard-decks/ https://www.blue-tomato.com/en-INT/team/anna-gasser/
    • By Pip
      Hi Everyone!
      I'd like to set a different label on my Title (PageTitle) field in one particular template.  Is there a way to do so? 
      Thanks. 
    • By benbyf
      Hello, and welcome to what I though was either my client being silly and changing things, or some evil doer. Turns out its reproducible and therefore something in Proceswire (I checked my templates and modules but couldnt find anything that would be doing this...). So what is it doing? Check out the video for evidence.
      A repeater field is interacting with a page template and another repeater field somehow to swap the fields in the template and repeater over...
      I have a template called team, and a repeater field called team_repeater with label Team. Some how and for some reason, when I change my fields on repeater called main_menu_links my team template gets those fields and when I try and revert the team template fields to the fields it should have, they get given to the repeater main_menu_links. Also this to say HELP!!!!!
      video: https://www.dropbox.com/s/exkdhc6n7x0xpsa/strange-repeater-PW-mega-bug.mov?dl=0
    • By horst
      Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations.
      EDIT:
      A good solution for protecting original images can be found a bit down in this thread:
       
      Old content of this initial post:
       
×
×
  • Create New...