Attachment Post Alignment

Get help with installation and running phpBB 3.0.x here. Please do not post bug reports, feature requests, or MOD-related questions here.
Suggested Hosts
Forum rules
END OF SUPPORT: 1 January 2017 (announcement)
Locked
JDobbsy1987
Registered User
Posts: 21
Joined: Fri May 06, 2011 6:25 am

Attachment Post Alignment

Post by JDobbsy1987 » Fri May 06, 2011 6:48 am

Hi,

I have searched for this and have seen a few topics that say it is possible but i have struggled to follow their instruction as it don't seem to work at the end but basically...

I would like to be able add 2 picture attachments side by side rather then below each other

Can someone help me with this?

Regards,
JDobbsy1987

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21736
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Attachment Post Alignment

Post by Mick » Fri May 06, 2011 12:57 pm

Can you post links to where it says it can be done please?
"The more connected we get the more alone we become" - Kyle Broflovski

IGCNWizzy
Registered User
Posts: 42
Joined: Mon Apr 11, 2011 7:26 am

Re: Attachment Post Alignment

Post by IGCNWizzy » Fri May 06, 2011 9:53 pm

For prosilver and prosilver based lays:

open /styles/your_style/theme/content.css

add:

Code: Select all

.inline-attachment{
width:100px;
float:left;
margin-right: 10px;
find: .attachbox {

modify like that:

Code: Select all

.attachbox {
float: left;
width: auto; 
margin: 5px 5px 5px 0;
padding: 6px;
background-color: #FFFFFF;
border: 1px dashed #d8d8d8;
/* clear: left;		//original	attachments one below other	*/ 

find: .attachbox dd {

and modify like that:

Code: Select all

.attachbox dd {
margin-top: 4px;
padding-top: 4px;
/* clear: left;		//original	attachments one below other	*/
float: left;                */ //side by side */
border-top: 1px solid #d8d8d8;

RECOMMENDATION:

open /styles/your_style/template/attachment.html

find:

Code: Select all

<!-- IF _file.S_IMAGE -->
		<dl class="file">
			<dt class="attach-image"><img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" onclick="viewableArea(this);" /></dt>
			<!-- IF _file.COMMENT --><dd><em>{_file.COMMENT}</em></dd><!-- ENDIF -->
			<dd>{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
		</dl>
		<!-- ENDIF -->
I recommend to delete/comment this line:

Code: Select all

<dd>{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd> 
or modify it like that:

Code: Select all

<dd><!-- {_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) --> {_file.L_DOWNLOAD_COUNT}</dd>


RESULT: http://screenshooter.net/0819047/frysgqo


PS. Above modification I did on prosilver-based template, I do not have access to any clean prosilver :P
Last edited by IGCNWizzy on Fri May 06, 2011 11:35 pm, edited 1 time in total.

JDobbsy1987
Registered User
Posts: 21
Joined: Fri May 06, 2011 6:25 am

Re: Attachment Post Alignment

Post by JDobbsy1987 » Fri May 06, 2011 11:17 pm

Hi IGCNWizzy,

Thank you aafor your reply.
I have done as you suggested but still displays attachments vertically?

Any idea why this is?

Regards,
JDobbsy1987

IGCNWizzy
Registered User
Posts: 42
Joined: Mon Apr 11, 2011 7:26 am

Re: Attachment Post Alignment

Post by IGCNWizzy » Fri May 06, 2011 11:30 pm

Did you refresh template/theme and purged cache after edits? Did you press Ctrl+F5 in your browser?


Well, if you're on prosilver it MUST work if you edited PROPERLY.
Should but not 100% guarantee if you using prosilver-based template. It will NOT work for other templates.

Upload for me: content.css, attachment.html files and send me your board url address. Will take a look on it after ill come back from work! (in 8-10h)

JDobbsy1987
Registered User
Posts: 21
Joined: Fri May 06, 2011 6:25 am

Re: Attachment Post Alignment

Post by JDobbsy1987 » Sat May 07, 2011 1:41 am

Sorry in advance, i am new to this but...
I was editing in the ACP but i have now edited the files directly, refreshed template/theme and done CTRL + F5.

I can now see changes being made to how they are displayed however it's not looking too good (pictures are now overlapping).
This site is internally hosted and is inaccesible to the outside world (Sorry)

Here are the before and after pictures:

Before:
Before.JPG
Before.JPG (100.39 KiB) Viewed 868 times
After:
After.JPG
After.JPG (133.06 KiB) Viewed 868 times
I really appreciate your help.

Regards,
JDobbsy1987

JDobbsy1987
Registered User
Posts: 21
Joined: Fri May 06, 2011 6:25 am

Re: Attachment Post Alignment

Post by JDobbsy1987 » Sat May 07, 2011 1:46 am

It wouldnt allow me to upload the files as the extensions are not allowed and when i changed the extension to .txt it said something along the line of "blocked due to potential attack"

I have managed to post the css file after changing the extention to .txt

I have pasted the attachment.html code here:
<!-- BEGIN _file -->
<!-- IF _file.S_DENIED -->
<p>[{_file.DENIED_MESSAGE}]</p>
<!-- ELSE -->

<!-- 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 -->


<!-- IF _file.S_IMAGE -->
<dl class="file">
<dt class="attach-image"><img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" onclick="viewableArea(this);" /></dt>
<!-- IF _file.COMMENT --><dd><em>{_file.COMMENT}</em></dd><!-- ENDIF -->
<dd><!-- {_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) --> {_file.L_DOWNLOAD_COUNT}</dd>
</dl>
<!-- ENDIF -->

<!-- IF _file.S_FILE -->
<dl class="file">
<dt><!-- IF _file.UPLOAD_ICON -->{_file.UPLOAD_ICON} <!-- ENDIF --><a class="postlink" href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a></dt>
<!-- IF _file.COMMENT --><dd><em>{_file.COMMENT}</em></dd><!-- ENDIF -->
<dd>({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
</dl>
<!-- ENDIF -->



<!-- IF _file.S_WM_FILE -->
<!-- method used here from http://alistapart.com/articles/byebyeembed / autosizing seems to not work always, this will not fix -->
<object width="320" height="285" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="wmstream_{_file.ATTACH_ID}">
<param name="url" value="{_file.U_DOWNLOAD_LINK}" />
<param name="showcontrols" value="1" />
<param name="showdisplay" value="0" />
<param name="showstatusbar" value="0" />
<param name="autosize" value="1" />
<param name="autostart" value="0" />
<param name="visible" value="1" />
<param name="animationstart" value="0" />
<param name="loop" value="0" />
<param name="src" value="{_file.U_DOWNLOAD_LINK}" />
<!--[if !IE]>-->
<object width="320" height="285" type="video/x-ms-wmv" data="{_file.U_DOWNLOAD_LINK}">
<param name="src" value="{_file.U_DOWNLOAD_LINK}" />
<param name="controller" value="1" />
<param name="showcontrols" value="1" />
<param name="showdisplay" value="0" />
<param name="showstatusbar" value="0" />
<param name="autosize" value="1" />
<param name="autostart" value="0" />
<param name="visible" value="1" />
<param name="animationstart" value="0" />
<param name="loop" value="0" />
</object>
<!--<![endif]-->
</object>

<!-- ELSEIF _file.S_FLASH_FILE -->
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cab ... on=5,0,0,0" width="{_file.WIDTH}" height="{_file.HEIGHT}">
<param name="movie" value="{_file.U_DOWNLOAD_LINK}" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<embed src="{_file.U_DOWNLOAD_LINK}" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/dow ... kwaveFlash" width="{_file.WIDTH}" height="{_file.HEIGHT}" play="true" loop="true" quality="high" allowscriptaccess="never" allownetworking="internal"></embed>
</object>
<!-- ELSEIF _file.S_QUICKTIME_FILE -->
<object id="qtstream_{_file.ATTACH_ID}" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin ... on=6,0,2,0" width="0" height="16">
<param name="src" value="{_file.U_DOWNLOAD_LINK}" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="type" value="video/quicktime" />
<embed name="qtstream_{_file.ATTACH_ID}" src="{_file.U_DOWNLOAD_LINK}" pluginspage="http://www.apple.com/quicktime/download/" enablejavascript="true" controller="true" width="0" height="16" type="video/quicktime" autoplay="false"></embed>
</object>
<!-- ELSEIF _file.S_RM_FILE -->
<object id="rmstream_{_file.ATTACH_ID}" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="200" height="50">
<param name="src" value="{_file.U_DOWNLOAD_LINK}" />
<param name="autostart" value="false" />
<param name="controls" value="ImageWindow" />
<param name="console" value="ctrls_{_file.ATTACH_ID}" />
<param name="prefetch" value="false" />
<embed name="rmstream_{_file.ATTACH_ID}" type="audio/x-pn-realaudio-plugin" src="{_file.U_DOWNLOAD_LINK}" width="0" height="0" autostart="false" controls="ImageWindow" console="ctrls_{_file.ATTACH_ID}" prefetch="false"></embed>
</object>
<br />
<object id="ctrls_{_file.ATTACH_ID}" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="0" height="36">
<param name="controls" value="ControlPanel" />
<param name="console" value="ctrls_{_file.ATTACH_ID}" />
<embed name="ctrls_{_file.ATTACH_ID}" type="audio/x-pn-realaudio-plugin" width="200" height="36" controls="ControlPanel" console="ctrls_{_file.ATTACH_ID}"></embed>
</object>

<script type="text/javascript">
// <![CDATA[
if (document.rmstream_{_file.ATTACH_ID}.GetClipWidth)
{
while (!document.rmstream_{_file.ATTACH_ID}.GetClipWidth())
{
}

var width = document.rmstream_{_file.ATTACH_ID}.GetClipWidth();
var height = document.rmstream_{_file.ATTACH_ID}.GetClipHeight();

document.rmstream_{_file.ATTACH_ID}.width = width;
document.rmstream_{_file.ATTACH_ID}.height = height;
document.ctrls_{_file.ATTACH_ID}.width = width;
}
// ]]>
</script>
<!-- ENDIF -->

<!-- IF _file.S_WM_FILE or _file.S_RM_FILE or _file.S_FLASH_FILE or _file.S_QUICKTIME_FILE -->
<p>
<!-- IF _file.S_QUICKTIME_FILE --><a href="#" onclick="play_qt_file(document.qtstream_{_file.ATTACH_ID}); return false;">[ {L_PLAY_QUICKTIME_FILE} ]</a> <!-- ENDIF -->
<a href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a> [ {_file.FILESIZE} {_file.SIZE_LANG} | {_file.L_DOWNLOAD_COUNT} ]</p>
<!-- ENDIF -->

<!-- ENDIF -->
<!-- END _file -->
Attachments
content.txt
(11.97 KiB) Downloaded 16 times

IGCNWizzy
Registered User
Posts: 42
Joined: Mon Apr 11, 2011 7:26 am

Re: Attachment Post Alignment

Post by IGCNWizzy » Sat May 07, 2011 7:36 am

Well, I see your problem now, I thought everybody this times convert their attached images to thumbnails.

I am not a web coder, just a C++, asm ^^ who have touched the phpbb from some time.

Try to edit like that:

.inline-attachment{
width: auto;
float:left;
margin-right: 10px;

If wont work go' ACP -> General (TAB) -> Attachments Settings' and set as follow:

Display images inline: yes[x] :: no [ ]
Create thumbnail: yes[ ] :: no [x]
Maximum thumbnail width in pixel: a size u like

and I think that a MUST HAVE MOD is 'ReIMG Image Resizer' :: Download from here: http://www.phpbb.com/customise/db/mod/r ... e_resizer/

to install it you need edit files manually as instruction says or use AutoMod Mod to install it, Download from here: http://www.phpbb.com/mods/automod/

Instruction on how to install AutoMod and how to use it: http://www.phpbb.com/community/viewtopi ... &t=1342275

If you do not have AutoMod already and do not really want to install it just install the ReImg Resizer manually, it is simple mod.. doesnt require much work: instruction on how to install it manually: http://www.phpbb.com/customise/db/view-install/id_54851

after have installed the ReImg resizer change settings as on the image: http://screenshooter.net/0819047/apbodnr

well, after done all of the above you should have same RESULT as I have showed you in the picture one post earlier.

REMEMBER to work on a test forum or do backup of your files before editing, then always can safely turn back to what you had before and always edit files, remember of refreshing/purging templates/themes/images/cahce and ctrl+F5 your browser.

JDobbsy1987
Registered User
Posts: 21
Joined: Fri May 06, 2011 6:25 am

Re: Attachment Post Alignment

Post by JDobbsy1987 » Sat May 07, 2011 1:50 pm

IGCNWizzy wrote: and I think that a MUST HAVE MOD is 'ReIMG Image Resizer' :: Download from here: http://www.phpbb.com/customise/db/mod/r ... e_resizer/
I will give this a go thanks.
IGCNWizzy wrote:Try to edit like that:

.inline-attachment{
width: auto;
float:left;
margin-right: 10px;
This has in-fact helped A LOT :D
The only thing that's a little awkward is that I have to put a load of carriage returns in to move below an image.

lets say the picture is taking up 10 rows (such as pressing carriage return 10x) then i would have to put an 11x carriage return space before writing my next line of text otherwise the text is to the right of the image.

Is there anyway to resolve that?
If not then what you have enabled me to do is awesome

Thank you so much for your help :D

Regards,
JDobbsy1987

IGCNWizzy
Registered User
Posts: 42
Joined: Mon Apr 11, 2011 7:26 am

Re: Attachment Post Alignment

Post by IGCNWizzy » Sat May 07, 2011 5:16 pm

it is normal behavior that the text goes to the right of the image you you wont move it to the next line..

didnt you think to use thumbnails? + zoom? then you could keep all images on your board same thumb size.. decreasing by this the loading time etc..

JDobbsy1987
Registered User
Posts: 21
Joined: Fri May 06, 2011 6:25 am

Re: Attachment Post Alignment

Post by JDobbsy1987 » Sat May 07, 2011 5:28 pm

IGCNWizzy wrote:it is normal behavior that the text goes to the right of the image you you wont move it to the next line..

didnt you think to use thumbnails? + zoom? then you could keep all images on your board same thumb size.. decreasing by this the loading time etc..
I was looking at that a little earlier but my board is 3.0.4 and the MOD posted only goes as far back as 3.0.5
i did try to install the 3.0.5 on my forum but it didn't work... not sure if this is due to incorrect installation or incompatibility.

IGCNWizzy
Registered User
Posts: 42
Joined: Mon Apr 11, 2011 7:26 am

Re: Attachment Post Alignment

Post by IGCNWizzy » Sat May 07, 2011 5:46 pm

well, it should be compatible anyway.. just check all the edits.. 99,9% should work.

JDobbsy1987
Registered User
Posts: 21
Joined: Fri May 06, 2011 6:25 am

Re: Attachment Post Alignment

Post by JDobbsy1987 » Sat May 07, 2011 5:48 pm

IGCNWizzy wrote:well, it should be compatible anyway.. just check all the edits.. 99,9% should work.
I will give it another go, I am learning a lot :D

Thank you for your continued help.

Locked

Return to “[3.0.x] Support Forum”