sNews Forum

sNews 1.6 (previous version) => Programming => Topic started by: adminphp on August 16, 2010, 05:51:22 pm

Title: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 16, 2010, 05:51:22 pm
I have  this property in my snews 1.6 ... View news in this way "method featuredcontentslider "  

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm)
http://snewscms.com/forum/index.php?topic=8858.0 (http://snewscms.com/forum/index.php?topic=8858.0)

My problem is that I want to grow the size of the pictures in the articles automatically in this method -

See the first images you'll see that the size of a normal image

 (http://j.imagehost.org/0003/Sans_titre_.png)

But I want it to display so

(http://j.imagehost.org/0595/k.png)

Is there a file (js. or. css or ..) that controls the size of the image in that method  .I have already seen such methods.



Thank you to all members who are efforts exerted in order to resolve all the problems
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Keyrocks on August 16, 2010, 09:58:56 pm
Ok.... just to be sure... are you saing that you want the image container to handle any size of image... from a small one to one that would fit the full wideth of the main content container... and still have the text flow around it?

If that is the case, then you could try the following:

In your style.css file, insert:
Code: [Select]

            /* div classes to float images or inserted blocks with text-wrap in articles */
            .floatright { position: relative; float: right; padding: 3px 0 0 10px; border: none; }
            .floatleft { position: relative; float: left; padding: 3px 10px 0 0; border: none; }


Where you are inserting your image in the text-area, use the following tags to wrap the image-string:
For text-wrap down the left-side of the image (image-right) use:
        <div class="floatright">image-string-here</div>
For text-wrap down the right-side of the image (image-left) use:
        <div class="floatleft">image-string-here</div>


Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 16, 2010, 11:22:20 pm
Thanks ... To respond, but did not work the way
Is there a solution to the file jflow/contentslider.css or contentslider.js   

Why put  code in the style.css ... We just want to be upsized images in (method -featuredcontentslide ... articles :1,2,3,4,5)

If, as the property belongs only within the "method"  We do not need to edit the style.css of all page .  I can give you sites that use the property that I want . like www.hespress.com (http://www.hespress.com)  ... Thanks ... I hope to find a solution for me; thank you again mr.Keyrocks and all members
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Fred K on August 17, 2010, 02:42:42 am
admin, there's a pretty simple solution.
First you should make sure that your images appear first in the html output. Second, give the image output a class name, for example "full" (it's what I always use for full width images. Then, in your CSS - yes, this is a style thing and should therefore preferably be handled by CSS - put the following rule:

Code: [Select]
img.full {display:block; width: XXpx; margin:XXpx;}
Set the width to match the width of the container you put the image in. Set the margin value to something that works in your layout but note that you should restrict yourself to margin-top and margin-bottom values. The key element is display:block; - this makes the image push content that comes after it below the image. And since we set the image to be as wide as the container, you get the layout you're asking for.

Side note: Personally I would use width:100%; height:auto; for this kind of thing, but Windows browsers (read IE) don't always treat that rule correctly. By omitting the height value, all browsers *should* by default use "height:auto;" even if it's not explicitly stated. And if you set the width to match the container's width, even IE should treat your images correctly.

Why use CSS over a js or php solution? (a) It's easier. And (b) this is the kind of thing we use styling for.
Plus (c) I'm better at CSS than I am at JS or PHP.

Oh, and it doesn't matter if you put the rule in style.css or contentslider.css - that's your choice entirely.
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 18, 2010, 03:26:17 am

as we need for the introduction of effects to images like (Enlarge the image size - Make a framework for image -Directing the image to the left or right)  All of this work impacts on the images in general.
But I'm talking about Featured Content Slider . I just want to work for all affected by the image displayed  just in that method .
So that (method)  has control files (css,js,) .How can we get into all the effects in each image for each article that is displayed in (Featured Content Slide)  .Am I just do not want to enlarge the size of the image, but I also want to be displayed in the middle with a little text underneath.
Those roads that you mentioned. Successful in the other body. And not in the method .

Can we create a file "css" Enters its effects only on the image displayed within method.

Please see in the code you will see there ;"<div class="contentdiv">" ,Why did not we use this class name "contentdiv", Is the impact on content of articles in method .
Why should we always to include   <div class=full">...</div>   whenever we want to create an article,
We have class name in index.php, Automatically without the influence is that we write, in all the articles.


Code: [Select]
!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

<div id="paginate-slider1" class="pagination">

</div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider1",  //id of main slider DIV
contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2],  //[true/false, fadedegree]
autorotate: [true, 3000],  //[true/false, pausetime]
onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>

<br />

I hope that Warhead me the solution to this problem because you have that much experience  .I have already given you one of the sites model
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Fred K on August 18, 2010, 06:33:01 am
We put the class on the img tag because there might be other images within the same context that you do not wish to have presented at full scale. So, putting the class ("full", "big", "large", "grande", whathaveyou) presents you with the opportunity to give some images a specific size while not touching others.

Now, that was just an example. Of course you can use the div "contentdiv" as your target class in a similar way:
Code: [Select]
.contentdiv img {display:block; width:XXpx; margin:XXpx 0;}
However, that will target all images within the .contentdiv container. If we target the img that we actually want to have the specific size instead, we get a more granular and controllable result.

Just note that you have to use ".contentdiv img" in your stylesheet (= the jflow stylesheet) since using just ".contentdiv" will only affect the div, not the img.
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 19, 2010, 03:56:00 am
Thanks" Fred K (agentsmith)" Thanks for the reply. In fact, so successful in the last.

".contentdiv img" Means that the impact only on the images located in the area div  "contentdiv"
And this method is better to, I think. Because they do not need to call each time "class name" . Actually "css" Language.
Is distinct from the html" and easy. Thanks for the solution and does not wish that we meet again.
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 19, 2010, 11:01:15 pm
Unfortunately for the inconvenience ... Can the image to be like the title of the article''Hyperlink - a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">img article = contentdiv img </a>
means that we can pressure him to convert to the article.  

sorry the inconvenience. thanks again...
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 20, 2010, 10:40:02 pm
up please
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Keyrocks on August 21, 2010, 03:10:01 am
Unfortunately for the inconvenience ... Can the image to be like the title of the article''Hyperlink - a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">img article = contentdiv img </a>
means that we can pressure him to convert to the article.  

sorry the inconvenience. thanks again...

Unfortunately I may not understand clearly what you are asking. So I guess I will have to guess.
Are you asking if an image can also be a hyperlink to an article.... so when you click the image you get the article that contains the image?

Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Fred K on August 21, 2010, 04:35:36 pm
Quote from: adminphp
Can the image to be like the title of the article

adminphp - that question really belongs in the original mod thread (http://snewscms.com/forum/index.php?topic=8858.0) since those changes would have to be made within the mod code. I haven't used that mod myself so I can't help you there. Sorry.
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 21, 2010, 11:30:25 pm
First, Thanks for the reply ... What I want to say is, can the image to be like the title of the article



To explain only. Noss can be a "hyperlink" to the image of each article ..Just a reminder for.i have this "method"--- http://snewscms.com/forum/index.php?topic=8858.0/

can we have like this for each article in the CMS.

<a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">image of each article  </a>

I can explain to you more thank very much to participate .. And I'm sorry for the inconvenience
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Fred K on August 22, 2010, 12:44:07 am
Again, your question belongs to the original mod topic rather than putting it here. That said, you could take a look at my Article Image mod and see if it's of any use to you... (note though that my mod is for sNews 1.7 and not 1.6)
http://snewscms.com/forum/index.php?topic=9217.0
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 22, 2010, 01:30:02 am
Thank you very much ... I did not see the correct link :http://snewscms.com/forum/index.php?topic=8858.0    But in this last link is correct.  http://snewscms.com/forum/index.php?topic=9217.0    thanks mr fred k
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 24, 2010, 03:02:15 am
Why we will add  field in the Article panel for entering an image url  .I think that the way in which I have mentioned in your article something difficult. Because you need to modify the file snews.php ...The other hand I just want to be a photo as the title of the article can be pressed  ....I have mentioned in your article I think that there are many other touched Can you tell us one of the easy way. ....Can we include this code in a file contentdiv.css or style.css

.contentdiv img {display:block; a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/"; width:430px; hight:320px; margin:XXpx 0;}

What I want to say is that we'll CONNECT hyperlink to the image located in the method (featured content slider)


 only to remind  i have snews1.6
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Keyrocks on August 24, 2010, 04:43:55 am
Why we will add  field in the Article panel for entering an image url  .I think that the way in which I have mentioned in your article something difficult. Because you need to modify the file snews.php ...The other hand I just want to be a photo as the title of the article can be pressed  ....I have mentioned in your article I think that there are many other touched Can you tell us one of the easy way. ....Can we include this code in a file contentdiv.css or style.css

.contentdiv img {display:block; a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/"; width:430px; hight:320px; margin:XXpx 0;}

What I want to say is that we'll CONNECT hyperlink to the image located in the method (featured content slider)
only to remind  i have snews1.6

No... you cannot put any incomplete HTML or any PHP code in any CSS file. Well, that's not entirely true... you CAN... but it will not work.
Cascading Style Sheet files are only used for CSS styling declarations... nothing else.

You cannot publish an article with a title and have the title linked to an image... because the script that generates the title is dynamically generated using data stored in the database....... the article's seftitle (from the articles table and the category's seftitle from the categories table.

sNews is designed to publish articles... or pages... and you can put an image in an article's content.
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Fred K on August 24, 2010, 07:21:47 pm
Quote
.contentdiv img {display:block; a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/"; width:430px; hight:320px; margin:XXpx 0;}

This is an unusable css construction, a href="" is an html value, not a css value. Simply put, you can't do it that way. Also, the "XXpx" in margin should be replaced with a numerical value that works in your design. XX was used before as a placeholder since I have no way of knowing what value your design actually needs.

I think you need to read up on HTML and CSS, what elements you can and can't use in each, before attempting the change you're trying to accomplish.

Also, as I said before, I haven't used the featured content slider mod so I don't really have anything to add other than what I've already suggested.
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 24, 2010, 10:58:26 pm


I think you need to read up on HTML and CSS, what elements you can and can't use in each, before attempting the change you're trying to accomplish.


Thank you ... I know it can not be merged code php with file css

But I was the oldest proposal ...In the file style.css We could do the inclusion of the background img ...So I said in the same Can we do "a herf" to img in file css

In terms of what I have said I should read in php & css . I tell you I am a specialist in language php & c++ . But the language css .I do not know very well, but I think its easy.   thanks again
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: nukpana on August 25, 2010, 05:41:04 am
I am so confused as to what you want to do. Can you write some psuedo code as to what you want done or write/ask the request clearer?

I assume you now want either:

Code: [Select]
// HTML
<a class="articleLink" href="path/to/article">Article</a>

// CSS
.articleLink { background-image:url('path/to/image.png'); }

Or
Code: [Select]
<a class="articleLink" href="path/to/article"><img src="path/to/image.png" /></a>
Please confirm back.
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 25, 2010, 06:38:38 pm
I want such a model...See .condentdiv img / It's just a picture that displays in class name "contentdiv" in  method  (Featured Content Slide)

<a  href="path/to/article"><img src="#condentdiv img" /></a>

What do I need it /

<a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">
         <p align="center">contentdiv img</p>
         </a

Seen in    

 // CSS
.articleLink { background-image:url('path/to/image.png'); }

Could it be that like this

 // CSS
.articleLink { a herf image:url('path/to/article/'); }

Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: Keyrocks on August 25, 2010, 07:45:29 pm
1)  Do you want a background image on the article title?
Or...
2)  Do you want the title link to show an image when clicked?

1)  The only thing you can do in CSS is apply a background image to a class.
     Example: If you have an image in the root/images folder, and you want a background image in a division class, you would use:
        .condentdiv { background-image: url(images/name-of-image.jpg); }

2) If you want the title of an article linked to an image so it shows an image when you click the title,
   you would need to modify the title string in function center() in the snews.php file to add an image to it.
   Example:

In your snews.php file (sNews 1.6), search for this string:
   if ($r['displaytitle'] == 'YES')

Under it, you will see this string:
Code: [Select]
<?php

echo '<h2>'.(strlen($text) > $shorten $link.$category.'/'.$r['seftitle'].'/" title="'.$title.'">'.$title.'</a>' $title).'</h2>';

?>


To link an image to the title, you would copy the string, paste it under the existing one and modify it like so:
Code: [Select]
<?php

# DEFAULT STRING - not changed
// echo '<h2>'.(strlen($text) > $shorten ? $link.$category.'/'.$r['seftitle'].'/" title="'.$title.'">'.$title.'</a>' : $title).'</h2>';

# MODIFIED STRING WITH TITLE LINKED TO AN IMAGE
echo '<h2>'.$link.'images/image-name.gif" title="IMAGE-NAME">'.$title.'</a></h2>';

?>


NOTE: the modified string will be hot-linked at all times, whether the article is shortened or full-length.
 
 
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 25, 2010, 10:43:22 pm
1)  Do you want a ...............................?
Or...
2)  Do you want ...................................?
 

Actually i want the image of an article linked to an article text so it shows an text of article when you click the image,

I just want to remind that I want to serve that property in "dynamic drive script"
http://snewscms.com/forum/index.php?topic=8858.0
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: nukpana on August 26, 2010, 12:08:22 pm
I want such a model...See .condentdiv img / It's just a picture that displays in class name "contentdiv" in  method  (Featured Content Slide)
Code: [Select]
<a href="path/to/article"><img src="#condentdiv img" /></a>What do I need it /
Code: [Select]
<a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/"><p align="center">contentdiv img</p></a>Seen in    
Code: [Select]
// CSS
.articleLink { background-image:url('path/to/image.png'); }
Could it be that like this
Code: [Select]
// CSS
.articleLink { a herf image:url('path/to/article/'); }


Well, you can have the Image noted in the HTML or in the CSS, not both , that's why I gave two options.

So this:
Code: [Select]
<a href="path/to/article"><img src="#condentdiv img" /></a>
Code: [Select]
<a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/"><p align="center">contentdiv img</p></a>

Would be:  (contentdiv would be unique so I am making it an ID)
Code: [Select]
<a href="path/to/article"><span id="articleName_img" class="intro_img"></span></a>The CSS then would be:
Code: [Select]
#articleOne_img { background-image: url(path/to/articleOne_img); }
#articleTwo_img { background-image: url(path/to/articleTwo_img); }
.intro_img { align: center; }

The CSS ID is unique, whereas the CSS CLASS can be applied to more than one item. 
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 26, 2010, 11:33:44 pm
What you say is true ... But I want to be an impact on the image automatically .
Means that we must deal with php tags ... If you want the easy way and the manual I would have done it manually
 I'm going to insert the code in each article :

Code: [Select]
<a href="http://xxxx.com/xxxx/xxxxxxxxxxx">
<img border="0" src="http://i.imagehost.org/0920/4_40.jpg" width="200" height="150">
</a>
But I want this to be done automatically, so I Want to put only:

Code: [Select]
<img border="0" src="http://i.imagehost.org/0920/4_40.jpg" width="200" height="150">
I have already the view of many sites use this feature
Unfortunately for the inconvenience
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: nukpana on August 27, 2010, 01:37:47 am
Same thing then, just remember to keep the name consistency

Code: [Select]
<a href="' . db('website') . $v['catSEF'] . '/' . $v['artSEF'] . '/">
   <img src="' . $v['artSEF'] . '_img" id="' . $v['artSEF'] . '_img" class="intro_img" />
</a>

The CSS then would be:
Code: [Select]
#articleOne_img { special styles here }
#articleTwo_img { special styles here }
.intro_img { border: 0; width: 200; height: 150 }
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 27, 2010, 04:32:37 am
 :( :(
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: nukpana on August 27, 2010, 05:22:18 am
It was just an example in the (rare) event, you knew you always would have an image with the article, that the image would be linked to the article, with a naming convention - "articleName_img" or $var['articleSEF'].'_img'.  Again, an example of pseudo code, nothing more.

Your image is not clickable because it is not wrapped in the href tag.
Code: [Select]
<a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">
<img src="path/to/your/img.jpg" />
</a>
<p class="latest-text">'. $v['text'] .'</p>
Does that clear it up better?
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: adminphp on August 27, 2010, 10:54:54 pm
Very nice ... Let me just want to say that I want to be so :


<a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">
   <img src="All images displayed in the method(featured content slider)" />
</a>
<p class="latest-text">'. $v['text'] .'</p>


You give me the right way, but when I want to do I change my image I have to edit a file index.php to change source of image. But I want to change it just from control panel.
Title: Re: Problem to enlarge the size of the image in method "featuredcontentslider"
Post by: nukpana on August 28, 2010, 12:59:11 am
Which is why you either need to do some hacking (you noted you are good w/ PHP)

OR have some way to access the images through the system - as stated, for example - articleSEF_img.jpg or whatever so you can do this:

Code: [Select]
<a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">
   <img src="'.$v['artSEF'].'_img.jpg" />
</a>