Jump to content
paulbrause

Creating page for every image uploaded?

Recommended Posts

Hi!

I'm new to ProcessWire and i need a "little" help with my family's website.

What i want:

The website of my family contains a gallery, where photos are shown in several albums.

The current tree looks like this:

---photos

------ New Year 2013

------ Going to the zoo

------ Dad's 60th birthday

------ Our Pug

------ ...
 

Showing all pictures on one page is no problem for me, i got that working. But the photos should be Instagram-like "commentable" and "likeable". So i have to create a page for every single image, right?

My questions are now: what's "the best" way to do this?

Is it possible to automate this process? And how? ;)

I hope you understand, what i'm trying to do... my english is not that good, school is a few days ago... ;)

paulbrause

Share this post


Link to post
Share on other sites

yes. I would use a page for each image. can you describe the workflow further? Not sure what parts you want automated. the image uploading? how many images do you want to upload? how often?

Share this post


Link to post
Share on other sites

Yes, would be nice if upload of the images & creation of the pages could be automated. I thought of setting the maximum of photos per album to 48. Not sure, how often this maximum will be reached, mostly there will be ~20 pics. I guess there will be a new album 3-4 times a month.

The workflow should be like this:

- user logs in admin-panel

- creates under "photos" new page like "my wedding". fields under this template should be "title", "date" & "cover image"...

- uploads photos (perhaps possibility of rearranging, deleting and tagging of uploaded photos)

- one click and the magic will happen (creating separate page for every uploaded photo, setting title of page to image-name and so on)

This should be as simple as possible, cause my father and my mother will use this system too... ;)

Hope this answers your question.

  • Like 1

Share this post


Link to post
Share on other sites

I haven't used it, but you might want to look at this module:

http://modules.processwire.com/modules/fieldtype-image-extra/

The trouble with the page per image approach is that you wont be able to do multiple uploads in the way you suggest.

Using this module looks like you can add extra info while still having all the advantages of the image field array

  • Like 1

Share this post


Link to post
Share on other sites

My vote for dead simple, mom and dad can use it then I would say create your template with the fields that you want for the gallery and a featured image, and then create a gallery using a repeater field that has the image that you would want on its separate page and the data that you want on each image or check out the module page table extended (http://modules.processwire.com/modules/fieldtype-page-table-extended/). That way they don't have to try and create pages directly. 

Also a way that you could upload whole albums at once would be using the csv import module (http://modules.processwire.com/modules/import-pages-csv/) and upload your images to your server. From there you would just point to a spreadsheet with all of the fields in their own columns and the image name in another column for the related data. I 

Share this post


Link to post
Share on other sites

Also a way that you could upload whole albums at once would be using the csv import module (http://modules.processwire.com/modules/import-pages-csv/) and upload your images to your server. From there you would just point to a spreadsheet with all of the fields in their own columns and the image name in another column for the related data. I 

I thought this was meant to be user friendly for someone without much tech skills? :)

If you want to go for the one at a time approach, Page Table will probably be better than repeater, by the way. That way, you get to choose where all the new pages are created (you define a parent as part of the field).

But as I said, if you want them to be able to just drag and drop a pile of images in one go, then you need to use an image field.

  • Like 2

Share this post


Link to post
Share on other sites

I thought this was meant to be user friendly for someone without much tech skills? :)

I like the dual approach, he gets the way that takes 1/10th the time, and his mum and dad get to click, drag, type :). Also he gets to use one of the coolest modules in the processwire arsenal. 

  • Like 2

Share this post


Link to post
Share on other sites

Hi @paulbrause,

Lots of great suggestions above regarding PageTable fields etc, but I just put together a quick module that I think does exactly what you are looking for.

https://gist.github.com/adrianbj/2b3b6b40f64a816d397f

To make it work as is, you will need these:

Templates:

album (for the album parent pages)

image (used for the automatically created child pages)

Fields:

images (for the album template)

image (for the image template)

  • Like 11

Share this post


Link to post
Share on other sites

That is really cool Adrian! Super simple approach, and elegant to boot. Do you think that this could use a field for image description though, other than the image title I mean?  

  • Like 1

Share this post


Link to post
Share on other sites

That is really cool Adrian! Super simple approach, and elegant to boot. Do you think that this could use a field for image description though, other than the image title I mean?  

I think I know what you mean - I have just committed an update that will use the entered description for the title of the page is it is entered - otherwise it will fallback to the filename. Is that what you meant?

The code was quickly put together, so I expect the OP may want to tweak other things along those lines - should hopefully be a good starting point though.

  • Like 1

Share this post


Link to post
Share on other sites

I think I know what you mean - I have just committed an update that will use the entered description for the title of the page is it is entered - otherwise it will fallback to the filename. Is that what you meant?

The code was quickly put together, so I expect the OP may want to tweak other things along those lines - should hopefully be a good starting point though.

Good work man :). I guess what I meant was an image description, which I guess can just be pulled from the $image->description, but smart thinking about being able to rename the page. 

Share this post


Link to post
Share on other sites

Ok, v3 takes care of populating the description fields for the new image pages.

The one thing I don't like about all this is the duplication of the image files themselves. Maybe the module should delete the original images after the child pages have been created?

  • Like 1

Share this post


Link to post
Share on other sites

@adrian -

i'm doing something similar, but instead of automatically importing, i let the user choose a 'save action' which could be either to create the pages from the media (in my case audio files), or delete the files on save;

this of course save so much time because users can batch upload a huge set of media, and then on save they can batch create pages from those files.. the best of both worlds..

I was going to have the action also delete the files, but i was thinking that the user should check to make sure it all worked and they no longer needed the source set of files.. but a lot of times the users are forgetting to delete the audio; i was thinking that it would be cool to have a popup or something that said "import successful, you may remove the source files" as a reminder, but haven't worked out how to get that to display after save yet... maybe load a new js file with that...

post-136-0-15353800-1420512228_thumb.png

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for this module, adrian. It's something I've been hoping someone would make due to my lack of php ability!

I've been trying to figure out how to get the images from the parent page to auto-delete on save. I've only managed to accomplish this if I save only one image at a time.

If I add more than one image, I get this error:

Session: SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry '______________' for key 'name_parent_id'

Here is the code I am using. I changed a couple of things from adrian's code, and I've commented those lines below:

public function createImagePages($event){

    $page = $event->arguments[0];
    if($page->template == 'work-entry'){ // I changed the template name to match mine
	foreach($page->images as $image){
		if($this->pages->get("parent={$page->name}, name={$image->basename}")->id) continue;
		$np = new Page();
		$np->of(false);
		$np->template = $this->templates->get("entry-image"); // I changed the template name here too
		$np->title = $image->description ? $image->description : $image->basename;
		$np->name = $np->title; // I wanted the page name to match the title
		$np->parent = $page;
		$np->save();
		$np->image->add($image->filename);
		$np->image->last()->description = $image->description;
		$np->save();

		// These lines work to remove the image from the parent page
		$page->images->remove($image);
		$page->save();
	}

    }

}

Anyone have any idea of where I'm messing this up? Thanks!

Share this post


Link to post
Share on other sites

I just updated the gist with a version that deletes the images from the original parent album page.

Let me know if that works for you.

It's kinda funny that there has been quite a bit of interest in this, but not from the OP :)

Share this post


Link to post
Share on other sites

very much interested.....;)

script works for adding new pages

i added a little check if the filename exists like

            foreach($page->images as $image){
                //check if a image with the same filename exists
                if($this->pages->get("name={$image->name}")) {
                    //send error message for double entries
                    $this->error("double entry - image with the same filename exists!");
                } else {
                    if($this->pages->get("parent={$page->name}, name={$image->basename}")->id) continue;

but this is not the right place and contruction since the script should only notice image xxx is double ->save the others ->delete all images

.....interesting module!!

could really easy and fast create galleries with "oneimagepages"! (i like to have a page per image since i could easy add extra fields and other stuff...but handling many images is not the big deal since today....)

best regards mr-fan

Share this post


Link to post
Share on other sites

don't know if my post was clear...my problem is now...

step by step

->add two images to album (one of them exists in this album!)

->script stopps bevore saving the images

->show error (double entry...)

->delete the two images on the album page

->don't save the one that was new (thats the problem)

this is just a great use of the corefunctionality of massupload images and save them as nice pages.

adrian you're a really brilliant developper!

Share this post


Link to post
Share on other sites

It's kinda funny that there has been quite a bit of interest in this, but not from the OP :)

You're wrong, adrian!  ;)

This is exactly what i was searching for, thank you very much!

But I brought it to work only today... it's my first project with processwire and there is much to learn. But i can say right now: i love it.  ^_^

  • Like 2

Share this post


Link to post
Share on other sites

@adrian,

That did it!

I was so close to the solution!!!! I had the deleteAll in my code earlier today, just in the wrong place. Which doesn't really count, but still.  ;)  I'm learning a lot from all of you php experts, and I am really grateful that you guys know so much.

Thanks for the module. It's going to be a big time-saver.

  • Like 1

Share this post


Link to post
Share on other sites

@thistimj

one problems stays with double images - since we talk about using this to handle "many" images

->check for double images (image exists in as page)

->and skip them but save the other images

now with my little check it breaks and delete the uploaded images - but i'll try to solve this one.

and with this imagefield it would be fun to fill some custom fields or get both short pagetitle and some extra description or additional text fields that needed right after the upload.

https://processwire.com/talk/topic/7910-module-fieldtype-image-extra-multi-language/

regards mr-fan

Share this post


Link to post
Share on other sites

so we go a step further

https://github.com/mr-fan/AutoImagePages/blob/master/AutoImagePages.module

just added some backendsettings for template and field names.....works but now the script is not working

what i'm doing wrong with the use of $this->$data['fieldImages'] have i put it in a var first??

no more time today....but i like to learn!

regards mr-fan

Edit: ->How i get PHP codecolors for the .module files...?? is there a hidden setting in github? :undecided:

Edited by mr-fan
  • Like 1

Share this post


Link to post
Share on other sites

Nice job on the configurable fields :)

I have just committed an update that I think fixes all the issues you were having and also changes the selections for the config settings to use FieldtypeSelect and limits the options to templates and image fields as appropriate.

Let me know if it works as expected for you.

  • Like 2

Share this post


Link to post
Share on other sites

{ $this->data['fieldImages'] }

....sometimes i'll be a little blind....this is the point where it is bad that i've to less time for exercise and more practice....

will test asap i'm at home and report.

Thanks for this lesson!

The job with the configurable fields is the result of another lesson from you  ;) - so you can see i've something learned from your helping hand and on the next little module i could contribute even more code that works - we will see.

Best Regards mr-fan

  • Like 1

Share this post


Link to post
Share on other sites

Thank you very much for the next lesson on the template listings.... ;)

But i found a missing thing myself - so you can see i'm learning.....the module check for double images failed so i searched why and found that

this line don't work - always get a 0

- if($page->get("name={$image->basename}")->id) { 

but this one works perfect.... ;)

+ if(wire('pages')->get("name={$image->basename}")->id) {

so i've added a message for successful upload, too and put all together in this repo.

https://github.com/mr-fan/AutoImagePages

We have a simple kind of easy to use Foldergallery now

post-2327-0-81764700-1421329707_thumb.jp

Using Image Labels on Pagetree you have a great overview and drag&drop for the images....all works really intuitiv.

In my testinstallation i've a on the Add New Button in the admin add new "Album"....works perfekt.
In the next project i will see what the users will say.

Many thanks for Adrian from me - learnt o lot and we have a solution for all users.

Best Regards mr-fan+

Edit: May this one could set to best answer to get the link for the module to the first post of this topic??

Edited by mr-fan

Share this post


Link to post
Share on other sites

Looks great @mr-fan, but it is weird that:

 if($page->get("name={$image->basename}")->id) {

doesn't work for you. It seems to be working fine here. The reason I did it that way was to only search images in the current album. Maybe that is the difference - are you wanting to ensure there are no matches in all albums - I guess  that makes sense?

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 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 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:
       
    • By Guy Incognito
      I seem to be running into a repeated fatal error in a fresh PW install version 3.0.148. I can't quite put my finger on the pattern but it seems to be around deleting image fields or removing images from certain image fields.
      This is the trace from the log generated by trying to save a page and delete an image from an image field:
      Fatal Error: Uncaught Error: Cannot access protected property Pageimage::$original in /wire/core/PageimageVariations.php:256 Stack trace: 1. /wire/core/Pageimage.php(1327): PageimageVariations->getInfo() 2. /wire/core/Wire.php(386): Pageimage->___isVariation() 3. /wire/core/WireHooks.php(823): Wire->_callMethod() 4. /wire/core/Wire.php(450): WireHooks->runHooks() 5. /wire/core/Pageimage.php(1369): Wire->__call() 6. /wire/core/Pageimage.php(399): Pageimage->getOriginal() 7. /wire/core/WireData.php(333): Pageimage->get() 8. /wire/core/PageimageVariations.php(256): Pro Line 256 of /wire/core/PageimageVariations.php Earlier in the day I was experimenting with custom fields for images for the first time and kept running into this error, thinking it was me using this feature wrong and not having time to read up I deleted the custom image fields template and went about my business. So now I don't know if I triggered an issue or whether it was never related to the custom image fields in the first place?
      Any ideas?
    • By humanafterall
      I'm using some Custom fields for images: 
      https://processwire.com/blog/posts/pw-3.0.142/#custom-fields-for-files-images

      When I save the page, and return the fields are blank. When I re-add the text to the fields and save again then the fields save as expected.

      I know this is stated as being quite experimental but it's super useful feature I'd love to get working correctly.
      I have fields that are CKEditor fields but have overidden this on the image specific template. I've also tried it with regular text fields and I get the same bug.
      (currently using Processwire 3.0.155)
      **UPDATE**
      I've found this issue is specific to editing on pages using the PageTable fieldtype. The fields are not saving when I save the page in the PageTable.
    • By Robin S
      Displays image tags overlaid on the thumbnail using customisable colours. This makes it easier to see which images have which tags without needing to open the edit pane for individual images or changing to the list view.
      Screenshot

      Usage
      Enable tags for one or more image fields. Install the Image Thumbnail Tags module. Optionally configure colours for any of your tags.
       
      https://github.com/Toutouwai/ImageThumbnailTags
      https://modules.processwire.com/modules/image-thumbnail-tags/
×
×
  • Create New...