Photo description on the right in Journal style ?

SergeBerrardVisuals · October 31, 2013

Using the "Journal style", do you know a way/trick in order to display the photos descriptions on the right of each photo vs below ?
For example, it would be more pleasant and easier to read in this gallery : http://kbhfprod.smugmug.com/Workflow/20130807-Manila-Vice/n-MxSzL
Thanks in advance for your support,
Serge

Allen · October 31, 2013

In the legacy site there was the journal (old) style for these type of displays. But Smugmug decided
that we don't need that type of style anymore and I'm guessing because it doesn't have the new
prettiness that THEY want. Crap on anyone that wants to tell a story by having the text beside the photo.
The new style requires scrolling down to read the text or hovering to overlay the hard to read text over
the photo.

SergeBerrardVisuals · October 31, 2013

Allen wrote: »

In the legacy site there was the journal (old) style for these type of displays. But Smugmug decided
that we don't need that type of style anymore and I'm guessing because it doesn't have the new
prettiness that THEY want. Crap on anyone that wants to tell a story by having the text beside the photo.
The new style requires scrolling down to read the text or hovering to overlay the hard to read text over
the photo.

Thank you Allen, unfortunatly you are right.

ChancyRat · October 31, 2013

I have not explored this yet, so I just did a quick test page. I think SM will be releasing updates over time and I hope changing the journal style is one of them. In the meantime - and I realize this is harder work than just choosing a gallery style, but if you want to achieve something like this.... I put Gallery, Photo, and Text blocks in a test gallery (not page, gallery).

I know, I know, it's work. I know.

pmbpro · November 1, 2013

Yeah I did a similar thing on my "About" page, using text blocks and moving them.

If you scroll down below my bio, I have a few pics there with just a a bit of text next to each photo. This was how I had it in the old legacy Smugmug. The images can be clicked as well, to take the viewer to their respective galleries.

http://www.pmbimages.com/About

denisegoldberg · November 1, 2013

ChancyRat wrote: »

I think SM will be releasing updates over time and I hope changing the journal style is one of them.

Don't hold your breath on this one, especially given that Journal (Old) was put to the side a couple of years ago and was no longer considered one of the styles that would move forward.

I actually think there is a plus to doing this as a page given that you can specify the click to location where in a Journal (Old) gallery the click goes to Lightbox.

--- Denise

Allen · November 1, 2013

If the page content is created for many photos this would be very time consuming. Plus you'd lose pagination.
I have a bunch of travel logs to create for a friend. Each trip has a carousel of slides with his note cards
describing each slide. He used these for group presentations.

SergeBerrardVisuals · November 1, 2013

Thank you all for your attempts to help.
Unfortunatly only Allen is right, none solution works.

Creating a page or something else with text blocks on the right of each photo, means creating manually 100 blocks for a gallery with 50 photos (repeating 1 image block + 1 text block 50 times) plus an unlisted gallery somewhere...

Not only it's time consuming but it does not work because the text blocks are not interdependent with photos.
Indeed, depending on the size and geometry of the visitors' browsers, you can get a correct result or a true joke, text blocks progressively pushing down the text blocks below. Quickly the texts will not match with the photos and at the end of the photos serie you will have several text blocks isolated and meaning nothing.
2 snapshots here : http://kbhfprod.smugmug.com/Tests/Snapshots/n-VM8F5

denisegoldberg · November 1, 2013

KB&HF Prod. wrote: »

Creating a page or something else with text blocks on the right of each photo, means creating manually 100 blocks for a gallery with 50 photos (repeating 1 image block + 1 text block 50 times) plus an unlisted gallery somewhere...

You're right, building something like this as a page really isn't a good solution - but depending on the volume of text it might be the only reasonable option.

I was down to a single Journal(Old) gallery on my legacy site. I thought about building a page for it but I decided to leave it as a Journal style gallery. Each photo has a fairly simple block of text as the caption; I think the side-by-side nature of Journal(Old) was better but for now it's set.

--- Denise

Allen · November 1, 2013

KB&HF Prod. wrote: »

Thank you all for your attempts to help.
Unfortunatly only Allen is right, none solution works.

Creating a page or something else with text blocks on the right of each photo, means creating manually 100 blocks for a gallery with 50 photos (repeating 1 image block + 1 text block 50 times) plus an unlisted gallery somewhere...

Not only it's time consuming but it does not work because the text blocks are not interdependent with photos.
Indeed, depending on the size and geometry of the visitors' browsers, you can get a correct result or a true joke, text blocks progressively pushing down the text blocks below. Quickly the texts will not match with the photos and at the end of the photos serie you will have several text blocks isolated and meaning nothing.
2 snapshots here : http://kbhfprod.smugmug.com/Tests/Snapshots/n-VM8F5

Looks like you did not set the widths of the boxes. BTW, I do not use text boxes but always html
boxes. I will probably create my own pagination using more pages.

Here's a screen shot of staggered photo/html blocks. Rows of boxes stay together.

SergeBerrardVisuals · November 1, 2013

denisegoldberg wrote: »

You're right, building something like this as a page really isn't a good solution - but depending on the volume of text it might be the only reasonable option.

I was down to a single Journal(Old) gallery on my legacy site. I thought about building a page for it but I decided to leave it as a Journal style gallery. Each photo has a fairly simple block of text as the caption; I think the side-by-side nature of Journal(Old) was better but for now it's set.

--- Denise

thank you Denise, it's also my decision to use the Journal style, trying to get a better presentation for texts being not so simple.

denisegoldberg · November 1, 2013

KB&HF Prod. wrote: »

thank you Denise, it's also my decision to use the Journal style, trying to get a better presentation for texts being not so simple.

I don't know if it would help to look at another gallery, maybe for some ideas. This is my travel stories gallery, used to be Journal(Old), now Journal - http://www.denisegoldberg.com/Travel-stories/Wandering-assisted-by-2-feet.

--- Denise

SergeBerrardVisuals · November 1, 2013

Allen wrote: »

Looks like you did not set the widths of the boxes. BTW, I do not use text boxes but always html
boxes. I will probably create my own pagination using more pages.

Here's a screen shot of staggered photo/html blocks. Rows of boxes stay together.

well done Allen as usual.
you're right, using html blocks vs text blocks is a reflex to keep in mind in the future.
if I understand, with a lot of work now, you finally have something similar to the old journal style, but, with also its limitations, ie photos sizes are limited/not fitting frame...

because SM is not stupid, I guess that HTML5 language is poor, not offering the possibility for a photo to indicate the text position ie above/below/on the right/on the left.

Allen · November 1, 2013

KB&HF Prod. wrote: »

well done Allen as usual.
you're right, using html blocks vs text blocks is a reflex to keep in mind in the future.
if I understand, with a lot of work now, you finally have something similar to the old journal style, but, with also its limitations, ie photos sizes are limited/not fitting frame...

because SM is not stupid, I guess that HTML5 language is poor, not offering the possibility for a photo to indicate the text position ie above/below/on the right/on the left.

I can set the photo to any size I want ... and I added the frames the way I wanted.

SergeBerrardVisuals · November 1, 2013

denisegoldberg wrote: »

I don't know if it would help to look at another gallery, maybe for some ideas. This is my travel stories gallery, used to be Journal(Old), now Journal - http://www.denisegoldberg.com/Travel-stories/Wandering-assisted-by-2-feet.

--- Denise

yes it helps, thank you.
indeed, I find that adding empty raws in your legends makes things clear.

of course, as me, you noticed that each line of text is shorter than the photo width, obliging to scroll more... I guess that SM implemented that for the needs of the Smugmug Style, end so it's not optimized for the Journal style... too bad again.

SergeBerrardVisuals · November 1, 2013

for fun, another way to get a nice result is the first photo of my tests gallery here : http://kbhfprod.smugmug.com/Tests/20130807-Manila-Vice-RESIZED/n-Z7gQ4
I've created an "empty photo" in 16/9 format with a black background, then added above my photo on the left and my text on the black part on the right...

for me the result is clean, the design not random ^^, but the time to spend not free...

thenickdude · November 1, 2013

Try adding this CSS to a Journal style gallery:

.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-content,
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
	display: inline-block;
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
	padding: 0 .5em 1.2em 1.2em;
}

Unfortunately, the images will end up only half as tall as they could be due to SmugMug's auto-resize-to-fit-screen-height. You can force them to display at a particular width, although it may cause them to be taller than the screen for short screens, for example:

.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-wrapper {
	width: 75% !important;
}

SergeBerrardVisuals · November 2, 2013

Lamah wrote: »
Try adding this CSS to a Journal style gallery:
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-content {
    display: inline-block;
    width: 50%;
}
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
    display: inline-block;
    width: 50%;
    padding: 0 .5em 1.2em 1.2em;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Unfortunately, the images will end up only half as tall as they could be due to SmugMug's auto-resize-to-fit-screen-height. You can force them to display at a particular width, although it may cause them to be taller than the screen for short screens, for example:
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-wrapper {
    width: 75% !important;
}

Thank you very much Lamah, I appreciate your help as many people here.

Your code will interest other dgrinners for sure, from my side I've already published my gallery using the standard tools finally, the result being not so bad I think : http://www.sergeberrardvisuals.com/Galleries/ArtSpace/Manila-Vice

Regarding customization, I've learnt the lesson...

wasting my time as tons of people here, adding music everywhere on my site, using a lot of CSS code, javaScript, homepage slideshow, etc, etc... while Smugmug (you know these guys who say that we are part of their family ^^) knew perfectly since one or two years that we all were loosing our time and energy customizing our sites for nothing at the end....

So now, having learnt and hold the lesson, customization, for me, simply means switching to another family ^^ if I'm not happy.
These days, host families are numerous on the net...

Thanks again,
Serge

thenickdude · November 2, 2013

KB&HF Prod. wrote: »

From my side I've already published my gallery using the standard tools finally, the result being not so bad I think : http://www.sergeberrardvisuals.com/Galleries/ArtSpace/Manila-Vice

Have you maybe not hit Publish Now yet? That still looks like a standard Journal gallery to me at the moment:

If I add my CSS to it, it looks like this, which I think is a pretty nice rendering:

The images can be tuned to take up more space than that, too:

Allen · November 2, 2013

Added the CSS and the tools are not clickable. Tried adding z-index but didn't work. Only the logged in buy button is active.

Also had to add a couple breaks to get caption below tools.

thenickdude · November 2, 2013

Odd, everything continues to work fine for me on KB&HF's site. Do you maybe have some CSS in place that is preventing the photo title from wrapping (allowing it to eclipse the photo tools)?

You can move the caption down below the tools by adding something like:

.sm-tile-info p:first-of-type {
	margin-top:20px !important;
}

Allen · November 2, 2013

I don't use titles only captions. Only d/l is clickable and the active spot is very small at the right end of download.

thenickdude · November 2, 2013

Try out the CSS I edited into my previous post (I think you had already started replying by the time I posted it). Since it moves down the caption, it might clear the buttons.

Allen · November 2, 2013

Up to 60px top and the 1st photo just barely have links at the top edge of the tools. 2nd photo no active spot.

Running out for the day, be back tonight.

Allen · November 2, 2013

The caption, whatever width is, covers the icons. Why some are not clickable.

rich56k · November 2, 2013

Lamah wrote: »
Try adding this CSS to a Journal style gallery:
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-content {
	display: inline-block;
	width: 50%;
}
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
	display: inline-block;
	width: 50%;
	padding: 0 .5em 1.2em 1.2em;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
Unfortunately, the images will end up only half as tall as they could be due to SmugMug's auto-resize-to-fit-screen-height. You can force them to display at a particular width, although it may cause them to be taller than the screen for short screens, for example:
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-wrapper {
	width: 75% !important;
}

I added the CSS as shown and it reduces the size but still stacks image/text. How to move the text to the right side?

Even more strange is that the attached is visible in preview but as soon as I publish it reverts to the original (crappy) journal style with full size image above text.

Any suggestions?

rich56k · November 3, 2013

rich56k wrote: »

I added the CSS as shown and it reduces the size but still stacks image/text. How to move the text to the right side?

Even more strange is that the attached is visible in preview but as soon as I publish it reverts to the original (crappy) journal style with full size image above text.

Any suggestions?

UPDATE: OK so I went back into this gallery and when I went from 'customize' to 'done' to 'publish now'
bypassing the 'preview' stage the change(s) stayed...so now they're on the page live. Repeated and still OK so I must have messed up the earlier attempt ??!!

Now I'm back to the original issue...can the text be moved from under the image to the next to the image ?

Ideally to alternate (as in the original 'old journal') pic left/text right; text left/pic right; pic left/text right; text left/pic right; etc. but at this point just getting the text next to the pic would be a huge help!

Thanks
rich56k

Allen · November 3, 2013

See what turning on stretchy to "on" under the layout tab does. I had a problem with a static width
set and the two div's not fitting in the width.

rich56k · November 3, 2013

Allen wrote: »

See what turning on stretchy to "on" under the layout tab does. I had a problem with a static width
set and the two div's not fitting in the width.

I just checked and 'stretchy' was already turned on. I switched to 'fixed' and no difference. Width has been set at '960', along with body width also. Fill height 'off', centered 'off' ; top, side and bottom margins 'o'

None of these others made any difference except width - changes here result in text width changes and an error in body width (if width is set to less than 960). Hmmmmm....

thenickdude · November 3, 2013

rich56k wrote: »

UPDATE: OK so I went back into this gallery and when I went from 'customize' to 'done' to 'publish now'
bypassing the 'preview' stage the change(s) stayed...so now they're on the page live. Repeated and still OK so I must have messed up the earlier attempt ??!!

Now I'm back to the original issue...can the text be moved from under the image to the next to the image ?

Ideally to alternate (as in the original 'old journal') pic left/text right; text left/pic right; pic left/text right; text left/pic right; etc. but at this point just getting the text next to the pic would be a huge help!

Thanks
rich56k

I think the borders/dropshadow around your image cause it to be a little bigger than 50%, so it ends up not fitting. That's easily fixed, though, replace it with this CSS:

.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-content,
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
	display: inline-block;
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
	padding: 0 .5em 1.2em 1.2em;
}

rich56k · November 3, 2013

Lamah wrote: »
I think the borders/dropshadow around your image cause it to be a little bigger than 50%, so it ends up not fitting. That's easily fixed, though, replace it with this CSS:
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-content,
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
	display: inline-block;
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
	padding: 0 .5em 1.2em 1.2em;
}

That did the job!

Thanks

Lamah!!

-rich56k

Photo description on the right in Journal style ?

Comments