Posted on: 09/16/04 06:52am
By: willemj
I have constructed a hack in story.php to be able to use a style element from your style.css in the img tag for images in the story.
Anyone interrested?
Adding a style to the img tag for stories
Posted on: 09/16/04 02:30pm
By: beewee
Yes, please (ja graag!)
Adding a style to the img tag for stories
Posted on: 09/16/04 03:26pm
By: willemj
Step 0:
Make a backup of story.php
Step 1
in story.php :
find the function ' replace_images'
Somewhere near the end of the function, the vars $norm,$left and $right are assigned a value... Replace those lines by the following lines:
$norm = $lLinkPrefix . '<img ' . $sizeattributes . 'class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix;
$left = $lLinkPrefix . '<img ' . $sizeattributes . 'align="left" class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix;
$right = $lLinkPrefix . '<img ' . $sizeattributes . 'align="right" class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix;
Step 2:
in story.php
find the function insert_images
Locate the if (count($errors) == 0) { statement.
Just below that, code for replacing the GL shorthand is placed.
replace those lines with
$intro = str_replace($norm, $lLinkPrefix . '<img ' . $sizeattributes . 'class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix, $intro);
$body = str_replace($norm, $lLinkPrefix . '<img ' . $sizeattributes . 'class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix, $body);
$intro = str_replace($left, $lLinkPrefix . '<img ' . $sizeattributes . 'align="left" class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix, $intro);
$body = str_replace($left, $lLinkPrefix . '<img ' . $sizeattributes . 'align="left" class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix, $body);
$intro = str_replace($right, $lLinkPrefix . '<img ' . $sizeattributes . 'align="right" class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix, $intro);
$body = str_replace($right, $lLinkPrefix . '<img ' . $sizeattributes . 'align="right" class="storyimage" src="' . $imgSrc . '" alt="">' . $lLinkSuffix, $body);
step 3:
in style.css in your layout directory,
add
.storyimage{
border: thin silver solid;
margin: 0.5em;
padding: 0.5em
}
That's it..
Reminder this forces you to re-do all articles, in order to force Geeklog to re-generate the html for that page.
Any questions, feel free to email me.
(graag gedaan)
Adding a style to the img tag for stories
Posted on: 09/17/04 12:56am
By: eyecravedvd
Wow, you did that the hard way. I just added it to my style.css and the story templates.
In templat for the story I'd just check what the class is called and then add something like this
className img {
details
}
Although, your code won't effect the topic icons so it is in fact a better solution if you want your images to have borders.
Adding a style to the img tag for stories
Posted on: 09/17/04 03:23am
By: willemj
[QUOTE BY= eyecravedvd] Wow, you did that the hard way. I just added it to my style.css and the story templates.
In templat for the story I'd just check what the class is called and then add something like this
className img {
details
}
Although, your code won't effect the topic icons so it is in fact a better solution if you want your images to have borders.
[/QUOTE]
I don't understand you solution..
When I looked at the generated HTML on one of my pages, I could only locate a tag. This tag did not have a classname, so I could not use this name to apply a style to.
Since I did not want to modify the style of the img tag, which would change the apperance of all imgs on my site, I found this to be a suitable solution.
Adding a style to the img tag for stories
Posted on: 09/17/04 06:47am
By: eyecravedvd
In my storytext.thtml file there is already a class name (storybox) asigned to the story blocks. I just added 'img' after that class name and then the details for the images.
Example:
.storybox {
details for this class
}
.storybox img {
padding: 3px;
border: blah blah;
}
It doesn't require any hacking then.
Adding a style to the img tag for stories
Posted on: 09/17/04 07:34am
By: willemj
[QUOTE BY= eyecravedvd] In my storytext.thtml file there is already a class name (storybox) asigned to the story blocks. I just added 'img' after that class name and then the details for the images.
Example:
.storybox {
details for this class
}
.storybox img {
padding: 3px;
border: blah blah;
}
It doesn't require any hacking then.
[/QUOTE]
Aha. now i get it.. Yes, your solution is much easier to implement....
Hmm.
I did overlook 2 things: I could not find the template file for stories, and when I looked in the generated HTML file I did not realize that a subselect such as this was possible..
.storybox
.storybox img
in such a way that only img tags inside the block are modified...
But it will modify the look of all images in the story, including the topic logo..
Hmm. is this :
.storybox H1
also possible?
Adding a style to the img tag for stories
Posted on: 09/17/04 12:59pm
By: machinari
[QUOTE BY= willemj]
Hmm. is this :
.storybox H1
also possible?
[/QUOTE]yes
Adding a style to the img tag for stories
Posted on: 09/17/04 02:31pm
By: Dirk
And another hint: You can always add your own class names to the template files. So if "storybox" causes you any problems, just invent your own class name and add it to a HTML tag in the templates where it's convenient for you.
bye, Dirk
Adding a style to the img tag for stories
Posted on: 09/17/04 05:38pm
By: willemj
[QUOTE BY= Dirk] And another hint: You can always add your own class names to the template files. So if "storybox" causes you any problems, just invent your own class name and add it to a HTML tag in the templates where it's convenient for you.
bye, Dirk[/QUOTE]
Hmm. yes, but a geeklog story is one formatted block in the database. So I can only add modifiers that apply to the whole block of html code. So if I define a new class that adds border and some insets to images, and I put this in the template, the style defined by this new class applies to all images in the story.
Do I understand this correctly?
Adding a style to the img tag for stories
Posted on: 09/17/04 06:01pm
By: Dirk
[QUOTE BY= willemj] So if I define a new class that adds border and some insets to images, and I put this in the template, the style defined by this new class applies to all images in the story.[/QUOTE]
Yep. For example something like
<td class="mynewclass">
{story_anchortag_and_image}
{story_introtext}
</td>
and some CSS like
.mynewclass img {
border: 1px solid black;
}
would only add a black border around images in the story (in this case around the topic image, too).
bye, Dirk