Square Gallery styling in Skylark theme
-
Hi: I’m using the Skylark theme on my jewelry site and currently have three pages that are styled using the Gallery Shortcode styling. Here’s an example: http://nancymegancorwin.com/jewelry/
Although they look pretty good, the scale of the pieces is all over the place, and because some are vertical and others horizontal, I need to keep them in even rows, which is hard.
So I wanted to try using the Square styling shortcake, but I’m running into trouble and think I might need custom css. When I tried to add “4” columns, it put one huge image on top and then rows of three underneath, possibly because the Square styling only seems to work in multiples of three.
Here’s a draft page as good as I could get using two rows of three:
https://nmegan.wordpress.com/?page_id=1050&preview=trueLong intro to my question: is there a way to override the styling with custom css to allow 4 columns of square images that are sized large enough to sort of match the width of the header bar at the top of the page?
The blog I need help with is: (visible only to logged in users)
-
Only Staff can see previews. And you can do this without CSS.
If you don’t mind doing a little extra work after you insert the square tiles style Gallery, switch to the HTML tab in the Post/Page Editor and add the following to the Gallery shortcode
columns="4"so the whole gallery shortcode should look something like:
[gallery type="square" columns="4" ids="126,127,192,150,331,251,173,224"]With 8 images, that will give you 2 rows and 4 columns.
By default the mosaic style Gallery types will fill the width of the entire content container. So make sure that however many images you have is exactly a multiple of your columns because any “leftover” images will try to fill the entire width which can lead to some unexpected surprises.
Let us know how that goes.
-
Here’s a little more insight about using Tiled Mosaics https://agallerydemo.wordpress.com/2012/10/05/shapes-and-mosaics-new-ways-of-displaying-your-gallery-thumbnails/
-
Thanks in advance for your help. I haven’t looked at the Tiles Mosaics link yet but I will, thanks for that.
I tried what you suggested earlier, and tried it again, but something’s not right. Maybe you can help.
Here’s the shortcode I added:
[gallery type="square" columns="4" ids="544,596,555,551,672,550,539,543"]I published the page so you can see. Here’s the internal link:
http://nancymegancorwin.com/vessels-scented-oil-bottles-sq-test/What do you think is happening?
-
I think that may be an “unexpected surprise” Jennifer mentioned.
” So make sure that however many images you have is exactly a multiple of your columns because any “leftover” images will try to fill the entire width which can lead to some unexpected surprises.”
here, try sticking this image in as a place holder: https://drive.google.com/open?id=0B7wsbMlxgK8nVC1xa090c3NpN28
It’s a blank, empty transparent box. This will give you 8 images and you should have the nice 4 column grid you’re looking for.
If you find another image you want to add later, simply remove the blank one and replace it.
-
jameswelbes
Thank you for your response and suggestion. But I already have 8 images in the shortcode above (see my id number string above), so I’m not sure why only 7 are displaying. Is there possibly some problem with the sizes of the images or something else that’s blocking them from setting up 4 across?
-
oh….yeah that is weird. Sorry, I think I’m stumped.
All I’ll say is make absolute sure you’ve uploaded 8 images and that all the 3 digit shortcodes are correct.
Beyond that, you’ll have to wait for someone smarter than myself.
-
So, I tried changing the numbers. Now it seems to be working 4 across, so perhaps there was some problem with reading one of the ID numbers?
But they are still small. Is there a way to make them larger? Or I suppose I could add a 5th column.
-
-
@nmegan – Sorry, night time happened here.
What do you think is happening?
I think that may be an “unexpected surprise” Jennifer mentioned.
The unexpected surprise is when you have a “leftover” image and that single image fills the entire width of the content container. You can see that going on in my agallerydemo post I linked to above.
If you are aiming for consistent display in a square (or circle) tile mosaic style Gallery, you need to use the correct multiple to the number of columns you are using. So 4 columns must have 4 or 8 or 12, etc. to keep the display consistent.
The tiled mosaic styles of Gallery won’t take the size parameter. The images will appear larger in the Post Editor, but when published the images will auto-resize to fit the content container. The only Gallery type that does accept the size parameter is the default thumbnail style.
If you want to change the overall image sizes on your site, you can do that in Settings>Media. https://en.support.wordpress.com/settings/media-settings/
But it seems there’s something else going on here, it may have to do with your lovely customizations, so I’ve tagged this for Staff assistance. Please be patient while they get back to you.
-
Hi there,
The gallery will automatically fill the regular width for content in your theme. When you use a full-width page template, like your theme’s portfolio template, the gallery won’t fill the full width of the page — it will only be the width of your theme’s regular page width. That’s a known issue when using Tiled or Square gallery styles on a full-width page template, and our team hasn’t found a way to fix that at this stage.
One way around that is to use the Thumbnail Grid gallery type, instead. With that gallery type, the gallery will fill the full width of the page and you can adjust the size of the images in the gallery to make them larger or smaller, depending on what you prefer.
Please let me know if you have any questions about that. :)
-
@rachelmcr – So sorry to hear that this is *still* an issue. (Same issue on a wedding photographer’s site about a year+ ago, if I remember correctly.)
Since the OP posted this in the CSS Customization forum, is it possible to use CSS here to resolve the issue?
-
It’s a tricky issue to resolve, because of how the available width is calculated when the gallery is created on the page. The width can’t be changed with CSS (because that width and the gallery layout is done programmatically, rather than with CSS) but the gallery could be centered, instead. This CSS should do the trick for that:
.gallery-row { margin: 0 auto; } -
justjennifer and rachelmcr
Thank you both for this, I think I understand. I will try both schemes and see if I can make this work for me. I may not get to it until this weekend but I’ll post back if I have additional questions. Thank you all again!
-
@nmegan — You’re welcome! If you get stuck or have other questions about this, please let us know. :)
@justjennifer — Adding more columns won’t make the gallery wider, but using that CSS will center the gallery no matter how many columns it has. That CSS will affect other galleries in the same situation (tiled galleries on a full-width page template) by centering them as well, but it won’t impact galleries that are already displaying at the full width of the page they’re on.
- The topic ‘Square Gallery styling in Skylark theme’ is closed to new replies.
WordPress.com Forums 