WebSite X5Help Center

 
Dimitrios S.
Dimitrios S.
User

Thumbnails per viewport  en

Auteur : Dimitrios S.
Visité 830, Followers 1, Partagé 0  

www.moet.com .

If you see the products:

4th (mobile) viewport: it shows 1-2 products.

2nd viewport: it shows 3-4 products. 

1st viewport: it shows 5-6 products 

Is it possible to make a similar gallery "per viewport"?

The gallery options of the x5 have fixed "thumbnails per row" or "thumbnails per frame" which means for example "2 per row" works well in 4th and 3rd viewports but in 1st and 2nd viewports the thumbnails are big and take almost all screen

Thank you!

Posté le
16 RéPONSES
Aleksej H.
Aleksej H.
Moderator

Hello. If you do not see the corresponding options in the settings of the Gallery object, then there is none. Or you can try to do what you need with CSS.

Lire plus
Posté le de Aleksej H.
Dimitrios S.
Dimitrios S.
User
Auteur

Dear Aleksej

Thank you for your response.

Maybe there is a "ready gallery" in website x5 that Performa this  and I can purchase?

Best Regards.

Dimitris 

Lire plus
Posté le de Dimitrios S.
Aleksej H.
Aleksej H.
Moderator

As far as I know, there is no gallery object with the ability to specify the number of columns for different screens.
I can offer an inconvenient option. Create multiple gallery objects for different devices with different number of columns. After that you can hide certain galleries for certain devices. It's difficult and not convenient... But if you want, you can try.

Lire plus
Posté le de Aleksej H.
Dimitrios S.
Dimitrios S.
User
Auteur

Dear Aleksej.

Thank you for your reply 

It is a good idea actually to create two galleries: one for 3rd and 4th viewport and one for the 1st and 2nd.

1st and 2nd viewport gallery is relatively easy, create it and hide it in the responsive menu for the following viewports. The problem is how will I make the gallery for the 3rd and 4th viewports, invisible for the 1st and 2nd? As long as I can tell in the responsive menu there is the option only to hide for "following" viewports, not "previous" viewports.

Thank you once again.

Best Regards

Lire plus
Posté le de Dimitrios S.
Incomedia
Stefano G.
Incomedia

Hello Dimitrios

Unfortunately, no. The approach proposed by Aleksej only works if you mean to gradually remove Objects, but you can't display Objects in the smallest viewport and hide them in the biggest one

You will need to rely on each Object's ability to reorganize itself when the screen gets smaller since it is not possible to specify a set number of rows or columns in most objects

I remain available here

Stefano

Lire plus
Posté le de Stefano G.
Dimitrios S.
Dimitrios S.
User
Auteur

Dear Stefano.

Thank you for your confirmation.

A friend sent me this:

https://swiffyslider.com/examples/

scroll down until you see "going to the movies". Trending and Documentary galleries is exactly what I am looking for (1 image on the 4th viewport, 4 on the 2nd etc). I just can't see the code. 

Any help?

Thank you again

Lire plus
Posté le de Dimitrios S.
Dimitrios S.
Dimitrios S.
User
Auteur

Dear Claudio.

Thank you for your response 

Yes, this looks like pretty much what we are looking for 

Questions.

- can I turn off the automatic slide?

- can I set it for 1 logo on the 4th viewport, 2 logos on the 3rd viewport, 4 logos on the 2nd viewport and 6+ logos on the 1st viewport?

Thank you again.

Best Regards 

Lire plus
Posté le de Dimitrios S.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT
Dimitrios S.
- can I turn off the automatic slide?

yes

Dimitrios S.

- can I set it for 1 logo on the 4th viewport, 2 logos on the 3rd viewport, 4 logos on the 2nd viewport and 6+ logos on the 1st viewport?

no.
you can only specify how many images to display at the desktop resolution
then it will automatically decide how many to display at the lower resolutions

Lire plus
Posté le de Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

x Dimitrios S., ... (It > En) ... ...!.. the site you posted doesn't seem to have been made with WebSiteX5...!...
... however, as an  idea,  with WebSiteX5 you could use my personal exclusive idea which consists of:
1) ... create dune pages with the HIDDEN option and with different layouts dedicated to the reference breakpoints, and with options ▪Create the Page without the Template;
2) ... then with my EXTRA code import in the main page the HIDDEN page inside an IFRAME...
3) ... depending on the resolution detected, the IFRAME will load the related HIDDEN page always with my EXTRA code...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Dimitrios S.
Dimitrios S.
User
Auteur

it is 16 images and I want to fit screen:

1st viewport: 8 images.

2nd viewport: 5 images 

3rd viewport: 3 images 

4th viewport: 1 image.

Thank you again!

 

 

 

 

Lire plus
Posté le de Dimitrios S.
Dimitrios S.
Dimitrios S.
User
Auteur

Dear Kolasim.

Thank you for your answer.

Indeed the site I posted doesn't seem to have been made with website x5. I just liked its gallery of products and asked if website x5 can do it.

Your idea (with dune, hidden pages, imported in the main page depending on the resolution) seems a very good option. I just don't know how to do it.

I would prefer for example the "logo slider"mentioned by Claudio, as long as it works reasonably well (read previous email) so as to avoid code or very complicated structure. I have experimented in the past with more complicated structures, and many times several "errors" happened for example  not working "anchors".

Best Regards.

Dimitris

Lire plus
Posté le de Dimitrios S.
Aleksej H.
Aleksej H.
Moderator

"Unfortunately, no. The approach proposed by Aleksej only works if you mean to gradually remove Objects, but you can't display Objects in the smallest viewport and hide them in the biggest one" - I'm not sure you're right. With CSS, you can hide or show different parts of the page depending on the screen resolution.

Here is an example.

<style>
@media (max-width: 960px) {
#imObjectGallery_102_01 {
display: none;
}
}

@media (min-width: 959px) {
#imObjectGallery_102_02{
display: none;
}
}

@media (max-width: 719px) {
#imObjectGallery_102_02{
display: none;
}
}

@media (min-width: 719px) {
#imObjectGallery_102_03 {
display: none;
}
}

@media (max-width: 480px) {
#imObjectGallery_102_03 {
display: none;
}
}

@media (min-width: 480px) {
#imObjectGallery_102_04{
display: none;
}
}
</style>

Lire plus
Posté le de Aleksej H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

hi Dimitrios S., ...(It > En) ... ...you don't have to make a real site, but tests with simple and light test sites to verify the various features you want to use...
.. for example you can use the Altervista free web space, or a sub-folder of your site to export the tests...
....................................................
... for the Anchors, I can assure you that if they are used correctly and in "normal" pages set up for this purpose, there have been no problems right from the start...
... I can also tell you that for anomalous Anchors there are also my exclusive EXTRA codes that can remedy you in non-compliant pages...
....................................................
... going back to the responsive view, my previous suggestion is to lighten the heavy content page...
... if you don't care about the weight of the page, and you want to use the same object repeated in two different lines, to hide one or the other depending on the resolution, it's very simple...
... in case you can take a cue from my code that I've been suggesting for several years (v.12)...
... here for example it is two buttons that are the same but with different effects, mobile/desktop which has been adopted by some attentive userswink:
https://helpcenter.websitex5.com/fr/post/239988#comment8

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... obviously, if you give some examples, and post the LINK, you can verify and go into the details of what you could do with the codes, ... and it won't be difficult...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪