Image-slider block editing
Permalink 1 user found helpful
Hi!
Im building a custom image-slider block for my website and i learned that i only need to edit view.php of the core block and to copy it to application/blocks/image_slider. The problem is that im not so familiar with PHP so i dont know what specific line of code to edit...
This is what view.php currently prints:
What i would like to change is to erase width and height of the images and to replace them with class="img-responsive". This is what view.php for image-slider looks like:
So, how should i edit it?
Im building a custom image-slider block for my website and i learned that i only need to edit view.php of the core block and to copy it to application/blocks/image_slider. The problem is that im not so familiar with PHP so i dont know what specific line of code to edit...
This is what view.php currently prints:
<ul class="rslides" id="ccm-image-slider-30"> <li> <img src="/application/files/2214/5872/2455/886230_750580171750924_1670046990485123571_o.jpg" alt="Testiotsikko" width="1980" height="1311"> <div class="ccm-image-slider-text"> <h2 class="ccm-image-slider-title">Testiotsikko</h2> </div> </li> <li> <img src="/application/files/5414/5872/2453/12657168_750580248417583_6252317971976524215_o.jpg" alt="Testiotksikko2" width="1980" height="1311"> <div class="ccm-image-slider-text"> <h2 class="ccm-image-slider-title">Testiotksikko2</h2> </div> </li> <li> <img src="/application/files/6214/5872/2452/12841324_762267077248900_8734111816239951349_o.jpg" alt="mjtjhehhe" width="1980" height="1311"> <div class="ccm-image-slider-text"> <h2 class="ccm-image-slider-title">mjtjhehhe</h2> </div>
Viewing 15 lines of 27 lines. View entire code block.
What i would like to change is to erase width and height of the images and to replace them with class="img-responsive". This is what view.php for image-slider looks like:
<ul class="rslides" id="ccm-image-slider-<?php echo $bID ?>"> <?php foreach($rows as $row) { ?> <li> <?php if($row['linkURL']) { ?> <a href="<?php echo $row['linkURL'] ?>" class="mega-link-overlay"></a> <?php } ?> <?php $f = File::getByID($row['fID']) ?> <?php if(is_object($f)) { $tag = Core::make('html/image', array($f, false))->getTag(); if($row['title']) { $tag->alt($row['title']); }else{ $tag->alt("slide");
Viewing 15 lines of 27 lines. View entire code block.
So, how should i edit it?
What i am trying to do is to set max-width and max-height for my image-slider so that i dont always have to edit images to fit my layout (they are big and some of them are vertical and some horizontal). I overwrited the css and set max-height: 600px and max-width: 800px to .rslides. The problem is now that some of images are too big for this area so i thought that i can make them scale automatically by img-responsive. I dont know is this the proper way to do this but if someone has better ideas, im listening. :P The goal is to make images appear correctly aspected in these limits.
Bootstrap's "img-responsive" class will, as far as I know, set "width: 100%" on the image. I don't think you can count on that always, especially when you have vertical images.
I don't think that investing some time in editing slider images is a waste of time so consider leaving that as it is.
I don't think that investing some time in editing slider images is a waste of time so consider leaving that as it is.
Okey... I also noticed that image-slider includes the original width and height of the image so could this be the reason why the aspect-ratio gets messed up?
In my CSS there is max-height set to 600px and max-width to auto so it should scale correctly, right?
<img src="/application/files/2214/5872/2455/886230_750580171750924_1670046990485123571_o.jpg" alt="Testiotsikko" width="1980" height="1311">
In my CSS there is max-height set to 600px and max-width to auto so it should scale correctly, right?
I'm not sure. I would do this: Leave only one slide so that it doesn't move. Then use Chrome's Inspect element feature to directly apply desired CSS styling on anything in the slider HTML markup and you will see what does have effect and what does not.
Once you're sure what you need to achieve, start looking for a way to implement it.
Once you're sure what you need to achieve, start looking for a way to implement it.
Hi Wanhaonki,
To add a class to images using the HTML/Image service, you can use addClass().
Example:
http://documentation.concrete5.org/api/class-Concrete.Core.Html.Obj...
The Bootstrap 3 img-responsive class adds these properties:
"Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element."
http://getbootstrap.com/css/#images-responsive...
The img-responsive class will override the image width and height attributes. These attributes have low specificity and do not need to be removed. Without them, your page layout may shift as images are loaded, when you load pages.
As java9 recommended, what you want to do is best suited for a custom template and not overriding the Image Slider view.
To add a class to images using the HTML/Image service, you can use addClass().
Example:
$tag->addClass('img-responsive');
http://documentation.concrete5.org/api/class-Concrete.Core.Html.Obj...
The Bootstrap 3 img-responsive class adds these properties:
.img-responsive { display: block; max-width: 100%; height: auto; }
"Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element."
http://getbootstrap.com/css/#images-responsive...
The img-responsive class will override the image width and height attributes. These attributes have low specificity and do not need to be removed. Without them, your page layout may shift as images are loaded, when you load pages.
As java9 recommended, what you want to do is best suited for a custom template and not overriding the Image Slider view.
I managed to addClass('img-responsive'), but it didn't seem to make any difference. I inspected the concrete5 output and the class was definitely applied. Maybe something needed to be included but wasn't.
I did, however, succeed with this:
That's probably not the right/best way to apply a style, but... I'm new. :)
I also found it necessary to copy view.css to the application/blocks/image_slider; otherwise the image title and description were misplaced. (I'm sure this comes as no surprise to those who know what they're doing.)
In trying to get this to work, I searched the concrete5 API documentation in vain for Core::make, addStyle() and style(). Any tips on how to find things in the documentation would be appreciated!
I did, however, succeed with this:
$tag->style('max-height:inherit; width:auto; float:none; margin-left:auto; margin-right:auto');
That's probably not the right/best way to apply a style, but... I'm new. :)
I also found it necessary to copy view.css to the application/blocks/image_slider; otherwise the image title and description were misplaced. (I'm sure this comes as no surprise to those who know what they're doing.)
In trying to get this to work, I searched the concrete5 API documentation in vain for Core::make, addStyle() and style(). Any tips on how to find things in the documentation would be appreciated!
@Gondwana
If the class is applied, but you are not seeing an effect, then I would check to see that you have that class in your CSS.
For most situations, I recommend using classes to apply CSS instead of inline styles. Inline styles are very hard to override.
Copying the Image Slider into application\blocks\image_slider creates an override. It is likely that you should be instead creating a custom template.
http://documentation.concrete5.org/developers/working-with-blocks/w...
If the class is applied, but you are not seeing an effect, then I would check to see that you have that class in your CSS.
For most situations, I recommend using classes to apply CSS instead of inline styles. Inline styles are very hard to override.
Copying the Image Slider into application\blocks\image_slider creates an override. It is likely that you should be instead creating a custom template.
http://documentation.concrete5.org/developers/working-with-blocks/w...
Thanks for the tips, Mr K!
When I found that manually adding the img-responsive values directly didn't work, I stopped looking to see if the right things had been included. All of the CSS properties I listed seem to be necessary, so img-responsive was never going to cut it.
I concur about inline styles. That was just a quick kludge to investigate. I've tried to put together a custom template (in the attached package). It's probably sinfully bad, since it's my first attempt at such a thing.
Since the required change was really only one new CSS declaration, I didn't like the idea of including a complete view.php and view.css in this package (mainly because this would mean that updates to the original files wouldn't take effect). I used a <link> in my view.php to pull in the original view.css, which meant that my view.css only needed the new declaration. I also used a $view->inc() to pull in the original view.php.
Interestingly, the $View-inc() trick didn't work when creating the custom template directly (ie, below the application directory), but it does seem to work in a package. Must be something to do with how files are found.
There was similar weirdness when trying to access the original view.css. When created below the application directory, the custom template didn't need to duplicate or pull in the original css; it was done automatically. But this didn't occur when using a package, necessitating the <link>.
I tried various permutations of requireAsset() to obtain the original view.css, to no avail. I'm sure my <link> isn't very politically correct; I'm keen to know the right way to do this.
Instead of using a custom template, this effect can also be achieved using 'Customise theme' > 'Custom CSS'. The CSS thus entered seems to be stored in the database, again meaning that updates to the original files wouldn't be hidden. However, I guess we don't want site editors to have to get their hands dirty with CSS.
This template highlights problems with the placement of image titles and descriptions—but that's another story. :)
I hope I didn't hijack this thread!
When I found that manually adding the img-responsive values directly didn't work, I stopped looking to see if the right things had been included. All of the CSS properties I listed seem to be necessary, so img-responsive was never going to cut it.
I concur about inline styles. That was just a quick kludge to investigate. I've tried to put together a custom template (in the attached package). It's probably sinfully bad, since it's my first attempt at such a thing.
Since the required change was really only one new CSS declaration, I didn't like the idea of including a complete view.php and view.css in this package (mainly because this would mean that updates to the original files wouldn't take effect). I used a <link> in my view.php to pull in the original view.css, which meant that my view.css only needed the new declaration. I also used a $view->inc() to pull in the original view.php.
Interestingly, the $View-inc() trick didn't work when creating the custom template directly (ie, below the application directory), but it does seem to work in a package. Must be something to do with how files are found.
There was similar weirdness when trying to access the original view.css. When created below the application directory, the custom template didn't need to duplicate or pull in the original css; it was done automatically. But this didn't occur when using a package, necessitating the <link>.
I tried various permutations of requireAsset() to obtain the original view.css, to no avail. I'm sure my <link> isn't very politically correct; I'm keen to know the right way to do this.
Instead of using a custom template, this effect can also be achieved using 'Customise theme' > 'Custom CSS'. The CSS thus entered seems to be stored in the database, again meaning that updates to the original files wouldn't be hidden. However, I guess we don't want site editors to have to get their hands dirty with CSS.
This template highlights problems with the placement of image titles and descriptions—but that's another story. :)
I hope I didn't hijack this thread!
Now, as per your requirement to have that attribute added - you will notice there's a call that sets the "alt" attribute of the image. I guess there might be some method to set the class?
Maybe you could try adding there:
$tag->class('class="image-responsive"');
and see if it works. But before make sure you do as I described at the beginning of my post.
Why would you want to add that class in the first place as the image slider is responsive already?