On the website we have banners all over but non of them have any alt text.
Below is the code for, any pointers as to how i can solve this issue? I was thinking maybe having the alt as the image name if possible so need to find a way to echo it.
Any other suggestions? I have 8 banners and don't mind manually adding the alt text for each banner if possible
<?php if ($module_title){ ?>
<div class="box-heading"><?php echo $module_title; ?></div>
<?php } ?>
<div class="box rich_banner grid_holder">
<?php foreach($sections as $section){ ?>
<div class="banner_<?php echo $columns; ?>">
<div class="image zoom_image_container"><img class="zoom_image" alt="" src="<?php echo $section['image']; ?>" />
<?php echo $section['description']; ?>
</div>
</div>
<?php } ?>
</div>
would this be the section of variable below?
<?php
class ControllerExtensionModuleCosyoneBanner extends Controller {
public function index($setting) {
if(empty($setting['module_title'][$this->config->get('config_language_id')])) {
$data['module_title'] = false;
} else if (isset($setting['module_title'][$this->config->get('config_language_id')])) {
$data['module_title'] = html_entity_decode($setting['module_title'][$this->config->get('config_language_id')], ENT_QUOTES, 'UTF-8');
}
$data['columns'] = $setting['columns'];
if (isset($setting['sections'])) {
$data['sections'] = array();
$section_row = 0;
foreach($setting['sections'] as $section) {
$this->load->model('tool/image');
if (isset($section['block'][$this->config->get('config_language_id')])){
$block = html_entity_decode($section['block'][$this->config->get('config_language_id')], ENT_QUOTES, 'UTF-8');
} else {
$block = false;
}
if (isset($section['thumb_image'])){
$image = 'image/' . $section['thumb_image'];
} else {
$image = false;
}
$section_row++;
$data['sections'][] = array(
'index' => $section_row,
'description' => $block,
'image' => $image
);
}
return $this->load->view('extension/module/cosyone_banner', $data);
}
}
}
You are able to use the description in your alt, I think for what's available that is the best solution.
<div class="image zoom_image_container"><img class="zoom_image" alt="<?php echo $section['description']; ?>" src="<?php echo $section['image']; ?>" />
Related
I have a code that is for a gallery. The images in this gallery opens in a fancybox. I don't want to link this images to a fancybox but i want link this images to one specific page. This is the code that must be customized:
<?php
global $sr_prefix;
$gallery = get_post_meta($post->ID, $sr_prefix.'_medias', true);
$postid = $post->ID;
$maintitle = 'h2'; $subtitle = 'h5';
if (get_option($sr_prefix.'_blogentrieslayout') == 'masonry' || get_option($sr_prefix.'_blogentrieslayout') == 'bloglist') { $maintitle = 'h4'; $subtitle = 'h6'; }
if( empty($gallery) || get_option($sr_prefix.'_blogentriesdisplay') == 'featuredimage' || get_option($sr_prefix.'_blogpostgallerydisplay') == "list" ) {
?>
<?php if(has_post_thumbnail()) { ?>
<div class="entry-thumb entry-media blog-media">
<div class="imgoverlay">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('single-blog-image'); ?>
<div class="overlay"><span class="overlaycolor"></span><span class="overlayinfo">
<?php echo '<'.$maintitle.'>'; ?><strong><?php the_title(); ?></strong><?php echo '</'.$maintitle.'>'; ?>
<?php if (!get_option($sr_prefix.'_blogpostsdisabledate')) { ?>
<?php echo '<'.$subtitle.'>'; ?><?php the_time(get_option('date_format')); ?><?php echo '</'.$subtitle.'>'; ?>
<?php } ?>
</span></div>
</a>
</div>
</div> <!-- END .entry-media -->
<?php } ?>
<?php
} else {
$medias = explode('|||', $gallery);
$output_medias = '';
foreach ($medias as $media) {
$object = explode('~~', $media);
$type = $object[0];
$val = $object[1];
$output_medias .= "<li>";
if ($type == 'image') {
$image = wp_get_attachment_image_src($val, 'single-blog-image'); $image = $image[0];
$fancyimage = wp_get_attachment_image_src($val, 'full'); $fancyimage = $fancyimage[0];
$thisimage = '<img src="'.$image.'" alt="'.get_the_title($image[1]).'"/>';
if(get_option($sr_prefix.'_blogpostsdisablefancybox') !== "on") {
$output_medias .= '<div class="imgoverlay">'.$thisimage.'<div class="overlay"><span class="overlaycolor"></span></div></div>';
} else {
$output_medias .= $thisimage;
}
} else {
$output_medias .= '<div class="embeddedvideo">'.$val.'</div>';
}
$output_medias .= "</li>";
}
?>
<?php if(get_option($sr_prefix.'_blogpostgallerydisplay') !== "list" ) { ?>
<div class="entry-media blog-media">
<div id="slider-<?php echo $postid; ?>" class="flexslider-container post-slider">
<div class="flexslider">
<ul class="slides">
<?php echo $output_medias; ?>
</ul>
</div>
</div>
</div> <!-- END .entry-media -->
<?php } else { ?>
<div class="entry-media blog-media">
<?php the_post_thumbnail('single-blog-image'); ?>
</div> <!-- END .entry-media -->
<?php } ?>
<?php } ?>
Seems like you are using Wordpress.
First of all you have to look at this part
if ($type == 'image') {
$image = wp_get_attachment_image_src($val, 'single-blog-image'); $image = $image[0];
$fancyimage = wp_get_attachment_image_src($val, 'full'); $fancyimage = $fancyimage[0];
$thisimage = '<img src="'.$image.'" alt="'.get_the_title($image[1]).'"/>';
if(get_option($sr_prefix.'_blogpostsdisablefancybox') !== "on") {
$output_medias .= '<div class="imgoverlay">'.$thisimage.'<div class="overlay"><span class="overlaycolor"></span></div></div>';
You have if(get_option($sr_prefix.'_blogpostsdisablefancybox') !== "on") option, which i suppose can disable fancybox, maybe it's somewhere in WP admin panel.
Anyway, if I remember correctly, fancybox links it's events to particular class, in this case it's openfancybox class. You can remove this class and disable fancybox.
$output_medias .=
'<div class="imgoverlay">
<a href="'.$fancyimage.'" class="openfancybox" rel="gallery'.get_the_ID().'" title="'.get_the_title($image[1]).'">'.$thisimage.'
<div class="overlay"><span class="overlaycolor">
</span>
</div>
</a>
</div>';
Then you can just change $fancyimage variable to you desired URL.
I use open cart I am trying to get on my slideshow controller remove the $width and $height.
And just get the image, title, and link. I have tried to remove the $widths and $height but still get error
<?php
class ControllerModuleSlideshow extends Controller {
public function index($setting) {
static $module = 0;
$this->load->model('design/banner');
$this->load->model('tool/image');
$this->document->addStyle('catalog/view/javascript/jquery/flexslider/flexslider.css');
$this->document->addScript('catalog/view/javascript/jquery/flexslider/jquery.flexslider-min.js');
$data['width'] = $setting['width']; //need to remove
$data['height'] = $setting['height']; //need to remove
$data['banners'] = array();
$results = $this->model_design_banner->getBanner($setting['banner_id']);
foreach ($results as $result) {
if (is_file(DIR_IMAGE . $result['image'])) {
$data['banners'][] = array(
'title' => $result['title'],
'link' => $result['link'],
'image' => $this->model_tool_image->resize($result['image'], $setting['width']//need to remove, $setting['height']//need to remove)
);
}
}
$data['module'] = $module++;
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/slideshow.tpl')) {
return $this->load->view($this->config->get('config_template') . '/template/module/slideshow.tpl', $data);
} else {
return $this->load->view('default/template/module/slideshow.tpl', $data);
}
}
}
Can't seem to find the way to make this work in replace of the width and height
public function getImage($image){
$image = DIR_IMAGE . $image;
if($this->request->server['HTTPS']) {
return $this->config->get('config_ssl') . 'image/' . $image;
} else {
return $this->config->get('config_url') . 'image/' . $image;
}
}
$this->getImage($result['image']);
I had this exact problem not too long ago. It was driving me daft and I all I wanted was to make the slide show responsive but the W x H values were becoming very troublesome to remove without affecting other classes. Portability was also a serious concern of mine. Basically all this is doing is riding off the nivoslider code but using the bootstrap carousel for the display. So you could change the slideshow banners as you always have, and they are always displayed on the front end.
If you happen to be using the bootstrap 3 framework, this is a great work around which proved successful. Don't edit the slideshow.php, edit slideshow.tpl instead. I highly don't recommend you mess with the php files unless you are very comfortable with php and the idea of mvc in opencart. To be honest, you probably should never edit, just extend or start from scratch as it uses fall back mechanisms.
But anyway, the code:
<div class="col-md-12" >
<div id="homepage" class="carousel slide">
<div class="carousel-inner">
<?php
$flag = 0;
foreach ($banners as $banner) { ?>
<div class="item <?=$flag==0?"active":""?>">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } ?>
<?php
$flag=1;
} ?>
</div>
</div>
...and the JQuery
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 5000
});
});
</script>
edits welcomed
Width and Height are the feature which will help you to assign width and height dynamically that you can set from the admin panel
admin>extensions>modules>slideshow[edit]
if you don't want this feature in effect
Simply go to the template file
find (catalog/view/theme/default/template/module/slideshow.tpl)
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
Replace with
<div id="slideshow<?php echo $module; ?>" class="nivoSlider">
two ways to help u :)
in catalog/controller/module/slideshow.php
BEFORE
$this->data['width'] = $setting['width'];
$this->data['height'] = $setting['height'];
AFTER
$this->data['width'] = '0'; // or NULL
$this->data['height'] = '0'; // or NULL
in catalog/view/theme/default/template/module/slideshow.tpl
BEFORE
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
AFTER
<div id="slideshow<?php echo $module; ?>" class="nivoSlider">
if you need to add custom height and width add this to above code change 000 to you size
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: 000px; height: 000px;">
I am trying to use $description variable outside the loop. Help me do it please.
<?php
$sql_album = "SELECT * FROM albums";
$res_album = mysql_query($sql_album) or die(mysql_error());
$albums = array();
$description = "";
while ($row_album = mysql_fetch_assoc($res_album)) {
$description = $row_album['description'];
$albums[$row_album['title']] = array(
'images/albums/'.$row_album['title'].'/1.jpg',
'images/albums/'.$row_album['title'].'/2.jpg',
'images/albums/'.$row_album['title'].'/3.jpg',
'images/albums/'.$row_album['title'].'/4.jpg'
);
}
foreach ($albums as $name => $a) {
?>
<div id="album">
<a href="view_album.php?name=<?php echo $name; ?>" data-images="<?php echo implode('|', array_slice($a,1))?>" class="album">
<img src="<?php echo $a[0]?>" alt="<?php echo $name?>" />
<span class="preloader"></span>
</a>
<div class="album_info">
<h4><?php echo $name?></h4>
<p><?php echo $description; ?></p>
</div>
</div>
<?php
}
?>
Should I make an array, or define it first, i am totally confused, need help.
In your $albums array (in the while loop), store your images and description like this:
$albums[$row_album['title']] = array(
"description" => $row_album['description'],
"images" => array(
'images/albums/'.$row_album['title'].'/1.jpg',
'images/albums/'.$row_album['title'].'/2.jpg',
'images/albums/'.$row_album['title'].'/3.jpg',
'images/albums/'.$row_album['title'].'/4.jpg'
)
);
Then in your foreach loop, act like this:
<img src="<?php echo $a['images'][0]?>" alt="<?php echo $name?>" />
and
<p><?php echo $a['description']; ?></p>
Edit:
Don't forget to change this
array_slice($a,1)
to this:
array_slice($a['images'],1)
I would just combine the whole thing into a single loop; the below code is untested, but I hope you can follow it.
while ($row_album = mysql_fetch_assoc($res_album)) {
print_album($row_album);
}
function print_album(array $album)
{
$name = htmlspecialchars($album['title'], ENT_QUOTES, 'UTF-8');
$description = htmlspecialchars($album['description'], ENT_QUOTES, 'UTF-8');
$view_link = sprintf('view_album.php?%s', http_build_query([
'name' => $album['title'],
]);
$images = array_map(function($index) use ($album) {
return sprintf(
'images/albums/%s/%d.jpg',
urlencode($album['title']),
$index
);
}, range(1, 4));
$images_data = htmlspecialchars(join('|', array_slice($images, 1)), ENT_QUOTES, 'UTF-8');
?>
<div id="album">
<a href="<?php echo $view_link ?>" data-images="<?php echo $images_data; ?>" class="album">
<img src="<?php echo htmlspecialchars($images[0], ENT_QUOTES, 'UTF-8'); ?>" alt="<?php echo $name; ?>" />
<span class="preloader"></span>
</a>
<div class="album_info">
<h4><?php echo $name; ?></h4>
<p><?php echo $description; ?></p>
</div>
</div>
<?php
}
I've added escaping with the use of urlencode(), htmlspecialchars() and http_build_query() to prevent a potential break in your HTML (or XSS is the worst case).
Currently my image gallery has 4 images per row. If the screen is minimized below the width of those 4 images, one image will drop to the next line and there will be a line break before the next row. Is there any way to make gallery continuous instead of having the break in images when the screen is resized? Ideally, I would like to start with 5 images per row, then if the viewer has a smaller screen, it will automatically adjust the number of images per row to fit whatever size window they are using.
Here is a link to the gallery: http://rabbittattoo.com/?gallery=gallery
And the PHP:
$pp_gallery_style = get_option('pp_gallery_style');
if($pp_gallery_style == 'f')
{
include_once(TEMPLATEPATH.'/gallery-f.php');
exit;
}
if(!isset($hide_header) OR !$hide_header)
{
get_header();
}
$caption_class = "page_caption";
$portfolio_sets_query = '';
$custom_title = '';
if(!empty($term))
{
$portfolio_sets_query.= $term;
$obj_term = get_term_by('slug', $term, 'photos_galleries');
$custom_title = $obj_term->name;
}
else
{
$custom_title = get_the_title();
}
/**
* Get Current page object
**/
$page = get_page($post->ID);
/**
* Get current page id
**/
if(!isset($current_page_id) && isset($page->ID))
{
$current_page_id = $page->ID;
}
if(!isset($hide_header) OR !$hide_header)
{
?>
<div class="wrapper_shadow"></div>
<div class="page_caption">
<div class="caption_inner">
<div class="caption_header">
<h1 class="cufon"><?php echo the_title(); ?></h1>
</div>
</div>
</div>
</div>
<!-- Begin content -->
<div id="content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div id="gallery_wrapper" class="inner_wrapper portfolio">
<div class="standard_wrapper small">
<br class="clear"/><br/>
<?php
}
else
{
echo '<br class="clear"/>';
}
?>
<?php echo do_shortcode(html_entity_decode($page->post_content)); ?>
<!-- Begin portfolio content -->
<?php
$menu_sets_query = '';
$portfolio_items = 0;
$portfolio_sort = get_option('pp_gallery_sort');
if(empty($portfolio_sort))
{
$portfolio_sort = 'DESC';
}
$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $post->ID,
'order' => $portfolio_sort,
'orderby' => 'date',
);
$all_photo_arr = get_posts( $args );
if(isset($all_photo_arr) && !empty($all_photo_arr))
{
?>
<?php
foreach($all_photo_arr as $key => $portfolio_item)
{
$image_url = '';
if(!empty($portfolio_item->guid))
{
$image_id = $portfolio_item->ID;
$image_url[0] = $portfolio_item->guid;
}
$last_class = '';
$line_break = '';
if(($key+1) % 4 == 0)
{
$last_class = ' last';
if(isset($page_photo_arr[$key+1]))
{
$line_break = '<br class="clear"/><br/>';
}
else
{
$line_break = '<br class="clear"/>';
}
}
?>
<div class="one_fourth<?php echo $last_class?>" style="margin-right:24px;margin-bottom:24px;margin-top:-20px">
<a title="<?php echo $portfolio_item->post_title?>" href="<?php echo $image_url[0]?>" class="one_fourth_img" rel="gallery" href="<?php echo $image_url[0]?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?src=<?php echo $image_url[0]?>&h=370&w=350&zc=1" alt=""/>
</a>
</div>
<?php
echo $line_break;
}
//End foreach loop
?>
<?php
}
//End if have portfolio items
?>
</div>
<!-- End main content -->
<br class="clear"/><br/>
</div>
<?php
if(!isset($hide_header) OR !$hide_header)
{
?>
</div>
<!-- End content -->
<?php get_footer(); ?>
<?php
}
?>
Thank you in advance for you help!
I am developing a Digg like site and I want the title of the comments page to match the link title, here its the comments file code:
class CommentsPage extends Page {
function __construct($title = '')
{
$this->setTitle($title);
}
function header()
{
parent::header();
}
function showAllComments($article_id, $param)
{
$article = Article::getById($article_id);
if(!empty($article))
{
?>
<div class="news_item">
<img alt="vote button" class="vote_button" height="10" src="assets/images/vote2.png" width="10" class="border_less" />
<h2 class="news_item_title"><b><?php echo $article->getTitle(); ?></b></h2>
<span class="news_item_url">(<?php echo $article->getUrlDomain(); ?>)</span>
<div class="news_item_info"><?php $points = $article->getPoints(); echo $points > 1 ? "$points points" : "$points point"; ?> by <?php echo $article->getUsername(); ?> <?php echo $article->getElapsedDateTime(); ?></div>
<p class="news_item_content"><?php echo $article->getDescription(); ?></p>
</div>
<?php
$this->showSubmitForm($article);
}
I understand I have to change "$this->setTitle($title);" for something with this: $article->getTitle(); but I have tried different things and just shows errors.
I think I was not clear enough: the title on top of the page to change and be the same as the news item title for that page (this is the site: kiubbo.com) Thx
How about this:
class CommentsPage extends Page
{
private $article;
function __construct($article_id)
{
$this->article = Article::getById($article_id);
if(!empty($article))
{
$this->setTitle($article->getTitle());
}
else
{
//Throw an exception
}
}
function header()
{
parent::header();
}
function showAllComments($param)
{
if(!empty($this->article))
{
?>
<div class="news_item">
<img alt="vote button" class="vote_button" height="10" src="assets/images/vote2.png" width="10" class="border_less" />
<h2 class="news_item_title"><b><?php echo $this->article->getTitle(); ?></b></h2>
<span class="news_item_url">(<?php echo $this->article->getUrlDomain(); ?>)</span>
<div class="news_item_info"><?php $points = $this->article->getPoints(); echo $points > 1 ? "$points points" : "$points point"; ?> by <?php echo $this->article->getUsername(); ?> <?php echo $this->article->getElapsedDateTime(); ?></div>
<p class="news_item_content"><?php echo $this->article->getDescription(); ?></p>
</div>
<?php
$this->showSubmitForm($this->article);
}
}
I'm a bit confused. Are you just looking for a property getter/setter?
<?php
class CommentsPage extends Page {
protected $title;
function __construct($title = '')
{
$this->setTitle($title);
}
// This function does nothing, by the way
function header()
{
parent::header();
}
public function setTitle( $title )
{
$this->title = $title;
}
public function getTitle()
{
return $this->title;
}
function showAllComments($article_id, $param)
{
$article = Article::getById($article_id);
if(!empty($article))
{
?>
<div class="news_item">
<img alt="vote button" class="vote_button" height="10" src="assets/images/vote2.png" width="10" class="border_less" />
<h2 class="news_item_title"><b><?php echo $this->getTitle(); ?></b></h2>
<span class="news_item_url">(<?php echo $article->getUrlDomain(); ?>)</span>
<div class="news_item_info"><?php $points = $article->getPoints(); echo $points > 1 ? "$points points" : "$points point"; ?> by <?php echo $article->getUsername(); ?> <?php echo $article->getElapsedDateTime(); ?></div>
<p class="news_item_content"><?php echo $article->getDescription(); ?></p>
</div>
<?php
$this->showSubmitForm($article);
}
}
}