[Pro] WebYep gallery in backdraft

I’ve set up a WebYep gallery in Backdraft using the multiple instances of WebYep image element (as I know that I can’t just use the gallery element, with it not being responsive). It all works great and along with a text element is part of a loop.

I’ve set the gallery up to contain just 5 images (which is fine for my purposes). My question is this - With 5 images it all looks centred and elements shift as expected; however if have less images, say 4, then when it shifts the empty image elements still take up space giving a large gap at the bottom of the loop. Is there a way to ‘hide’ empty elements?

Thanks in advance

Steve

http://94.136.40.103/~cheaper-school-prospectus.co.uk/amore/amoreproducts.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve set the gallery up to contain just 5 images

Looking at this on my iPhone I see 4 images then a block of text and then 5 more.

When I click on an image the lightbox Gallery appears which has all 9 images in it.

I am not sure that this is the intended effect!?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I see 4 images then a block of text and then 5 more

That should read

I see 5 images then a block of text and then 4 more


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes - I’ve done 1st block with all 5 images then a block where I’ve just uploaded 4 images so the you can see what I mean. If you look at the 2nd block of images you can see there is a big gap under the last one where the 5th image would be.

Hope that makes sense.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Steve,

There are a few methods that I can think of which should work.

First, try this:

  1. In Freeway, select one of the WebYep items.

  2. Do this:

  3. Rinse and repeat for the remaining webyep elements.

Theoretically, this should allow empty elements to collapse. Give that a shot and let me know if it worked.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Caleb,

That doesn’t work im afraid. It just shrinks all the images.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Steve, would it work for the number of images to be hard-set? For example, could you just remove the last WebYep image - or do you need the number of images to be flexible?

If the latter, unless somebody knows something I don’t, it’s time to turn to the power of JavaScript. I’d be happy to try and whack something together for you, but be warned, I’m a novice when it comes to JS.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You should be able to hide the empty image gallery element by using CSS;
http://www.freewayactions.com/test/amore.html

<style type="text/css">
<!--
#item11_m p span:empty {
	display:none;
}
-->
</style>

Add to your Freeway page(s) using Page > HTML Markup > Before . This isn’t going to be bullet proof as IE 8 and below don’t understand the :empty pseudo class. A better solution would be to stop Freeway creating the empty element in the first place.

Steve, you could do with looking at the styles you’ve used on this page as you’ve duplicate IDs which will invalidate the code.

Caleb, did you get my email I sent last week with your PHP file?
Regards,
Tim.

On 20 Jul 2014, at 05:17, Caleb Grove wrote:

If the latter, unless somebody knows something I don’t, it’s time to turn to the power of JavaScript.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim,

Wow, I learn something every day. No clue that :empty even existed in the CSS spec.

Also, no, I have not received the email with the PHP file. Could you resend it please? Eager to get my hands on it. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim,

That’s great - exactly what I wanted.

Though not quite sure what I need to do re: looking at the styles. I have gone through my document and renamed items that were #item3 etc… but not sure if that’s what you meant? Sorry if I’m being a bit dim - still learning.

And thanks too Caleb, for your help…yet again!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Steve,
Essentially what you need to do is to copy and paste the following code into the head of your page using Page > Insert HTML > Before ;

<style type="text/css">
<!--
#item11_m p span:empty {
	display:none;
}
-->
</style>

The key here is the bit that starts #item11_m. This is the element that WebYep is using as the thumbnail row. I took the name from the Amore example source code but if your page has been changed then this ID may now be different. If you can’t locate the correct ID then post your page online and send an email with the URL and I’ll take a look.
Regards,
Tim.

On 22 Jul 2014, at 16:47, Steve wrote:

Though not quite sure what I need to do re: looking at the styles. I have gone through my document and renamed items that were #item3 etc… but not sure if that’s what you meant? Sorry if I’m being a bit dim - still learning.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Tim,
Ok, looks like I did understand ; thanks for the clarification though.
Cheers
Steve


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options