Increase the maximum height of journal photos

DavidJRoberts · October 21, 2013

Hi,

The Journal Gallery makes the height of an image fit to the height of my screen. While this is good for the lightbox view, I would like the image to be displayed at its full height in the journal view. You'll have to scroll on most screens to see the entire image but that's OK.

You can see the effects here: http://djr-io.smugmug.com/Design/CloudHarmony and some of my other design galleries. The long screen shot images that become quite skinny should be 100% width and quite tall. These images were on behance.com pro site where it fitted everything to the width and let the height be whatever it needed to be.

It doesn't affect my photo galleries but since I make all my money as a designer, I'd love for those design galleries to look right.

I can recut the images if need be but I line of code sounds better.

Cheers for any help. Really appreciate it.

thenickdude · October 21, 2013

Try adding this CSS to a CSS block on that gallery page (don't forget to click the link at the top right to 'make the gallery custom' if you haven't already):

.sm-gallery-content .sm-tiles-vertical .sm-tile-photo {
	width:100% !important;
}

However, the tallest SmugMug display size is X3 large, which is only 1200 pixels tall. If your photos are at an aspect ratio of 2:3, that would give you a photo width on the page of just 800 pixels. If your photos are even skinnier, they'll get scaled even more, and the text won't be sharp. I don't think that the Journal style tries using your Original size images.

To do what you want to do, you'll need to use an HTML block on a custom page instead of using a gallery. Then you can add <img> tags which use your Original size graphics. You lose the Lightbox feature that appears when you click on a photo if you do this, though.

Starting with SmugMug's generated HTML, and removing all the clickable elements (<a> and the image info bar, as they won't work any more), then changing the image URLs to Original size, I get this HTML for that gallery:

<div id="sm-gallery" class="sm-gallery sm-gallery-journal">
	<div class="sm-gallery-content sm-gallery-image-o sm-gallery-mobile">
		<div class="sm-gallery-header sm-gallery-header-has-description">
			<p class="sm-gallery-description">A very comprehensive redesign from the ground up in terms of branding, user interface and everything in-between. Everything you see here (except the CloudHarmony cloud logo) our design. Even the D3 data visualizations! I can&#8217;t wait for all of his services to go live. It&#8217;s going to change the way anyone analyses cloud services again. I say we because though the client is not a designer, it was truly a team effort to get this far. His deep knowledge of his customer and industry and my design perspective anad experience brought us here. The cool thing is that this isn&#8217;t atypical of my client relationships. We work as a unit to get the best results.</p>
		</div>
		<div class="sm-gallery-images">
			<div class="sm-gallery-nav sm-gallery-nav-top"></div>
			<div class="sm-gallery-tiles-container">
				<div class="sm-tiles-vertical sm-tiles-center-image sm-tiles-info-after sm-tiles-uncropped sm-tiles-fit sm-tiles">
					<ul class="sm-tiles-list">
						<li style="width: 100%;" class="sm-tile-wrapper sm-tile-photo ">
							<div class="sm-tile sm-tile-content">
								<img src="http://djr-io.smugmug.com/Design/CloudHarmony/i-cnkK5wS/0/O/david_j_roberts-design-cloudharmony-service_logos-O.jpg" class="sm-image sm-tile-portrait" alt="" title="">
							</div>
						</li>
						<li style="width: 100%" class="sm-tile-wrapper sm-tile-photo ">
							<div class="sm-tile sm-tile-content">
								<img src="http://djr-io.smugmug.com/Design/CloudHarmony/i-F58rp5X/0/O/david_j_roberts-design-cloudharmony-cloudscores-website-01-O.jpg" class="sm-image" alt="" title="">
							</div>
						</li>
						<li style="width: 100%;" class="sm-tile-wrapper sm-tile-photo ">
							<div class="sm-tile sm-tile-content">
								<img src="http://djr-io.smugmug.com/Design/CloudHarmony/i-Vc2RnSt/0/O/david_j_roberts-design-cloudharmony-cloudscores-results-network-O.jpg" class="sm-image sm-tile-portrait" alt="" title="">
							</div>
						</li>
						<li style="width: 100%;" class="sm-tile-wrapper sm-tile-photo ">
							<div class="sm-tile sm-tile-content">
								<img src="http://djr-io.smugmug.com/Design/CloudHarmony/i-mJShrqc/0/O/david_j_roberts-design-cloudharmony-cloudscores-results-compute-O.jpg" class="sm-image sm-tile-portrait" alt="" title="">
							</div>
						</li>
						<li style="width: 100%;" class="sm-tile-wrapper sm-tile-photo ">
							<div class="sm-tile sm-tile-content">
								<img src="http://djr-io.smugmug.com/Design/CloudHarmony/i-G6ZFJhb/0/O/david_j_roberts-design-cloudharmony-cloudscores-results-popups-O.jpg" class="sm-image sm-tile-portrait" alt="" title="">
							</div>
						</li>
						<li style="width: 100%;" class="sm-tile-wrapper sm-tile-photo ">
							<div class="sm-tile sm-tile-content">
								<img src="http://djr-io.smugmug.com/Design/CloudHarmony/i-MF4nXcS/0/O/david_j_roberts-design-cloudharmony-cloudreports-dns_report-2-O.jpg" class="sm-image sm-tile-portrait" alt="" title="">
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="sm-gallery-nav sm-gallery-nav-bottom"></div>
		</div>
		<div class="sm-gallery-footer"></div>
	</div>
</div>

Which looks like:

http://www.sherlockphotography.org/Test/n-C9s7M

DavidJRoberts · October 22, 2013

THank you
Thanks so much.

Here's a simple / dumb follow-up... (sorry):

How did you pull that HTML from the page? I looked at the page source and saw where your first line started but it jumbled up soon after that.

Once I smarten up, I presume my process will be to create the gallery, pull the HTML, modify it then create a new page with this new html in it?

I may be way off so I'm open to being schooled! However, it may just be easier for me to reslice these images into smaller portions and redo the galleries that have tall images. There are only a few.

Appreciate your time, thank you.

thenickdude · October 22, 2013

Yeah, so in Chrome, right click on one of the photos in that gallery and click Inspect Element. In the pane that pops up, look above the highlighted line until you find a line starting '<div id="gallery"', right click on that line and click Copy as HTML. Go here and paste the HTML in:

http://ctrlq.org/beautifier/

Click the Format Code button so it tidies up the format for you. Now remove all of these divs and their contents: "<div class="sm-tile-info">" (that's the button bar at the bottom of the photos). Find all the image links like "<a href="#" class="sm-tile-content" data-clientid="sm-galleryimage-model_25">" and remove them and their closing tags "</a>", but keep their contents. Wherever it says "<div class="sm-tile"", after the "sm-tile", add a space and then "sm-tile-content" to make "<div class="sm-tile sm-tile-content"". Wherever it says "width: x%", change the percentage to 100%. Edit the URLs for your images to change the image size to O.

It'll probably be easier to split up those images like you say

.

DavidJRoberts · October 22, 2013

Thanks again. I did go ahead and split up some of those images since they're in my design portfolio and not for sale anyway.

Hopefully your input will help someone else and if I ever want this effect again I'll know what to do.

Seriously, thanks!

David.

Increase the maximum height of journal photos

Comments