How do I re-order the display of images in my Gallery?

[RuthNicholls]

Hi, This is my first time here, and I’m not even sure if I’m in the right place. I am trying to set up a web-site for the first time, via a hosting company called   iom.me  . They use the Weaver Extreme. I have chosen Full Width Dark, and have got as far as creating a Home page, a Blog page, a Gallery page, a Contacts page and a Links page. I am an enthusiast photographer and primarily I want this site to display my images.

I have made a child page inside the main Gallery, and uploaded some images. somewhere in the settings I have set to display in 3 columns, but it doesn’t do that, sometimes it puts two on one line, but mostly they are in a single column. And also each new image I upload and insert into the page appears as the first image at the top of the display. I don’t know how to re-arrange them. I’ve tried just dragging but they won’t move. My site is http://ruthnichollsphotography.iom.me if anyone would like to help me out with this.

I also want to add watermarks/copyright marks to my images. I know how to do that in Photoshop, but looking at all the options there are on the site, I think it ought to be possible to get the upload system to do it. Don’t understand it, sadly.
Thanks, Ruth

[scrambler]

Assuming the page in question is: http://ruthnichollsphotography.iom.me/gallery-3/my-dpagb-distinction-images/

You need to elaborate on how you are creating that page. The simplest method is using WordPress gallery feature

When in your page editing page:

• Just above the content editor click Add media
• Then Click Create gallery
• Select all the images
• Click Create New Gallery at bottom right
• Select options like the number of columns at top right
• Click Insert gallery at bottom right
• Update the page and View it 

There is no built in feature in wordpress or weaver Xtreme that will automatically add a watermark, there may be some plugin that would do that (search wordpress.org)

[RuthNicholls]

Thank you Scrambler. I will follow your clear instructions and see how I get on. 🙂

[Weaver]

If you need to have a different order of images in you gallery, you can do that from the standard WordPress Media menu, and edit the gallery. You can drag and drop the order of gallery images. For more details, search the WordPress.org site or the web. That is a general WordPress feature, and not related to any particular theme.

[RuthNicholls]

Thank you both for your help. I am gradually getting the hang of it. i have another question please. I have put some images on a page under the main Gallery. See http://ruthnichollsphotography.iom.me/gallery-5/croatia/plitvice-national-park-croatia/ . I have discovered how to hide the header image on that page. But if I click on a thumbnail to see the larger image, the header image is still there, and also a header bar with the title and publishing details of the image. Then if I use the Next arrow, the next image is displayed, but again the header image and the title bar is there. This is annoying for viewers. How do I stop the header image and the image title bar showing when viewing the images at full size, one after the other? Thank you. I can’t find a tutorial or any helpfile that answers this question.

[scrambler]

If you want to hide the header image, the page title and the published date on the pages that open when clicking on an image (attachment page), you can do it by adding the rules below in Main Options > Fonts & Custom > Custom CSS rule box

.attachment .header-image {display:none;}  /*hide header image*/
.attachment .page-header {display:none;}  /*hide page title*/
.attachment .entry-meta {display:none;}  /*hide published date*/

[RuthNicholls]

My goodness, this is kind-of ‘programming’ is it? I see there are spaces between some parts of what you have written for me to copy. Is that right? In fact 2 spaces after the second bracket.  Thank you, I’ll have a go. ……… Well, surprisingly I seem to have managed that! You are being very helpful Scrambler. I’ve had a look at the Weaver Theme Help notes, but it is a bit of a minefield for me. I understand photoshop and imaging, but setting up a web-site is a whole new territory for me. So I will probably be back with a few more questions. I hope you won’t mind and will help a bit more when I need it. All I really want is a nice interface to show off my images.
Thanks 🙂

[scrambler]

Yes it is kind of very basic programming. It is called CSS (for cascading style sheets).

All the styling of the site is done using CSS rules. Everytime you set and option, it generates a rule for the page to use. Because it is impossible to put options for every possible styling, the theme has a Custom CSS rule box where you can add any rule you want to change anything you like.

CSS rules include two parts, selectors (the beginning  like .attachment .header-image) that determine what the rule applies to and Actual CSS properties between the Curly brackets {…}.

The stuff between /* and */ are just comments for documentation so you will remember why you put these in in the future 🙂

Syntax is VERY important so always copy as is. Missing a space or a bracket can break the rule and the whole site.

If you wish to start educating yourself, you can read the thread below that explains how to inspect your pages with your browser developer tools. There are also some CSS and HTML reference sites at the end to find out more on these subjects.

http://forum.weavertheme.com/discussion/1207/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues

[RuthNicholls]

Thank you Scrambler, I do prefer to understand on a basic level how things work. Not sure that I want to delve too deeply! I will have a look at the link. Such a lot to do!!

Maybe you could also tell me one more thing. Is it possible to put the Next/Previous arrows at either side of the enlarged images? At present, they are in the lower corners below the image, but that means that on a laptop screen you have to scroll each page down to see them before you can click to see the next image. Rather annoying for the viewer.

I thought I’d set the forum settings to send me an email when I had a reply, but that doesn’t seem to happen. Not to worry, I shall keep coming back to check.

Thanks again, me

[scrambler]

It looks like the post navigation options are not applying to the image attachments.

Two possibilities

1) Display the navigation above instead of below
Unhide the top navigation and hide the bottom one on these pages using the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

.attachment #nav-above {display:block;}
.attachment #nav-below {display:none;}

2) Display them half way vertically
If you actually want them in the middle, you could use the rule below instead

.attachment #nav-below {position:absolute;width:100%;top:50%;}

And yes, Notification on this forum do not work…

[RuthNicholls]

Thank you again Scrambler. (What’s your real name?) I decided to put the navigation boxes at the top.

I now notice that the images when enlarged don’t display in the same order as the thumbnails are arranged. Also, on the other page in the Gallery, DPAGB images, if I click on the first image to enlarge it, the Next button only displays one other image, the last one. And if I click on the second image, the navigation buttons show some but not all of the 13 images. The first and last are missing, and some of the others. Can’t work out why. Nothing to do with alphabetical order of titles. Can I fix this? When you make a Gallery, do you have to upload, publish, all the images at the same time, or can you add some more later? I think with the DPAGB set, I did two of them, and added the others later. Is that why they don’t all show up when enlarged and scrolling through them?
There is no way I can work out what to do without help, I do appreciate yours.

[scrambler]

“I now notice that the images when enlarged don’t display in the same order as the thumbnails are arranged.”

I am afraid there is nothing you can do about that. When you click on a specific image in your gallery, WordPress goes to the attachment page of your image. At that point it does not know anything about your gallery and the previous and next are just going through ALL your images. Not sure why some would be missing.

You would need a dedicated gallery plugin to manage these from start to end.

[RuthNicholls]

Thank you. Oh dear, and Hmm….  I wonder if I number them whether that would make a difference. I suppose it is not vital but it would be nice, having gone to the trouble of ordering the thumbnails in the first place.

On any given page in the Gallery, do you need to upload all the images you want on that one page all at once, or can you keep adding more images later?

🙂

[Gillian]

You don’t need to add all images at the same time into a gallery – once the gallery is created you can add (or remove) images as desired.

[scrambler]

Once you insert a gallery in a page content editor, you have two ways to look at it there.

if your content editor is in visual mode, you see the images, and if you click on them you have an Edit icon that lets you go back and edit the gallery. You can delete images, add images, or change the order.

If you switch your content editor to text mode, you see a gallery shortcode with numbers. The numbers are the image ids, you can change their order and add or remove some as you wish.

I checked if there was a logic to what happens when you click on one of the image in the page. It looks like it goes to that image attachment, and then it only allows you to go next to the next image above that in your media library. this means that if you go to your media library and see a list of images like

image1
image2
image3
image4
image5

If you create a gallery with the images 3, 4, 1 (in that order), if you click on image 3, next will take you to image2, next to image 1, and that is it, you will never get to image 4 this way

To have a different control, you will have to explore gallery plugin, as the basic WordPress gallery only deals with the gallery itself, and not the single image next and previous list

[RuthNicholls]

Thank you both. I think I’m a bit baffled now. I’ll have another play with it and see what I can do. Where do I go for a plug-in?

[Author]

Posts