Displaying a photographic portfolio

User 2793720 Photo


Registered User
66 posts

Okay this topic started out, by hijacking, a thread on components so now I'll create it's own home. And like all things rather than looking at the technicalities of an implementation (apparently I'd picked an overly complex gallery component) I'll state the aim.

I'm doing a website in which I want to display a set of images, a portfolio of image types per page but each page will effectively be a clone of the previous. Images wise it's not meant to be comprehensive so probably around 6-10 images. I'd like to have a title and perhaps a short sentence for each image (as an option). What would be your ideas on how to display this sort of information?
User 379556 Photo


Registered User
1,230 posts

There is an item that may match what is wanted at https://mock-up.coffeecup.com/ma-comps/ … llery.html .

Frank
User 2699991 Photo


Registered User
3,656 posts
Online Now

Also check out some of the components in the resources library. The cards ones for example can easily be adapted and styled to get something looking like you might be thinking of

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2793720 Photo


Registered User
66 posts

I've tried a few components so far but whilst I seem to be able to get them to render fine for a laptop browser (Edge, Chrome & Firefox) none have looked right on my apple devices (Safari) often just stacking the photos one under another - which leads me to think I might have to do something a little more basic...
User 122279 Photo


Senior Advisor
13,696 posts
Online Now

I'm always testing my stuff on my iPhone in Safari. On my site, which Frank mentioned, the Masonry gallery is showing two images beside each other (in landscape orientation 3 imgs are showing). If you try the Lightbox gallery, you will have a single row of images in Portrait orientation, but all three in landscape. If you see anything other than that, you may have to clear the cache.
It's the way that responsive website design works, instead of squeezing a full, 'desktop sized' web page into oblivion and have everything too small to be seen properly, the page elements will be reorganized to fit the screen size it is being displayed on, and that means that you will see less at the same time, so you need to scroll.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,656 posts
Online Now

Steve Sharkey wrote:
I've tried a few components so far but whilst I seem to be able to get them to render fine for a laptop browser (Edge, Chrome & Firefox) none have looked right on my apple devices (Safari) often just stacking the photos one under another - which leads me to think I might have to do something a little more basic...


Hi again
I don't have an apple thingy (except for the one you are supposed to eat a day)

So I don't know if the component cards have the same choices
I have just made a short example of using one of the card components
selecting one restyling it etc
it's on the way to youtube now will post a link when it's up (about 15 minutes all being well)

If you have that one in your components library, try it see if it works if not then you cant :lol:

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,656 posts
Online Now

Here it is

https://youtu.be/tWA4rU2yfZ0


The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,656 posts
Online Now

here is another using the same card component with some extra styling going on and a lightbox type of effect.

https://youtu.be/fiOlHB0NFzo

and here is yet another one same styling as the previous but this time just using a normal container with nested containers holding the image and text etc
https://youtu.be/tqqeNUutIjQ


The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2793720 Photo


Registered User
66 posts

Inger wrote:
I'm always testing my stuff on my iPhone in Safari.


So it's probably something I've done because it was definitely showing strangely on the safari browser but fine on all browsers on my laptop. I'm not doubting in any way that it is something I have done! Generally when I use something I like to have, at least, a basic understanding of what I am using - in this case I'm just trying to place stuff on a page and change the images - if it looks right to me I'll "adopt" that component/way of doing things then invest time to understand the nuts & bolts of it.

I'll see if it's still there on my test site and post a link... My trouble with the sombre component was that it was showing bits of my image and I wanted it to shrink the image (without distorting it) to fit the display space. Also I believe the thumbnails displayed over the top of the main image which wasn't my intention. Once again it may have been something I've done BUT components come as is and do not include (unless I'm missing something) instructions on what you should size your images to and how to replace the built in ones with your own. I could cheat by inspecting those that come with the component, sizing mine the same, then rename mine to be the same as those that came with the component - but like I said I don't like using something I don't have (at least) a basic understanding of/
User 2793720 Photo


Registered User
66 posts

Wayan Jaya wrote:
here is another using the same card component with some extra styling going on and a lightbox type of effect.

https://youtu.be/fiOlHB0NFzo

and here is yet another one same styling as the previous but this time just using a normal container with nested containers holding the image and text etc
https://youtu.be/tqqeNUutIjQ



Nice (though watch listen & learn with Wayan.... I'm listening...)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.