Suggested improvements to "gallery" « WordPress.com Forums

Need help? Check out our Support site, then

WordPress.com Forums » Ideas

Suggested improvements to "gallery"

roscharron
Member
Nov 14, 2011, 12:00 PM

I understand what motivated WordPress staff to change the way the "gallery" command worked recently. The old "permalink" viewer was clunky and not intuitive. A few small improvements could make a big difference.

I've written a set of custom web pages which demonstrate the improvements I think should be made. You can view it at <http://roscharron.wordpress.com/silent-main>. You can compare it to the old version at <http://roscharron.wordpress.com/silent> (you'll need to click on the Permalink once you start the carousel viewer).

In brief, here is what I changed:
1. Added small but intuitive navigation tags (Exit,Previous,Next) to the top and bottom of the image.
2. Changed the response to clicking on the image itself from what it does now (displays the next image - unexpected) to moving the focus to the "Description" (the text which is attached to the image) at the end of the page.
3. Moved the information and links to a "full-size" image to the very bottom of the page rather than the top..
4. On the last image in the "gallery" I replaced the word "Next" with "Finish" to make it more obvious that you are looking at the last image.

If I had more time I would have changed the "title" that appears when you hover over "Exit" and "Previous" and "Next". For example, in my current version, if you hover over the "Next" link, it just shows a title of "Next". That could easily be changed to display the caption of the next image. Similarly with the "Previous" link and the "Exit" link. However, the links themselves should remain as "Exit", "Previous" and "Next" since these labels are more intuitive to the user.

Hope you agree with some/all of my suggestions and can improve the "permalink" viewer (and hopefully supply an option on gallery that displays the "permalink" viewer instead of the "carousel" viewer).

The blog I need help with is roscharron.wordpress.com.
1tess
Moderator
Nov 18, 2011, 6:33 PM

I am wondering how you did that. Can you explain?
timethief
Member
Nov 18, 2011, 6:54 PM

@roscharron
Yes, please do explain as I like what you accomplished very much.
roscharron
Member
Nov 19, 2011, 3:24 AM

Many thanks.

You want me to explain how I did it. Hmmm.

I did it all MANUALLY. I don't expect anyone (in their right mind) to do it this way. I did it more as an exercise to see how far I could go with it. Also, I only did it for one gallery (I have 9 more to do!). The right place to do it is in the PHP that controls WordPress.com but that's not accessible to me.

I'm happy to run through what I did in more detail (HTML and a bit of CSS) but it'll get pretty long and a bit technical. Let me give you a summary and you can decide if you want more...

You'll need access to edit your CSS file to be able to create/override a few classes (about 3 new ones and 3 overrides so not a huge effort).

To create the lead in page (the one that presents the gallery in rows and columns), it's easier to just steal the existing source code and modify it. To do this, build your page as you would now using the [gallery] command and attach all the images and get it looking exactly the way you want. Then preview this page, right click in the browser to View Source and copy/paste the source code of the entire DIV that displays the image thumbnails to a text editor (e.g. notepad). You'll need to edit the source code (replace the href targets with your own page references). Once you have edited it, just replace the [gallery] command in your page with the edited DIV.

Then, create a separate page corresponding to each href that you have referred to in the edited gallery page. This is not that hard to do but it is tedious (one for each image with links to the previous and next page plus the description text). You'll need to know a few fields (number of pixels) which are available from the original permalink pages (click on permalink to see them in the new carousel tool).

I'm happy to supply the code I used to get the navigation labels (Exit, Previous, Next) , the Description and the "View full-size image..." to appear on the page with small arrows.

Let me know if you really want more gruesome details.
1tess
Moderator
Nov 19, 2011, 4:11 AM

Yes, please.

I have used the gallery "feature" very few times, but the updated version I tried to use in one of my blogs recently was a sorry mess.

I don't expect anyone (in their right mind…

Right mind? My clumsy solution involved using tables to make something usable. Tedious? Indeed.

I have used the gallery "feature" only rarely. It has always seemed incompletely developed, and the new Carousel does not add what I would like to its functionality.

Your design is brilliant.

So, yes, gruesome details! Please.

I hope staff will take note of what you have done and incorporate your concept in to future revisions of their code.

By the way: I really like your Tomoko Fuse lizards in "Where Did All the Real Ones Go To?" and the picture of the swans on the window sill in "A Rainy Sunday."
roscharron
Member
Nov 19, 2011, 7:59 AM

Thanks for supporting my suggestions. And thanks for the feedback on my paintings. Fingers crossed that someone at WP agrees.

Step 1: How to Bypass the Carousel Viewer

This step will result in a page/blog that bypasses the new carousel viewer and links the thumbnail images directly to the original "permalink" viewer (which some people liked better than the new one).

Build your lead-in page/blog (the one that displays the rows and columns of thumbnail images) using the [gallery] command. Once you are happy with it, Preview it in a browser.

All browsers will let you right click on the page and select "View Source" (or "View Page Source"). Scroll around to find the beginning of the DIV section that contains the thumbnails. It will begin with something like:

<div <strong>data-carousel-extra='["27479409","http:\/\/myblog.wordpress.com\/blabla\/","f1071e6066"]'</strong> id='gallery-1' .......<br /> .<br /> .<br /> .<br /> </div><br />

You want to "copy" and "paste" the entire DIV from the <div data... through to its closing </div>.

I had no trouble matching them up as they are nicely indented when displayed in my browser (Firefox). There are usually many lines of source code and they will include all of your images (you'll recognize the file names). Make sure you include everything including the closing > symbol on the closing </div>.

"Copy" (or Ctrl-C) your selection. Using WP Dashboard, edit your page/blog and "Paste" the copied lines of code over the [gallery] command (in other words, blow away the [gallery] command completely and replace it with the source code you just copied).

Now you're ready to remove the carousel viewer. To do that, just delete the attribute from the first line of the div: The bit you remove looks like:

data-carousel-extra='["27479409","http:\/\/myblog.wordpress.com\/blabla\/","f1071e6066"]'

Once you've deleted it, your code should look something like:

<div id='gallery-1' .......<br /> .<br /> .<br /> .<br /> </div><br />

Now Preview the page/blog. You should find it looks identical to what you saw with the [gallery] command but this time, when you click on an image, instead of seeing the carousel viewer, you should see the original permalink viewer.

Update the page/blog to make it permanent.

End of Step 1

Remember that if you change your images in any way, you may have to redo this step.

(WP Staff: I'm sure all this could be done in PHP using an option on the gallery command e.g.

[gallery viewer="permalink"]

in 2 lines of code.)

I'll post the next step separately.
roscharron
Member
Nov 19, 2011, 8:27 AM

Step 2: Prepare CSS Changes

This step prepares the your CSS file to provide a more attractive/intuitive permalink viewer experience. (The new experience won't be visible until you perform Step 3.)

To change your CSS file, you need to pay WP money (currently USD30) for the privilege (follow the instructions on the Custom Design link under the Appearance section of your dashboard).

Once you've paid for the privilege, select the Custom Design link under the Appearance section of your dashboard. Click on the CSS tab (this tab is displayed in faint gray at the top of the page). You should see a text box in which you can add any changes you want to make.

If you have made other changes to your CSS file you should add these to the end of those changes.

Add the following lines:

<br /> .cust-nav-previous {<br /> float:left;<br /> width:50%;<br /> }</p> <p>.cust-nav-next {<br /> float:right;<br /> text-align:right;<br /> width:50%;<br /> }</p> <p>.navigation {<br /> color:#000000;<br /> font-size:12px;<br /> line-height:18px;<br /> overflow:hidden;<br /> }</p> <p>.navigation a:link,.navigation a:visited {<br /> color:#000000;<br /> text-decoration:none;<br /> }</p> <p>.navigation a:active,.navigation a:hover {<br /> color:#ff4b33;<br /> }

The classes beginning with ".cust-" are new ones and should have no effect on any existing pages/blogs. You'll see how I use them in Step 3.

The changes which begin with ".navigation" override the existing classes in the CSS. The only change I made was to the color of the text from #888 (faint grey) to #000000 (black). If you don't mind the faint grey, don't include any of the changes that relate to .navigation. Personally I prefer black.

Click on Save Stylesheet to save your changes (or you may want to click on Preview before you save to check out the effect - in the preview pages, you will be able to notice the change in color on the links in the permalink viewer).

End of Step 2

I'll post the next step separately.
roscharron
Member
Nov 19, 2011, 8:58 AM

Step 3: Create Your Own Permalink Pages

This step is going to take time and effort. You have to create a new "permalink" page for each image in your gallery. I'd suggest you adopt a naming convention for make it easier for you to locate the pages more easily. For example, use a common 2 letter prefix for all the files like "sw-image1" and "sw-image2" and so on. Also, keep the page names short. All this will make life easier for you.

Let's say that you choose to name your first page "sw-image1". In the dashboard under Pages, Add New. In the title type

sw-image1

then in the body of the page add the following code:

<br /> <div class="navigation"><br /> <div class="cust-nav-previous"><a title="Exit" href="%EXIT-PAGE%">↑ Exit</a></div><br /> <div class="cust-nav-next"><a title="%PREV-CAPTION%">←Previous</a> | <a title="%NEXT-CAPTION%" href="%NEXT-HREF%">Next→</a></div><br /> </div><br /> <div id="post-262" class="post-262 attachment type-attachment status-inherit hentry"><br /> <div class="entry-content"><br /> <div class="entry-attachment"><br /> <p class="attachment"><a title="%THIS-CAPTION%" href="#Description" rel="attachment"><img class="attachment-900x900" title="%this-caption%" src="%THIS-IMAGEFILE%.jpg?w=%THIS-ADJ-WIDTH%" alt="%THIS-ALT-CAPTION%" width="%THIS-ADJ-WIDTH%" height="%THIS-ADJ-HEIGHT%" /></a></p><br /> <div id="nav-below" class="navigation"><br /> <div class="cust-nav-previous"><a title="Exit" href="%EXIT-PAGE%">↑ Exit</a></div><br /> <div class="cust-nav-next"><a title="%PREV-CAPTION%" href="%PREV-HREF%">←Previous</a> | <a title="%NEXT-CAPTION%" href="%NEXT-HREF%">Next→</a></div><br /> <a></a> <ul> </div><br /> <div class="entry-caption"><p>%THIS-CAPTION%</p></div><br /> %THIS DESCRIPTION%<br /> </div><br /> </div><br /> </div></p> <p><div id="nav-below" class="navigation"><br /> <div class="cust-nav-next"><a title="Full-size image" href="%THIS-IMAGEFILE%.jpg">View full-size image %THIS-FULL-WIDTH% x %THIS-FULL-HEIGHT% pixels published %THIS-PUBL-DATE% by %THIS-PUBL-AUTHNAME%</a></div><br /> </div><br /> </div> </ul>

Phew! I hope I got the above right. As you can see, there are lots of tags that look like %BLABAL%. On each page, they will contain text or a number that corresponds to your gallery pages. I've tried to give them obvious names but I'll explain what each one means in my next post.
justjennifer
Member
Nov 19, 2011, 9:30 AM

While certainly inspiring, basically what you're saying is that you've disabled the new Carousel and returned to the previous functionality of the Gallery feature and in order to be able to do so, it would require purchasing the Custom Design upgrade.

Even though it's possible, it's still above the head of the average user.
roscharron
Member
Nov 19, 2011, 1:11 PM

You said:

<quote>what you're saying is that you've disabled the new Carousel and returned to the previous functionality of the Gallery feature</quote>

Correct. That was Step 1 which does NOT require purchasing Custom Design to achieve. This step was not the end I wanted to achieve (although it may satisfy others who found the new carousel viewer objectionable and wanted to return to the original viewer).

What does require you to purchase Custom Design access is if you want to make improvements to the original viewer.

As for all this being

<quote>above the head of the average user</quote>

you may be right. I don't really know what an "average" user can do. I don't consider myself to be more than "average". And I did mention that this was going to be a very technical and tedious process only suited to people were not in their "right mind". As I said before, the real changes should be made by WP staff using PHP.and rolled out to everyone without lifting a finger. Of course, that is beyond my control. I can only suggest what I believe are "improvements".

I'll continue my "gruesome details" for 1tess.and timethief in a separate post.
roscharron
Member
Nov 19, 2011, 1:52 PM

I've hit a snag. I tried to paste the HTML code for Step 3 into a post but unfortunately rather than display the HTML as pasted, some of the HTML has been "interpreted". For example now appears in the post as a blank and is being interpreted as a link. Before I go on, I'll have to find a way to paste the exact HTML without having to replace all the special characters. If you know of a way of doing this I'd be happy to receive it.
1tess
Moderator
Nov 19, 2011, 2:01 PM

I'll introduce you to my friend Panos:

http://wpbtips.wordpress.com/comment-guidelines/

See "4. Pasting Code"

Don't know if it will work on the forums or not though it could be worth a try.
1tess
Moderator
Nov 19, 2011, 2:06 PM

Ros,

Thank you for taking the time to write this up. I don't have the CSS upgrade but for one of my blogs this might be useful. I see what you mean about the time-consuming nature of the process.

Step 1, disabling the carousel, is certainly not difficult and a better way than telling readers to disable java script in order to view the old version of the gallery.
1tess
Moderator
Nov 19, 2011, 2:11 PM

All browsers will let you right click on the page and select "View Source" (or "View Page Source"). Scroll around to find the beginning of the DIV section that contains the thumbnails.

Just thought I'd mention that you can use the "find" function of your browser rather than scrolling along until your eyes blur on the code. On FireFox it's under the Edit tab. (on macs the keyboard shortcut is command-"f")
panaghiotisadam
Member
Nov 19, 2011, 2:13 PM

A word of caution re "Step 1: How to Bypass the Carousel Viewer": it will work in some themes only. Tried 10 themes selected randomly, ok in 2 of them; in the rest the thumbnails show up in one column, with the captions out of place.
roscharron
Member
Nov 19, 2011, 2:15 PM

Thanks 1tess. The link you gave me on Pasting Code suggested textsnip.com which seems to work well. The HTML code I tried to paste into Step 3 is shown properly at http://textsnip.com/ab267b .
panaghiotisadam
Member
Nov 19, 2011, 2:23 PM

@Ros: The link Tess gave you includes this as well:
http://www.plus2net.com/html_tutorial/tags-page.php
That's the tool I use to actually display code in my posts (for examples, check my posts on formatting text).
1tess
Moderator
Nov 19, 2011, 2:28 PM

Panos,
Rats, I tried it only in Twenty Ten which was the theme my test blog was in last night.
panaghiotisadam
Member
Nov 19, 2011, 2:34 PM

And which is also the theme Ros is using.
justjennifer
Member
Nov 19, 2011, 2:50 PM

@roscharron I didn't mean to belittle what you'd done and I'm sorry if it came across that way.

You may want to write up this procedure in a post on your blog for posterity and then post a link here in the forums. :)
roscharron
Member
Nov 19, 2011, 3:01 PM
Thanks everyone for your suggestions/advice. I'm still not "average" but moving in the right direction...

Here's that HTML code again (converted to be post-friendlyby plus2net web site - so good). Remember that this is the code you use for each page (one page is required for each image in your gallery - OMG this is a lot of work).

<div class="navigation">
<div class="cust-nav-previous">↑ Exit</div>
<div class="cust-nav-next">←Previous | Next→</div>
</div>
<div id="post-262" class="post-262 attachment type-attachment status-inherit hentry">
<div class="entry-content">
<div class="entry-attachment">
<p class="attachment"><img class="attachment-900x900" title="%THIS-CAPTION%" src="%THIS-IMAGEFILE%.jpg?w=%THIS-ADJ-WIDTH%" alt="%THIS-ALT-CAPTION%" width="%THIS-ADJ-WIDTH%" height="%THIS-ADJ-HEIGHT%" /></p>
<div id="nav-below" class="navigation">
<div class="cust-nav-previous">↑ Exit</div>
<div class="cust-nav-next">←Previous | Next→</div>
roscharron
Member
Nov 19, 2011, 3:03 PM

Hmmm. That plus2net didn't work. I'd recommend using the link to textsnip to view the HTML code.
roscharron
Member
Nov 19, 2011, 3:08 PM

@justjennifer

No problemo. Thanks for the suggestion.
panaghiotisadam
Member
Nov 19, 2011, 3:13 PM

@Ros: Sorry if I misled you. You wrote "I tried to paste the HTML code for Step 3 into a post". That's why I suggested the plus2net tool: for your blog, not for the forum.