Image spacing is not working...

[baklavoni]

Hello to all.

Before anything, I have phpwcms 1.3.3 installed, and working.

My question is why "image space" in images content part does not working?
To get you more into the problem I made some screenshots:

Frontend, vertical spacing (not working)


And backend for vertical spacing



Here are screenshots of same content part, with changed "column" value to 2 (horizontal spacing).
Frontend


Backend


Any solution for this issue?
Just to highlite, this issue I have on two different servers, with different versions of php 4.xx.

Anyone have this problem besides me?

Thanks

[daniel.grant]

Probably something to do with your template.

Code: Select all

<!--IMAGES_ENTRY_SPACER_START//--><!-- space between images "{SPACE}px" --><!--IMAGES_ENTRY_SPACER_END//-->

[baklavoni]

Probably something to do with your template.

Code: Select all

<!--IMAGES_ENTRY_SPACER_START//--><!-- space between images "{SPACE}px" --><!--IMAGES_ENTRY_SPACER_END//-->

I agree with you that maybe it can be hacked thru template adjusting, but obviously this problem is related with phpwcms core.
This is problem that is continiously repeating for me with every new installation of phpwcms.
I'll like solution which will be implemented in core.
There must be solution.

Thanks

[daniel.grant]

Yeah you just edit the default template (template/inc_default/images.tmpl) or create your own (template/inc_cntpart/images/) - no hack.

[zuker]

You have posted about this problem once. There is an answer: http://forum.phpwcms.org/viewtopic.php?f=1&t=15514
You have to play with frontend.css

Zuker

[baklavoni]

Yeah you just edit the default template (template/inc_default/images.tmpl) or create your own (template/inc_cntpart/images/) - no hack.

Thanks, found it.
This is working, but only partially.
Changes in template/inc_default/images.tmpl gives back same thing.
Changes in template/inc_cntpart/images/mytemp.tmpl give some result (vertical spacing is working now, but horizontal doesn't work now).
Tried this with images CP and images <div> CP.

Below is mytemp.tmpl:

Code: Select all

<!--IMAGES_HEADER_START//-->

[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
	<div class="imageEntry" style="float:left;padding:5px;border:1px solid #CCCCCC;margin:5px 5px 0 0;">
		{IMAGE}[CAPTION]
		<p style="margin:3px 0 0 0;">{CAPTION}</p>[/CAPTION]
	</div>
<!--IMAGES_ENTRY_END//-->


<!--IMAGES_ENTRY_SPACER_START//--><!-- space between images {SPACE}px -->{SPACER:{SPACE}x1}<!--IMAGES_ENTRY_SPACER_END//-->


<!--IMAGES_ROW_SPACER_START//--><br style="clear:both" /><!-- space between image rows "{SPACE}px" -->{SPACER:1x{SPACE}}<!--IMAGES_ROW_SPACER_END//-->


<!--IMAGES_FOOTER_START//-->
	<br style="clear:both" />
</div>
<!--IMAGES_FOOTER_END//-->

Did I something wrong?

[zuker]

Try this in your frontend.css

Code: Select all

.imagelisttd {
  /*	  background: #ffffff; */
	 /*border: 1px solid #006600;  */
	margin: 0;
	padding-top: 6px;
	padding-bottom: 2px;
}

/* Only the Image  */
.imagelistimg {
/*	border: 1px solid #aaaaaa; */
	background: #ffffff; 
	border: 1px solid #cccccc; 
	margin: 0;
	padding: 6px;
}

In CP images set image space: 8px
And here it is the result:

[baklavoni]

Try this in your frontend.css

Code: Select all

.imagelisttd {
  /*	  background: #ffffff; */
	 /*border: 1px solid #006600;  */
	margin: 0;
	padding-top: 6px;
	padding-bottom: 2px;
}

/* Only the Image  */
.imagelistimg {
/*	border: 1px solid #aaaaaa; */
	background: #ffffff; 
	border: 1px solid #cccccc; 
	margin: 0;
	padding: 6px;
}

In CP images set image space: 8px
And here it is the result:

No change
Same thing again...

[daniel.grant]

for images CP make changes in frontend.
for images (div) make changes to templates (be sure to select your template)

I don't use 'space', for me it is not useful, so I don't know. My approach is just to using padding on the containing div.

I guess the approach should be to somehow implement {SPACE} into your template layout...

Code: Select all

<!--IMAGES_ENTRY_SPACER_START//--><div style="margin-right: {SPACE}px"></div><!--IMAGES_ENTRY_SPACER_END//-->

[Jensensen]

Hi baklavoni,

don't you want to send us a link? Makes no sense to speculate without not being able to analyse/view/not knowing your CSS (cause this is most likely an issue regarding to CSS as both, zuker and daniel.grant already mentioned).

btw: there's usually no need to quote complete articles with your posts every time...)

[baklavoni]

for images CP make changes in frontend.
for images (div) make changes to templates (be sure to select your template)

Yes, I figured this out...

I don't use 'space', for me it is not useful, so I don't know. My approach is just to using padding on the containing div.
I guess the approach should be to somehow implement {SPACE} into your template layout...

Code: Select all

<!--IMAGES_ENTRY_SPACER_START//--><div style="margin-right: {SPACE}px"></div><!--IMAGES_ENTRY_SPACER_END//-->

I tried your code (above), and I got some results. Now I have horizontal spacing with use of IMAGES CP, and vertical spacing with use of IMAGES <DIV> CP.

Hi baklavoni,

don't you want to send us a link?

You can see it here: http://www.kompas.ba/cms/index.php?about_us
I made 4 different versions of images and images<div> CP.
You clearly can see what is wrong.

Makes no sense to speculate without not being able to analyse/view/not knowing your CSS (cause this is most likely an issue regarding to CSS as both, zuker and daniel.grant already mentioned).

I agree with you...

btw: there's usually no need to quote complete articles with your posts every time...)

This is last time, I promise...

[Jensensen]

Hi,

thank you for this link. Well, there are almost tables in the source code. So, if you add to your CSS:

Code: Select all

td img {padding-bottom: 20px;}

all images within table cells will have a 20px padding but just bottom....
or

Code: Select all

.imageEntry {padding: 20px;}

Have a try and you'll notice that there appears a gap of 20pixel [in height] between your images

Seems, that {SPACE}px works well --> horizontally but NOT vertically. [Forget about this RT and use CSS!!]

TIP:
DO NOT RELY ON BUILT IN SPACER, but think about your template and read TOP DOWN your source code/CSS --> from <body..ID...class> to the item located on your page, you want to apply you styles....
Add your own classes to --> your own templates...

Example:

Code: Select all

<!--IMAGES_HEADER_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
<div class="My_Images_Here">
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
		{IMAGE}[CAPTION]
		<p class="imagecaption">{CAPTION}</p>[/CAPTION]
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
</div>
<!--IMAGES_FOOTER_END//-->

with this template for example --> TO ALTER CAPTION you could add to your CSS-file(s) something like:

Code: Select all

.My_Images_Here p.imagecaption {YOUR:STYLES;}

this will affect ONLY caption in box.class="My_Images_Here"

So, [ALWAYS!] check output --> source code! --> and add whatever needed to apply styles to your images....

with [FOR] this template, i guess it would be something like:

Code: Select all

.My_Images_Here .imageEntry {padding: 20px;}

to get a 20px gap around all images ONLY within --> box --> .My_Images_Here

and keep in mind:

...There is an[other] answer: http://forum.phpwcms.org/viewtopic.php?f=1&t=15514
You have to play with frontend.css...

[update]

Jensensens CSS school is OPEN - come on and sign in

[baklavoni]

Hi,

thank you for this link. Well, there are almost tables in the source code. So, if you add to your CSS:

Code: Select all

td img {padding-bottom: 20px;}

all images within table cells will have a 20px padding but just bottom....
or

Code: Select all

.imageEntry {padding: 20px;}

Have a try and you'll notice that there appears a gap of 20pixel [in height] between your images.

Hello Jensensen, thank you a lot!

I tried all, but still no success.
At same link http://www.kompas.ba/cms/index.php?about_us I put contents of modified files (frontend.css, images.tmpl and slike.tmpl), without changing images CP.
Maybe you can find out where I go wrong.
Maybe my frontend CSS and images.tmpl have collision?

I'm a total newbie to CSS so please have patience with me...
Thanks

[baklavoni]

Jensensens CSS school is OPEN - come on and sign in

Hopefully I will be the first student to graduate