Image thumbnails horizontal view

Discussion forum for MOD Writers regarding MOD Development.
Locked
jano_s
Registered User
Posts: 16
Joined: Mon Dec 12, 2011 7:01 am
Contact:

Image thumbnails horizontal view

Post by jano_s » Wed Feb 27, 2013 4:41 am

How to change image thumbnails vertical view to horizontal. It may be useful to someone else (I was looking for it too). Here you can see a result: Forum. My solution:

./styles/prosilver/template/attachment.html (for prosilver_se too)
Change:

Code: Select all

		<!-- IF _file.S_THUMBNAIL -->
		<dl class="thumbnail">
			<dt><a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a></dt>
			<!-- IF _file.COMMENT --><dd> {_file.COMMENT}</dd><!-- ENDIF -->
		</dl>
		<!-- ENDIF -->
To:

Code: Select all

		<!-- IF _file.S_THUMBNAIL -->
<figure><a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a>
			<!-- IF _file.COMMENT --><figcaption> {_file.COMMENT}</figcaption><!-- ENDIF -->
		</figure>
		<!-- ENDIF -->
./styles/prosilver/template/bbcode.html (for prosilver_se too)
Change:

Code: Select all

<!-- BEGIN inline_attachment_open --><div class="inline-attachment"><!-- END inline_attachment_open -->

<!-- BEGIN inline_attachment_close --></div><!-- END inline_attachment_close -->
To:

Code: Select all

<!-- BEGIN inline_attachment_open --><!-- END inline_attachment_open -->

<!-- BEGIN inline_attachment_close --><!-- END inline_attachment_close -->
./styles/prosilver/theme/content.css (prosilver)
./styles/prosilver_se/theme/content.css (prosilver_se)
Add:

Code: Select all

figure{
    display:inline-block;
    margin:0.1em;
    white-space:normal;
    background-color:#FFFFFF;
    padding:2px;
}
figcaption{
    display:block;
    width:200px;
    text-align: left;
    font-style: italic;
    font-size: small;
    margin-top:-6px;
}
Last edited by jano_s on Sat Mar 23, 2013 2:08 pm, edited 1 time in total.
Mechatronics forum - discussions about mechatronics, related topics, studies, courses, books, your constructions What is mechatronics

User avatar
TheOldFart
Registered User
Posts: 138
Joined: Wed Mar 07, 2012 9:47 pm

Re: Image thumbnails horizontal view

Post by TheOldFart » Thu Mar 14, 2013 11:42 pm

*

User avatar
shortmort37
Registered User
Posts: 427
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

Re: Image thumbnails horizontal view

Post by shortmort37 » Sat Aug 24, 2013 5:58 pm

I really like your mod! But, I notice on your web page that the thumbs
display a southeast shadow when you hover over them. I don't see how you
accomplished that in this code - am I missing something?! I cite your mod
here:


https://www.phpbb.com/customise/db/mod/ ... 43#p297343

I like the borders on Sniper_E's mod, but I need the comment wrap feature
that your mod provides. I wish I knew more about PHP so I could
incorporate the two...

At any rate, could you let me know how you accomplish that shadow effect?
Many thanks!

Dan

User avatar
Oyabun1
Former Team Member
Posts: 23162
Joined: Sun May 17, 2009 1:05 pm
Location: Australia
Name: Bill

Re: Image thumbnails horizontal view

Post by Oyabun1 » Sat Aug 24, 2013 10:45 pm

/styles/prosilver_se/theme/content.css

Code: Select all

figure:hover{
    display:inline-block;
    margin:0.1em;
    white-space:normal;
    background-color:#FFFFFF;
    padding:2px;
    vertical-align: top; 
    border: 1px dashed;
    border-color: #DDD;
    box-shadow: 3px 3px 2px #888888;
    transition: all 0.4s ease 0s;
}
                      Support Request Template
3.0.x: Knowledge Base Styles Support MOD Requests
3.1.x: Knowledge BaseStyles SupportExtension Requests

jano_s
Registered User
Posts: 16
Joined: Mon Dec 12, 2011 7:01 am
Contact:

Re: Image thumbnails horizontal view

Post by jano_s » Sun Aug 25, 2013 10:50 am

Here's code that makes thumbnails the same as thumbnails on my forum. Add this code to: forum/styles/prosilver_se/theme/content.css

Code: Select all

figure{
    display:inline-block;
    margin:0.1em;
    white-space:normal;
    background-color:#FFFFFF;
    padding:2px;
    vertical-align: top; 
    border: 1px dashed;
    border-color: #DDD;
    transition: all 0.4s ease 0s;
}
figure:hover{
    display:inline-block;
    margin:0.1em;
    white-space:normal;
    background-color:#FFFFFF;
    padding:2px;
    vertical-align: top; 
    border: 1px dashed;
    border-color: #DDD;
    box-shadow: 3px 3px 2px #888888;
    transition: all 0.4s ease 0s;
}
figcaption{
    display:block;
    width:200px;
    text-align: left;
    font-style: italic;
    font-size: small;
    margin-top:-6px;
    margin-top:-6px;
}
Mechatronics forum - discussions about mechatronics, related topics, studies, courses, books, your constructions What is mechatronics

User avatar
shortmort37
Registered User
Posts: 427
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

Re: Image thumbnails horizontal view

Post by shortmort37 » Wed Aug 28, 2013 2:29 am

jano_s wrote:How to change image thumbnails vertical view to horizontal. It may be useful to someone else (I was looking for it too). Here you can see a result: Forum. My solution:

./styles/prosilver/template/attachment.html (for prosilver_se too)
Change:

Code: Select all

		<!-- IF _file.S_THUMBNAIL -->
		<dl class="thumbnail">
			<dt><a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a></dt>
			<!-- IF _file.COMMENT --><dd> {_file.COMMENT}</dd><!-- ENDIF -->
		</dl>
		<!-- ENDIF -->
Hmm... I'm running a 3.0.11 board with an mChat mod, and I didn't find this code. I found (and replaced with your replacement code) this instead:

Code: Select all

		<!-- IF _file.S_THUMBNAIL -->
		<div class="thumbnail">
			<a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a>
			<!-- IF _file.COMMENT --><br /><em>{_file.COMMENT}</em><!-- ENDIF -->
		</div>
		<!-- ENDIF -->
I also made the bbcode.html and content.css changes, which did match. Still, the mod doesn't seem to be working for me. Check out: http://www.59plymouth.net/59test/viewto ... f=5&t=2343

Dan

Peter77sx
Registered User
Posts: 3253
Joined: Wed Nov 09, 2005 2:51 pm

Re: Image thumbnails horizontal view

Post by Peter77sx » Wed Aug 28, 2013 3:27 am

Try clearing your theme and template cache from ACP see if that helps.

User avatar
shortmort37
Registered User
Posts: 427
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

Re: Image thumbnails horizontal view

Post by shortmort37 » Wed Aug 28, 2013 11:43 am

Peter77sx wrote:Try clearing your theme and template cache from ACP see if that helps.
Nope. I do that every time I update the board; clear my browser cache too. Still no love.

Dan

Locked

Return to “[3.0.x] MOD Writers Discussion”