Looking For The Images Listing Script

hgtonight

IndexPhotos.css is overriding the styles. Try disabling that plugin. Or make the style selectors more specific.

digihub

Disabled. Please take a look.

hgtonight

This is working as intended. You will have to modify the CSS to arrange it as you want. Something like

.CategoryImage {
  float: left;
  margin-left: -170px;
}

looks decent on your site.

digihub

I think that you are misunderstood about the original idea. You are going to a opposite direction. The way vrijvlinder works was on the right path. She just having difficulty removing the white space or placeholder. I believe the plugin that you made can be the key to solve this issue. You might need to do some modifications. hgtonight you are great and you can make it.

digihub

I just re-enable the IndexPhotos and disable the Category Images so you can see the original page.

hgtonight

@digihub said:
I think that you are misunderstood about the original idea. You are going to a opposite direction. The way vrijvlinder works was on the right path. She just having difficulty removing the white space or placeholder. I believe the plugin that you made can be the key to solve this issue. You might need to do some modifications. hgtonight you are great and you can make it.

What do you mean by white space and placeholder? @vrijvlinder is the resident CSS wrangler.

digihub

@vrijvlinder said:
oh ok I see what you mean a place where there is no image , that is easy add a background to the images and the one without image should just show the background.

ul.Discussions li img {
height: 55px;
width: 125px;
float: left;
margin-left: -200px!important;
background:url(http://w6.vanillicon.com/6f6e4d09bc524cbcf2025464e279173e_50.png)repeat;
}

here I added your avatar to the background, works well.

yes peregrine is a magician pluginista !

Please see the conversation.. It's hard for me to explain in detail since I am a newbie. I am not as good as you in programming but I understand the concept and structure.

hgtonight

I would put a placeholder image at the plugin level.

protected function DisplayPhoto($Sender) {
  $ImageSrc = '/applications/dashboard/design/images/pixel.png';
  $body = $Sender->EventArguments['Discussion']->Body;
  preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
  $image = $matches[2];
  if ($image) {
    $ImageSrc = $image;
  }
  echo '<img class="ProfilePhotoSmall"' . $ImageSrc. ' />';
} 

digihub

Where should I put this code?

hgtonight

In your IndexPhotos plugin php file.

digihub

I have replaced this

protected function DisplayPhoto($Sender) { $body = $Sender->EventArguments['Discussion']->Body; preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches); $image = "src=" . $matches[2]; echo '<img class="ProfilePhotoSmall"' . $image . '>'; }

with

protected function DisplayPhoto($Sender) { $ImageSrc = '/applications/dashboard/design/images/pixel.png'; $body = $Sender->EventArguments['Discussion']->Body; preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches); $image = $matches[2]; if ($image) { $ImageSrc = $image; } echo '<img class="ProfilePhotoSmall"' . $ImageSrc. ' />'; }

then all images have disappeared.

digihub

I receive fatal error message if I add the code on the bottom

<?php if (!defined('APPLICATION')) exit();

$PluginInfo['IndexPhotos'] = array(
   'Name' => 'IndexPhotos',
   'Description' => "Adds user photos to discussions list.",
   'Version' => '1.1',
   'RequiredApplications' => array('Vanilla' => '2.0.18b4'),
   'RegisterPermissions' => FALSE,
   'Author' => "Matt Lincoln Russell",

snip

You copy/pasted the wrong file. Can you paste the details of the fatal error please?

digihub

I had problem accessing Vanilla sometimes for the past 2 weeks especially through Firefox. I had checked my network and no problem visiting other sites.

digihub

@hgtonight said:
I would put a placeholder image at the plugin level.

protected function DisplayPhoto($Sender) {
  $ImageSrc = '/applications/dashboard/design/images/pixel.png';
  $body = $Sender->EventArguments['Discussion']->Body;
  preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
  $image = $matches[2];
  if ($image) {
    $ImageSrc = $image;
  }
  echo '<img class="ProfilePhotoSmall"' . $ImageSrc. ' />';
} 

Well.. may be I was wrong so I copy/pasted this code on the bottom of class.indexphotos.plugin.php and now nothing has changed.

hgtonight

You need to replace the DisplayPhoto function with what I suggested.

digihub

I just look through this thread and I don't see how to replace the DisplayPhoto function. Do you mean disable IndexPhotos or CategoryImages?

hgtonight

@digihub In /plugins/IndexPhoto/class.indexphotos.plugin.php delete everything. Paste in the following code:

<?php if (!defined('APPLICATION')) exit();

$PluginInfo['IndexPhotos'] = array(
   'Name' => 'IndexPhotos',
   'Description' => "Adds user photos to discussions list.",
   'Version' => '1.1',
   'RequiredApplications' => array('Vanilla' => '2.0.18b4'),
   'RegisterPermissions' => FALSE,
   'Author' => "Matt Lincoln Russell",
   'AuthorEmail' => 'lincolnwebs@gmail.com',
   'AuthorUrl' => 'http://lincolnwebs.com'
);

class IndexPhotosPlugin extends Gdn_Plugin {
   /**
    * Extra style sheet.
    */
   public function DiscussionsController_Render_Before($Sender) {
      $Sender->AddCssFile($this->GetResource('design/indexphotos.css', FALSE, FALSE));
   }

   /**
    * Extra style sheet.
    */
   public function CategoriesController_Render_Before($Sender) {
      $Sender->AddCssFile($this->GetResource('design/indexphotos.css', FALSE, FALSE));
   }

   /**
    * Trigger on All Discussions.
    */
   public function DiscussionsController_BeforeDiscussionContent_Handler($Sender) {
      $this->DisplayPhoto($Sender);
   }

   /**
    * Trigger on Categories.
    */
   public function CategoriesController_BeforeDiscussionContent_Handler($Sender) {
      $this->DisplayPhoto($Sender);
   }

   /**
    * Display user photo for first user in each discussion.
    */
    protected function DisplayPhoto($Sender) {
        $ImageSrc = '/applications/dashboard/design/images/pixel.png';
        preg_match('#\<img.+?src="([^"]*).+?\>#s', $Sender->EventArguments['Discussion']->Body, $images);
        if ($images[1]) {
            $ImageSrc = $images[1];
        }
        echo Img($ImageSrc, array('class' => 'ProfilePhotoSmall'));
    }
}

Enable IndexPhotos and disable CategoryImages. I have tested this as working on 2.0.18.8.

digihub

It is working now. I am really appreciate your patience and support.
I just realized that there is a gap between the images (pic 1) . I am trying to make this images list as an independent column which is not supposed to be affected by the discussions on the right column. Also, there are some white spaces squeeze the discussion titles to the left (pic 2). Any idea?

hgtonight

The gap is caused by there being no image in the discussion it is next to. So you want a list of images from the discussions without caring if they match the discussions' position?

This is really a moving target situation. I need you to explain, in excruciating detail, what it is you are trying to achieve.

digihub

@digihub said:
I was trying to create a layout for the images listing on the left of each category page. It works but lack of script for the images. If possible I would like to show different images with titles that base on main categories and sub categories. Can anyone tell me about this? Your help is greatly appreciated.

custom.css

#Imagelist { float: left; width: 170px; }

default.master.php

<div id="Body"> <div id="Imagelist"> NEED IMAGES SCRIPT HERE </div> <div id="Content"> <?php $this->RenderAsset('Content'); ?> </div> <div id="Panel"><?php $this->RenderAsset('Panel'); ?></div> </div> <div id="Foot">

I basically needed a simple image script - yes, a list of images from the discussions without caring if they match the discussions' position. I would like to show different images with titles that base on main categories and sub categories. Hope this is clear for you.