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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By toni
      Hi,
      I'm facing a strang problem. In my template I'm setting different sizes for srcset:
      $view->set('images', $page->picture); <img srcset="{$img->size(780,0)->url} 780w, {$img->size(1024,0)->url} 1024w, {$img->size(1440,0)->url} 1440w" src="{$img->url}" class="col__image"> All fine. However, the moment I reorder images in backend the different generated image sizes are broken.
      Does somebody has an idea what could cause it? 
      Version: ProcessWire 3.0.123 
       
      Thanks!
      Toni
    • By nabo
      Hello
      I'm working on a project that use PW as backend CMS. PW serves formatted data of each page but the engine simply generates json from pagearray.
      I would like to set one or more variations on images, so I think it would be useful if there were a field to set possible variations... even with overrides!
    • By PawelGIX
      Can I convert uploaded images to PNG, GIF, BMP -> JPEG?
      Is there any function in the API that I can change the file type?
    • By Robin S
      Repeater Images
      Adds options to modify Repeater fields to make them convenient for "page-per-image" usage. Using a page-per-image approach allows for additional fields to be associated with each image, to record things such as photographer, date, license, links, etc.
      When Repeater Images is enabled for a Repeater field the module changes the appearance of the Repeater inputfield to be similar (but not identical) to an Images field. The collapsed view shows a thumbnail for each Repeater item, and items can be expanded for field editing.
      Screencast

      Installation
      Install the Repeater Images module.
      Setup
      Create an image field to use in the Repeater field. Recommended settings for the image field are "Maximum files allowed" set to 1 and "Formatted value" set to "Single item (null if empty)". Create a Repeater field. Add the image field to the Repeater. If you want additional fields in the Repeater create and add these also. Repeater Images configuration
      Tick the "Activate Repeater Images for this Repeater field" checkbox. In the "Image field within Repeater" dropdown select the single image field. You must save the Repeater field settings to see any newly added Image fields in the dropdown. Adjust the image thumbnail height if you want (unlike the core Images field there is no slider to change thumbnail height within Page Edit). Note: the depth option for Repeater fields is not compatible with the Repeater Images module.
      Image uploads feature
      There is a checkbox to activate image uploads. This feature allows users to quickly and easily add images to the Repeater Images field by uploading them to an adjacent "upload" field.
      To use this feature you must add the image field selected in the Repeater Images config to the template of the page containing the Repeater Images field - immediately above or below the Repeater Images field would be a good position.
      It's recommended to set the label for this field in template context to "Upload images" or similar, and set the visibility of the field to "Closed" so that it takes up less room when it's not being used. Note that when you drag images to a closed Images field it will automatically open. You don't need to worry about the "Maximum files allowed" setting because the Repeater Images module overrides this for the upload field.
      New Repeater items will be created from the images uploaded to the upload field when the page is saved. The user can add descriptions and tags to the images while they are still in the upload field and these will be retained in the Repeater items. Images are automatically deleted from the upload field when the page is saved.
      Tips
      The "Use accordion mode?" option in the Repeater field settings is useful for keeping the inputfield compact, with only one image item open for editing at a time. The "Repeater item labels" setting determines what is shown in the thumbnail overlay on hover. Example for an image field named "image": {image.basename} ({image.width}x{image.height})  
      https://github.com/Toutouwai/RepeaterImages
      https://modules.processwire.com/modules/repeater-images/
    • By Kiwi Chris
      In the RTE, when inserting a link, there are several input fields that can be used to select a page, including a text input field that will auto-complete with pages on the site.
      When inserting an image, there is only an option to navigate the page tree. (equivalent to the second input option 'Select Page...' on the Insert Link screen from the RTE.
      When inserting an image from another page buried somewhere in the page tree, if you know the name of the page, it would often be quicker to use an auto-complete text field than 'Select Page...' option.
      It would be nice if the image insertion dialog offered the same functionality as the link insertion dialog so that when selecting a page it's possible to choose either to navigate the page tree, or have a text auto-complete field.
×
×
  • Create New...