Order of thumbnails - float left instead of centered?

Permalink Browser Info Environment
Would it be possible to change the layout of the thumbnails so that they are not centered, but lined up to the left? My client will probably take issue with the bottom row not lining up to the ones above. (ex: the two attached files)
I tried playing with touchstyles.css but no success..

Grateful for any suggestions

1 Attachment

Type: Discussion
Status: Resolved
arlenesey
View Replies: View Best Answer
mnakalay replied on at Permalink Reply 1 Attachment
mnakalay
Hello,

Here's a templates you can use for that.

1- Go to packages/touch_gallery/blocks/touch_gallery
2- create a folder called templates
3- extract the file I sent you in the folder you just created
4- put your page in edit mode and click edit on the touch gallery block
5- select custom template and select the template "Thumbs Left Aligned" from the list

After saving and maybe reloading the page, your tumbnails should be left aligned.

Please let me know if there was anything else I could help you with.

Nour
arlenesey replied on at Permalink Reply 1 Attachment
arlenesey
Hello Nour - thanks for the quick reply!
I integrated the template exactly as you said, and it worked (Yeah!)
However...

I already have a template for touch gallery in the blocks override folder:
root>blocks>touch_gallery>templates>touch_gallery_anja_full
I enclose the override folder so you can look at it.

Is there some way that I could integrate your code into my template?

I did a lot of changes to color and images, etc.

Thank you

Arlene
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Oh yes, very easily.

in your template, in the view.php, you have this block of code
#touchgallery-thumbs<?php    echo $bID ?> a{
  width:<?php    echo $maxThumbWidth ?>px;
  height:<?php    echo $maxThumbHeight ?>px;
  margin: 6px 6px <?php  echo $thumbBottommargin ?>px;
}

just add a float: left like this
#touchgallery-thumbs<?php    echo $bID ?> a{
  float:left;
  width:<?php    echo $maxThumbWidth ?>px;
  height:<?php    echo $maxThumbHeight ?>px;
  margin: 6px 6px <?php  echo $thumbBottommargin ?>px;
}


And you're good to go.

By the way do you know that in your template folder you only need to include the files you actually modified, all the other will be loaded from the normal block folder. For instance, if you didn't modify them you probably don't need to include all the js files.
arlenesey replied on at Permalink Reply
arlenesey
Thanks! That worked perfectly!
mnakalay replied on at Permalink Reply
mnakalay
Glad I could help.

If you had the time, I would appreciate a review of the add-on.
You can do that easily herehttp://www.concrete5.org/marketplace/addons/touch-gallery/reviews...

Thank you
arlenesey replied on at Permalink Reply
arlenesey
Hi Nour
The float left doesn't seem to be "sticking"
When I sign out, and refresh a few times, the centered layout returns.
I tried coding directly into the add-on instead of the template - same problem.
Is there something interfering - may the centered text on thumbnails?
mnakalay replied on at Permalink Reply
mnakalay
Hi,
I tried what you said, signed out and refreshed 20 times and didn't experience the same situation.

Could you give me more details, what settings are you using?

Ideally if the site was live, an address would be really helpful.

Otherwise if you could send me a copy of the template you're using, that would be helpful too.
arlenesey replied on at Permalink Reply 1 Attachment
arlenesey
Well this is embarrassing...

Curiously enough, I "reapplied" the template, and it is working again. maybe there was a caching problem. I also attached a copy of my template. It could be that I took the styling a step too far.

The site is in development, but here is the temporary address for the page with touch gallery:

http://www.stagingseydoux2.ch/index.php/fotografie/landschaft/horiz...

I have now tested it on Mac: Chrome, Safari Opera and Firefox, and in Windows IE, Chrome and Firefox. All showed float left. (good!)

Thanks for your patience - I will keep an eye on it and see if the problem comes back, but it seems to be good now.
mnakalay replied on at Permalink Reply
mnakalay
I don't know if this is related or not but I have the feeling you have updated the add-on after creating the template and didn't update the template files. Am I correct?
mnakalay replied on at Permalink Reply
mnakalay
scratch the last comment.

I think I know what the problem is.

The way you wrote your template is very different from what I actually sent you. At the moment it is working because it is using a version from the cache that you set when you were logged in and after going in edit mode. If you empty your cache again, it will not work anymore.

In the view.php, where you have added the "float: left" bit, that piece of css is only used when in edit mode.

It is there because normally that bit of css is added in the header of the page from the controller but then if you edit, the css in the head is not refreshed until you save so you get weird results.

So now what is happening with your template is that the css from the view is still present although it shouldn't because it is saved in the cache. As soon as you will clean your cache it will stop working.

You should not do it that way, you should do it the way I showed you in the file I sent.
In your template folder, just replace your whole view.php content with the content from the file I sent you.
arlenesey replied on at Permalink Reply 1 Attachment
arlenesey
Okay - NOW I understand what I did wrong.

What I didn't get, was that I could add view.php and my changed images and css to your block template.

I have included a copy of "my" template folder, including your php and my changes. It also includes the "float: left" you suggested above for view.php. If for some reason I don't need that in view.php anymore, then let me know.

Thank you
mnakalay replied on at Permalink Reply 1 Attachment
mnakalay
It's almost correct but not quite.

When you create a template you have 2 scenarios:

1- You only need to make some changes in the view file view.php
In that case, inside the folder templates you create a file "your_template_name.php" and inside that you put your new code

2- What you are trying to do now: You need to change more than just the view.php. You also need to modify the css, or the images, or some javascript loade by the view... In your case, you made some modifications to the css file, to the navigation icons, and to the view.php (float: left)
In this case, inside the folder templates you create a folder "your_template_name" and inside that folder you bring the files you need to modify and organize them the way they were originally. So you will have a file view.php, 2 folders images and css and your new files inside those.
Any file you didn't modify from the original, you don't need in the template, it will just be loaded from the original location. Any file you have modified from the original needs to be in this new template folder.

I am sending you a fully working template with your modifications, let me know how it works.

And if you don't mind me insisting, I'd be grateful if you had the time for a review on the add-on's page.

Good luck
arlenesey replied on at Permalink Reply
arlenesey
Works perfectly.

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.