Jump to content

unexpected layout of images


grumpy
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...