Web Block (Gallery) Question 2

[Chris M]

I don't have constant access to Pro+, so apologies if I don't respond as quickly as I would like.

My questions are regarding making a simple image gallery using web blocks. I've attached 2 rows for anyone who wishes to play around with my queries.

Select any individual image and give it a pop-up width (Web Properties > Image (tab)) and the whole row will work as expected...but...there's now a border around the web block. Remove the pop-up option and the border goes away.


I know the whole idea is to have an automatic variant, which is great, but what if I want to add a block to one variant and not the other?


I copy and paste a web block in the Main variant. It pops to the bottom like the good little web block it is. It also creates his twin brother in the Mobile variant. I right-click the twin and go to Website Variants, thinking to Stop Sharing and then delete. Oh no, the twins are Siamese twins and cannot be separated!

Any idea how to remove the border created when the pop-up image option is selected?
Any ideas on how to separate the variants in the rare case someone would want to?

>>> TG Web Block Gallery.xar <<<

[Acorn]

@Chris, no guarantee that I have a solution.

I had to remove all pop-ups and then I applied pop-up image to the WB and then removed it again.
Eventually I got all borders removed.

When I added pop-up image to individual pictures, no border appeared.
I can but guess you hammered the design so much it got confused.

On the Mobile view, I dragged all the pictures off-page (ghosted them too), deleted the empty FlexGroup and make the remaining BlockBackground 1px high.
This remains the Main WB pictures and all WBs could be repositioned as normal.

Acorn

[Chris M]

@Acorn, On the pop-ups part.
I followed your steps and played around with different sequences of event and options. I can now replicate the problem at will.

You are spot on, the borders appear when the web block itself is given a pop-up size, even if the tick to pop-up isn't selected. It was your sentence, "I applied pop-up image to the WB and then removed it again." that is the key.

I can multiple select (shift click), but not marquee select. I can also have different pop-up sizes for individual images in the same row. In theory, each image could have a different pop-up size.
IF the border appears, it's simple a case of selecting the web block(s) and removing the pop-up photo tick, or adding it and removing it, if it's deselected.

Now I've played with them, I use the blank web block, drop my images onto the page, make them a unified height, then drag them onto the web block.
Quick and easy (now I get it a bit more). Preferable to the Smart Photo Grids as the pop-up is relative to the image, and not the centre of the grid itself, which renders the concept unacceptable with more than a few rows.

Moving on to follow your opinions on the mobile variant issue.

As always, your willingness to help is most appreciated.

[Egg Bramhill]

I've not used web blocks so I was interested in your attached xar Chris. Nothing to do with your observations but one of my own.

When published the blocks have white lines around them which are further altered in the mobile variant. How would you avoid these?

[Acorn]

I've not used web blocks so I was interested in your attached xar Chris. Nothing to do with your observations but one of my own.
When published the blocks have white lines around them which are further altered in the mobile variant. How would you avoid these?

Egg, that's what we've sorted.

TG Web Block Gallery (Acorned).xar

Acorn

[Chris M]

I've not used web blocks so I was interested in your attached xar Chris. Nothing to do with your observations but one of my own.

When published the blocks have white lines around them which are further altered in the mobile variant. How would you avoid these?

The borders are caused by clicking the web block itself (green bar on the left) and then adding a pop-up - Utilities > Web Properties > Image (tab) > Pop-Up Photo. Selecting the web block and removing the tick, or adding a tick and then removing it, makes the borders disappear.

[Acorn]

The borders are caused by clicking the web block itself (green bar on the left) and then adding a pop-up - Utilities > Web Properties > Image (tab) > Pop-Up Photo. Selecting the web block and removing the tick, or adding a tick and then removing it, makes the borders disappear.

Chris, as you broke it, I'll leave it to you to advise Xara.

Acorn

[bwood]

I know the whole idea is to have an automatic variant, which is great, but what if I want to add a block to one variant and not the other?

Any idea how to remove the border created when the pop-up image option is selected?
Any ideas on how to separate the variants in the rare case someone would want to?

>>> TG Web Block Gallery.xar <<<

Actually very good questions Chris. I often have a longer text area, fine for a laptop, but a killer on a phone. I haven’t played with them long enough to answer the question. I got so far into a design, then stopped because I ran out of the ready made blocks I could choose from. Now they are flexible I can change the height of a block.

Obviously the “this variant only” option is not part of that. If not it’s a great suggestion.

W