The secure CMS.

Welcome to Geeklog, Anonymous Thursday, November 28 2024 @ 09:06 pm EST

Geeklog Forums

Adding a style to the img tag for stories

 New Topic  Post Reply
 09/16/04 06:52am (Read 4,294 times)  
Status: offline

willemj

Forum User
Newbie
Registered: 09/16/04
Posts: 14
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?

 Quote
 09/16/04 02:30pm  
Status: offline

beewee

Forum User
Full Member
Registered: 08/05/03
Posts: 969
Location:The Netherlands, where else?
Yes, please (ja graag!)
Dutch Geeklog sites about camping/hiking:
www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net
 Quote
 09/16/04 03:26pm  
Status: offline

willemj

Forum User
Newbie
Registered: 09/16/04
Posts: 14
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:

Text Formatted Code

$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
Text Formatted Code

                $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
Text Formatted Code

.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)
 Quote
 09/17/04 12:56am  
Status: offline

eyecravedvd

Forum User
Full Member
Registered: 06/09/03
Posts: 152
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

Text Formatted Code

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.
Shane | www.EyeCraveDVD.com
 Quote
 09/17/04 03:23am  
Status: offline

willemj

Forum User
Newbie
Registered: 09/16/04
Posts: 14
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

Text Formatted Code

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.

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.
 Quote
 09/17/04 06:47am  
Status: offline

eyecravedvd

Forum User
Full Member
Registered: 06/09/03
Posts: 152
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:
Text Formatted Code


.storybox {
  details for this class
}

.storybox img {
  padding: 3px;
  border: blah blah;
}


 


It doesn't require any hacking then.

Shane | www.EyeCraveDVD.com
 Quote
 09/17/04 07:34am  
Status: offline

willemj

Forum User
Newbie
Registered: 09/16/04
Posts: 14
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:
Text Formatted Code


.storybox {
  details for this class
}

.storybox img {
  padding: 3px;
  border: blah blah;
}




 


It doesn't require any hacking then.



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?
 Quote
 09/17/04 12:59pm  
Status: Banned

machinari

Forum User
Full Member
Registered: 03/22/04
Posts: 1512
Quote by willemj:
Hmm. is this :
.storybox H1
also possible?
yes
 Quote
 09/17/04 02:31pm  
Status: offline

Dirk

Site Admin
Admin
Registered: 01/12/02
Posts: 13073
Location:Stuttgart, Germany
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
 09/17/04 05:38pm  
Status: offline

willemj

Forum User
Newbie
Registered: 09/16/04
Posts: 14
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


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?
 Quote
 09/17/04 06:01pm  
Status: offline

Dirk

Site Admin
Admin
Registered: 01/12/02
Posts: 13073
Location:Stuttgart, Germany
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.

Yep. For example something like
Text Formatted Code
<td class="mynewclass">
  {story_anchortag_and_image}
  {story_introtext}
</td>
 
and some CSS like
Text Formatted Code
.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
 Quote
 New Topic  Post Reply
All times are EST. The time is now 09:06 pm.
  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content