Welcome to Geeklog, Anonymous Thursday, March 28 2024 @ 06:09 am EDT

Geeklog Forums

Adding a style to the img tag for stories


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

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

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

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

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

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

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

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

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

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

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

All times are EDT. The time is now 06:09 am.

  • 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