Make Gallery Act as "Single Photo or Video"

foofrog · November 5, 2012

I'm trying to create a "Contact Info" page on my site.
So far, I've created a gallery for this. In the end, I want it to be one huge image that fits within 1000 px margin.
http://isobellaandchloe.smugmug.com/ContactInfo/Contact-Info/26301903_qDmxXb
The closest thing that I could think of was to switch the gallery to Journal Old formatting, but I don't think that works either!

So, here's the question...how do i make my gallery act like a "Single Photo or Video," an option that is only available on the homepage? :dunno Do you have the code for me to copy in?

I attached an image of how I would like it to look like at the very end. Please help!!!

Allen · November 5, 2012

foofrog wrote: »

I'm trying to create a "Contact Info" page on my site.
So far, I've created a gallery for this. In the end, I want it to be one huge image that fits within 1000 px margin.
http://isobellaandchloe.smugmug.com/ContactInfo/Contact-Info/26301903_qDmxXb
The closest thing that I could think of was to switch the gallery to Journal Old formatting, but I don't think that works either!

So, here's the question...how do i make my gallery act like a "Single Photo or Video," an option that is only available on the homepage? <img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" > Do you have the code for me to copy in?

I attached an image of how I would like it to look like at the very end. Please help!!!

See if you like this.

Add this to the gallery description.

<html>
<center>
<img src="/photos/2190995153_QB34L8z-XL.jpg" />
</center>
</html>

Add this to your CSS ... Log out and look or open in another browser not logged in.

.gallery_26301903 .notLoggedIn #breadcrumb,
.gallery_26301903 .albumNav,
.gallery_26301903 .notLoggedIn .journal_entry {display:none}

foofrog · November 5, 2012

Cool!

thank you, thank you, thank you!!!

another quick question, how would i get that image centered?
and how would i remove the "gallery comments" section on the bottom?

Allen · November 5, 2012

foofrog wrote: »

thank you, thank you, thank you!!!

another quick question, how would i get that image centered?
and how would i remove the "gallery comments" section on the bottom?

Uncheck comments on the gallery settings page.

Add this to your CSS

.gallery_26301903 #journal {
    width: 1024px; 
     margin: 0 auto;
}

Allen · November 5, 2012

foofrog wrote: »

...

You are using an image and it will be frustrating for those wanting to copy anything off the page like tel no. or
email addresses. You could design it all using html so it would be all text and copyable.

foofrog · November 5, 2012

Would that be too complicated for a person like me? I'm a TOTAL NEWB at coding/programming.
Is there a link that can direct me towards that? I just have all that info on an illustrator file.

Allen · November 5, 2012

foofrog wrote: »

Would that be too complicated for a person like me? I'm a TOTAL NEWB at coding/programming.
Is there a link that can direct me towards that? I just have all that info on an illustrator file.

Here's my hack at it. This is mainly for your viewing to see how it would look. It can be tweaked
however you like.

Replace the description with this. The CSS below will hide all this for the public. You'll only see the
text version at the bottom when logged in. The text version can be easiely edited for any future
changes. I put in a spacer for the left image, (I, plane and ?), so you need to make that image and
the spacer can be changed to it.

html for gallery description. Note: I did not finish the text is some places just used dups.

<html>
<center>
<img src="/photos/2190995153_QB34L8z-XL.jpg">
</center>

<br /><br />

<div id="mainBox" class="noShow">

<div id="leftMain">
<span class="title1">CORPORATE HEADQUARTERS</span>
<br /><br />
<b>Best of Chumbs Int'l Inc.</b><br />
1068 Westminster Ave.<br />
Alhambre, CA 91803<br />
Ph: 626.457.8823<br />
Office Hours: M-F 9am-5pm<br />
<br />
<p>
<i>* All transactions require documentation, so please fax <br />
or email all orders, changes, instrustions, and issues <br />
to the specified departmanets below.</i>
</p>

<div id="vertImage" style="float:left; padding-right: 15px;">
<img src="/img/spacer.gif" width="50" height="360" border="1" alt="">
</div>

<div id="leftText">
<span class="title2">General Information</span><br /> 
<i>Email:</i> info@isobellaandchloe.com<br />
<i>Fax:</i> 626.513.8808<br />
<span style="margin-left: 30px; text-align:left;">
- View line info<br /></span>
<span style="margin-left: 30px; text-align:left;">
- Get passwords to download images<br /></span>
<span style="margin-left: 30px; text-align:left;">
- Submit orders, order changes, reorders<br /></span>
<br/>

<span class="title2">Shipments</span><br /> 
<i>Email:</i> ship@isobellaandchloe.com<br />
<i>Fax:</i> 626.249.0586<br />
<span style="margin-left: 30px; text-align:left;">
- Payment Form at Document Download Tab<br /></span>
<span style="margin-left: 30px; text-align:left;">
- Pay for and authorize orders to ship<br /></span>
<span style="margin-left: 30px; text-align:left;">
- Supply shipping instructions<br /></span>
<br />

<span class="title2">Support</span><br /> 
<i>Email:</i> support@bestofchums.com<br />
<i>Fax:</i> 323.443.3527<br />
<span style="margin-left: 30px; text-align:left;">
- RA Form at Document Download Tab<br /></span>
<span style="margin-left: 30px; text-align:left;">
- Resolve issues with shipments<br /></span>
<span style="margin-left: 30px; text-align:left;">
- Report concerns and feedback<br /></span>
</div> <!-- close leftText -->

</div> <!-- leftMain -->

<div id="rightBox">
<span class="title1">VIEW AND ORDER FROM ISOBELLA & CHOICE</span>
<br /><br />
<i>* Please set up an appointment with your regional rep to view and order out line.</i>
<br /><br />
<span class="title2">U.S. Rep Info</span> .................................................
.............................................................

<table width=600>
<tr>
<td>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
<td width=33%>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
<td>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
</tr>

<tr>
<td>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
<td width=33%>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
<td>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
</tr>

<tr>
<td>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
<td width=33%>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>

</tr>

</table>

<br />
<span class="title2">Canadian Rep Info</span>.........................................
..........................................................
<table width=600>
<tr>
<td>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
<td width=33%>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
<td>
<b>Los Angeles</b><br />
Kids Du Monde<br />
213.689.8779<br />
<span class="title3">kidsdumonde@sbcgolbal.net</span><br />
</td>
</tr>
</table>
</div> <!-- close rightBox -->

</div> <!-- close mainBox -->
<div style="clear: both;"></div>
</html>

Add to your CSS

   /*  temporary hides new text information to visitors */
.notLoggedIn .noShow {display:none;}

.gallery_26301903 #albumDescription,
.gallery_26301903 #journal {
   width: 1024px; 
   margin: 0 auto;
}

.gallery_26301903 .title1 {
   font-weight:bold !important;
   font-size: 125%;
   color: #EE1772;
}

.gallery_26301903 .title2 {
   font-weight:bold !important;
   font-size: 115%;
   color: #AD1A2A;
}

.gallery_26301903 .title3 {
   font-size: 95%;
}

.gallery_26301903 #mainBox {
   width: 1000px;
   margin: 0 auto;
}

.gallery_26301903 #leftMain {
   float:left;
   width: 420px;
   border-right: 2px dotted #000;
}

.gallery_26301903 #rightBox {
   float:right;
   width: 550px;
}

Here's a screen shot of the text.

foofrog · November 5, 2012

WOW, ALLEN!!! That's friggin NUTS! Thank you for helping me code all that for me! So unexpected and so nice!!!

rofl

And, I really hate to take up more of your time, but I tried to remove some sections that are still popping up, but I couldn't figure out! I attached a jpg that shows what i wanted removed. what should i do to get that off? hopefully, this will be the last time i bug for a while!

ETERNALLLLY GRATEFUL!!!!!!!!!!!

Allen · November 5, 2012

foofrog wrote: »

WOW, ALLEN!!! That's friggin NUTS! Thank you for helping me code all that for me! So unexpected and so nice!!! rofl

And, I really hate to take up more of your time, but I tried to remove some sections that are still popping up, but I couldn't figure out! I attached a jpg that shows what i wanted removed. what should i do to get that off? hopefully, this will be the last time i bug for a while!

ETERNALLLLY GRATEFUL!!!!!!!!!!!

You only see all that when logged in, your visitors do not. You can now go into the description and
edit the text with the correct info, mostly the Rep info.

Add these to CSS. First one hides the un-needed breadcrumb. Second hides the no photo message
everywhere. You need it logged in for the control buttons on it. BTW, when you create that image
with the (I, plane and ?) upload it to this gallery. The no-photo message will disappear and the link to
the image will replace the spacer gif in the description html. Also the gallery photos, that includes the
new image, can be hidden with additional CCS.

.gallery_26301903 .notLoggedIn #breadCrumbTrail {display:none;}

.notLoggedIn .emptyGallery {display:none;}

Go into Easy Customizer and change the link for this page from this

http://isobellaandchloe.smugmug.com/ContactInfo/Contact-Info/26301903_qDmxXb

to this. It goes to the gallery but does not display the path in the browse URL.

/gallery/26301903_qDmxXb

After you get it all perfect the old image can be removed and the new text stuff can be exposed to
the public.

foofrog · November 6, 2012

Morning, Allen! Ok, I did some more tinkering with it, and I am attaching some images, so that you can see how it's starting to look on the backend/front end of things.

I think I got everything linked up, but the JPG is still showing up.
For a while, I started removing this section to take out the jpg.

<center>
<img src="/photos/2190995153_QB34L8z-XL.jpg">
</center>

But, I suppose the main issue is that when I went live, I would only display "2190995153_QB34L8z-XL.jpg." I couldn't see the code that we put into the description area on the live site; I could only see that on the backend! I added the two codes that you advised into the css section, but I'm not sure if I did it correctly.

So, I have three remaining questions (hopefully, that's it! i really am profusely thankful and slightly abashed to keep bugging you!), so here goes:

1) do i remove the jpg by removing this:
<center>
<img src="/photos/2190995153_QB34L8z-XL.jpg">
</center>

2) why isn't the code in the description showing on the live site (after i logged out?)

3) i entered the two codes into the css section as you advised, but why do i still see the gallery page with the "I, plane, ?" on the live site?

Here's the link to the site.
http://isobellaandchloe.smugmug.com/gallery/26301903_qDmxXb

Please help! :help

Allen · November 6, 2012

foofrog wrote: »

Morning, Allen! Ok, I did some more tinkering with it, and I am attaching some images, so that you can see how it's starting to look on the backend/front end of things.

I think I got everything linked up, but the JPG is still showing up.
For a while, I started removing this section to take out the jpg.

<center>
<img src="/photos/2190995153_QB34L8z-XL.jpg">
</center>

But, I suppose the main issue is that when I went live, I would only display "2190995153_QB34L8z-XL.jpg." I couldn't see the code that we put into the description area on the live site; I could only see that on the backend! I added the two codes that you advised into the css section, but I'm not sure if I did it correctly.

So, I have three remaining questions (hopefully, that's it! i really am profusely thankful and slightly abashed to keep bugging you!), so here goes:

1) do i remove the jpg by removing this:
<center>
<img src="/photos/2190995153_QB34L8z-XL.jpg">
</center>

2) why isn't the code in the description showing on the live site (after i logged out?)

3) i entered the two codes into the css section as you advised, but why do i still see the gallery page with the "I, plane, ?" on the live site?

Here's the link to the site.
http://isobellaandchloe.smugmug.com/gallery/26301903_qDmxXb

Please help! :help

Make these changes in the description.

<html>
[COLOR=red][strike][COLOR=#bbbbbb][B]<center>
<img src="/photos/2190995153_QB34L8z-XL.jpg">
</center>[/B][/COLOR][/strike][/COLOR]
...
<div id="mainBox" [COLOR=red][strike][COLOR=#bbbbbb][B]class="noShow"[/B][/COLOR][/strike][/COLOR]>
...
<div id="vertImage" style="float:left; padding-right: 15px;">
<img src="[COLOR=Red]/photos/2199246478_MbbXp7f-L.jpg[/COLOR]" alt="" border="0" height="360" width="50">
</div>
<div id="leftText">
...

CSS changes

[COLOR=red][strike][COLOR=#bbbbbb][B]   /*  temporary hides new text information to visitors */
.notLoggedIn .noShow {display:none;}[/B][/COLOR][/strike][/COLOR]

[COLOR=red][strike][COLOR=#bbbbbb][B].gallery_26301903 .notLoggedIn #breadCrumbTrail {display:none;}[/B][/COLOR][/strike][/COLOR]
[COLOR=Red].gallery_26301903 .notLoggedIn #breadcrumb {display:none;}[/COLOR]

[COLOR=Red].gallery_26301903 #albumNav_top,
.gallery_26301903 #albumNav_bottom,
.gallery_26301903 .notLoggedIn .journal_entry,
.gallery_26301903 .notLoggedIn #breadcrumb {display:none;}[/COLOR]

Be sure to log out and look or view in another browser not logged in.

foofrog · November 6, 2012

It works PERFECTLY, Allen!!!!!
Thank you soooooo much for being so patient and helping me get this up and running! I'm ecstatic!!

THANK YOU!

Allen · November 6, 2012

foofrog wrote: »

It works PERFECTLY, Allen!!!!!
Thank you soooooo much for being so patient and helping me get this up and running! I'm ecstatic!!
THANK YOU!

Thanks, the only nit I see is the spacing of the Canadian Reps not same as those above.

foofrog · November 6, 2012

You're absolutely right!
I'm going to take a stab at it.
Is it because of this?

How would I fix it, so that it's consistent?

Allen · November 6, 2012

foofrog wrote: »

You're absolutely right!
I'm going to take a stab at it.
Is it because of this?

</td>
<td width=33%>

How would I fix it, so that it's consistent?

Try this, combined both tables into one.

<html>
<br>

<div id="mainBox">

<div id="leftMain">
<span class="title1">CORPORATE HEADQUARTERS</span>
<br><br>
<b>Best of Chums Int'l Inc.</b><br>
1068 Westminster Ave.<br>
Alhambra, CA 91803<br>
Ph: 626.457.8823<br>
Office Hours: M-F 9am-5pm<br>
<br>
<p>
<i>* All transactions require documentation, so please fax <br>
or email all orders, changes, instructions, and issues <br>
to the specified departments below.</i>
</p>

<div id="vertImage" style="float:left; padding-right: 15px;">
<img src="/photos/2199246478_MbbXp7f-L.jpg" alt="" border="0" height="360" width="50">
</div>
<div id="leftText">
<span class="title2">General Information</span><br> 
<i>Email:</i> info@isobellaandchloe.com<br>
<i>Fax:</i> 626.513.8808<br>
<span style="margin-left: 30px; text-align:left;">
- View line info<br></span>
<span style="margin-left: 30px; text-align:left;">
- Get passwords to download images<br></span>
<span style="margin-left: 30px; text-align:left;">
- Submit orders, order changes, reorders<br></span>
<br>

<span class="title2">Shipments</span><br> 
<i>Email:</i> ship@isobellaandchloe.com<br>
<i>Fax:</i> 626.249.0568<br>
<span style="margin-left: 30px; text-align:left;">
- Payment Form at Document Download Tab<br></span>
<span style="margin-left: 30px; text-align:left;">
- Pay for and authorize orders to ship<br></span>
<span style="margin-left: 30px; text-align:left;">
- Specify shipping instructions<br></span>
<br>

<span class="title2">Support</span><br> 
<i>Email:</i> support@bestofchums.com<br>
<i>Fax:</i> 323.443.3527<br>
<span style="margin-left: 30px; text-align:left;">
- RA Form at Document Download Tab<br></span>
<span style="margin-left: 30px; text-align:left;">
- Resolve issues with shipments<br></span>
<span style="margin-left: 30px; text-align:left;">
- Report concerns and feedback<br></span>
</div> <!-- close leftText -->

</div> <!-- leftMain -->

<div id="rightBox">
<span class="title1">VIEW AND ORDER FROM ISOBELLA &amp; CHLOE</span>
<br><br>
<i>* Please set up an appointment with your regional rep to view and order from our line.</i>
<br><br>

<table width="600">
<tbody>
<tr>
<th colspan=3>
<span class="title2">U.S. Rep Info</span> . . . . . . . . . . . . . . . . . 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</th>
</tr>

<tr>
<td>
<b>Los Angeles</b><br>
Kids Du Monde<br>
213.689.8779<br>
<span class="title3">kidsdumonde@sbcglobal.net</span><br><br>
</td>
<td>
<b>Pacific Northwest</b><br>
Bob Parrish<br>
925.228.5696<br>
<span class="title3">bobparrish@sbcglobal.net</span><br>
</td>
<td>
<b>Dallas</b><br>
Jennifer Rush<br>
214.747.8608<br>
<span class="title3">jrushkids@aol.com</span><br>
</td>
</tr>

<tr>
<td>
<b>Chicago</b><br>
Kathy Fedoryshyn<br>
262.781.8685<br>
<span class="title3">kathyfed@yahoo.com</span><br><br>
</td>
<td>
<b>Atlanta</b><br>
Don Perry<br>
704.591.0683<br>
<span class="title3">denimrep1@aol.com</span><br>
</td>
<td>
<b>New York</b><br>
Curly Girls<br>
212.967.6457<br>
<span class="title3">curlygirls222@aol.com</span><br>
</td>
</tr>

<tr>
<td>
<b>New England</b><br>
Bunny Pollack<br>
781.407.0050<br>
<span class="title3">bunnypollack@aol.com</span><br>
</td>
<td>
<b>Mid-Atlantic</b><br>
Marsha &amp; Jerry<br>
410.997.4848<br>
<span class="title3">bankonusforkids@verizon.net</span><br>
</td>
</tr>

<tr>
<th colspan=3>
<br>
<span class="title2">
Canadian Rep Info</span> . . . . . . . . . . . . . . . . . . . . . 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</th>
</tr>

<tr>
<td>
<b>Vancouver</b><br>
Deborah Phillips<br>
604.817.3320<br>
<span class="title3">d.delrio@telus.net</span><br>
</td>
<td>
<b>Montreal</b><br>
Connie Capobianco<br>
514.748.6970<br>
<span class="title3">connie@agenceminiboss.com</span><br>
</td>
<td>
<b>Toronto</b><br>
Josie Mancusco<br>
416.504.1880<br>
<span class="title3">codi@on.aibn.com</span><br>
</td>
</tr>
</tbody></table>
</div> <!-- close rightBox -->

</div> <!-- close mainBox -->
<div style="clear: both;"></div>
</html>

foofrog · November 6, 2012

Aw... hella neat!
For the MILLIONTH time, thank you so much!!!!!!

Make Gallery Act as "Single Photo or Video"

Comments