unexpected layout of images

[grumpy]

I am using PW Intermediate profile as my starting point.  I am developing pages to display my collection of local historical postcards.  There are various gallery style index pages which give access to the individual image pages.  The galleries have the images in the body, and when viewed normally in a browser they display as many images per row as the screen allows.   For example see:

http://www.the-limes.com/postcards/gerrards-cross/

My problem arises when I give these gallery images an image description and tick the caption box.  The result when viewed normally in a browser is a single column of images, i.e. they no longer appear as rows of images.  See:

http://www.the-limes.com/postcards/chalfont-st-giles/

Please will someone explain what I have missed?

Thanks.

[LostKobrakai]

The images with captions are wrapped in a <figure> tag to appropriately markup the caption as <figcaption>. This html tag is a block element, so you'd need some css (float or display: inline-block) to make them flow next to each other.

[tpr]

When descriptions are used, your markup for images gets a "figure" tag wrapper, which is a block element, that's why they are full width.

Set figure to display: inline block in your CSS:

figure {
  display: inline-block;
}

It would be better to add a parent div with a class "gallery" for example, and style like this:

.gallery > figure,
.gallery > a {
  display: inline-block;
}

Update: LostKobrakai was faster

[grumpy]

Thanks, guys.

[grumpy]

Is there a setting somewhere limiting the size of pages or number of images on a page? If you look at:

http://www.the-limes.com/postcards/the-colony/

when I try to add a fifteenth thumbnail link it just overwrites an existing one...

[tpr]

Check your image field settings: Details tab, Maximum files allowed.

[grumpy]

Yes, I'd already checked that one.  My existing setting is: Edit Field: images, Detail tab, Maximum Files Allowed=0.  I've tried changing the setting to 100 but it makes no difference.

[grumpy]

Could it be something to do with the images being in a 'figure' tag wrapper?  Do I need to specify the maximum files allowed for 'figure' and if so how and where?

[tpr]

No, it shouldn't. 

Try adding this to your .htaccess:

php_value max_input_vars 2000

[grumpy]

I've pasted 'php_value max_input_vars 2000' at the bottom of my .htaccess immediately above the '# END PROCESSWIRE HTACCESS DIRECTIVES' section.  It has made no difference.  An attempt to add a fifteenth thumbnail link still doesn't work.  It overwrites the thumbnail image of number 14 with image 15 but leaves its caption unchanged as caption 14.  If I then go to edit the properties of the thumbnail it shows caption 15 in the image editing window.  If I upload it I have to change the caption to the correct one in the page editor.

Everything had been going very smoothly until this problem with the fifteenth thumbnail.  It doesn't appear to be specific to any one pc or browser.

[LostKobrakai]

Does this image removal only happen for the image in the ckeditor or do images also disappear from the image field of this page? Do you have image-management (content type) enabled for the textarea?

[tpr]

Could you check your php settings with phpinfo() ? Please try it with and without "php_value max_input_vars" in top of htaccess file to see if it actually works on your host (perhaps you can't override it in .htaccess)

Check values like:

max_input_nesting_level	64	64
max_input_time	600	60
max_input_vars	2500	1000

[grumpy]

tpr:  I've set the max_input_vars to 10000 in my domain control panel (the htaccess method wasn't working).  My current settings are:

max_input_nesting_level       64          64
max_input_time                     60          60
max_input_vars                  10000    10000

The problem is still there with these setttings.

To narrow things down I have tried deleting all the thumbnail links from the page and have found the following as i try to set it up again:

If I add thumbnails without a caption onto the page and add a link to each, I can add as many as I like.

If I then edit those captionless thumbnail links and add a caption to each, there is no problem

If I try to add thumbnails with a caption to the empty page, then the first one works fine, the second one overwrites the first one's image and leaves the first caption unchanged.

LostKobrakai:  This error is apparent both in the editor mode and in the browser viewed mode.  Where do I check the image-management (content type) setting for the textarea?

[LostKobrakai]

In the field settings of the textarea under Details -> Content Type. 

[grumpy]

I don't have textarea under my list of fields.  There is FieldtypeTextarea in my core modules.  The thumbnails are going into the Body of my page and in the template this is designated as Textarea.  If I go to 'Body' from Fields and then select the Details tab then the content type is currently Markup/HTML.

[grumpy]

I've just been playing around with it a bit more.  I can now sort of see what the problem is.  There are two issues:

1.  The thumbnail and caption are not automatically  'grouped' when added to the page (this makes drag and drop rearranging a total pain - virtually impossible)

2.  When introducing a new thumbnail image to a page containing captioned thumbnails it is impossible to get it to insert at a place where it is not overwriting an existing image.

[LostKobrakai]

These sound very much like ckeditor specific issues. That thing isn't really meant to build whole galleries of images, but to manage text / image content. You would maybe have a better time rendering the images with the api in an automated fashion.