Welcome to Geeklog Saturday, September 21 2019 @ 11:46 am EDT

Geeklog Forums

Adding a style to the img tag for stories


Status: offline

willemj

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


Status: offline

beewee

Forum User
Full Member
Registered: 05/08/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

Status: offline

willemj

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

PHP 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
PHP 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
PHP 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)

Status: offline

eyecravedvd

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

PHP 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

Status: offline

willemj

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

PHP 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.

Status: offline

eyecravedvd

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

Status: offline

willemj

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

Status: offline

machinari

Forum User
Full Member
Registered: 22/03/04
Posts: 1512
Quote by willemj:
Hmm. is this :
.storybox H1
also possible?
yes

Status: offline

Dirk

Site Admin
Admin
Registered: 12/01/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

Status: offline

willemj

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

Status: offline

Dirk

Site Admin
Admin
Registered: 12/01/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
PHP Formatted Code
<td class="mynewclass">
  {story_anchortag_and_image}
  {story_introtext}
</td>
 
and some CSS like
PHP 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

All times are EDT. The time is now 11:46 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