close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

 
› WebAssist Forums › PowerGallery › PowerGallery General / Announcements › Alternative text for images
Sign in to rate this thread
rating

Alternative text for images

Thread began 1/06/2012 7:56 am by tjones368861 | Last modified 1/10/2012 12:07 pm by Jason Byrnes | 1591 views | 8 replies |

1/06/2012 7:56 am  |  #1 tjones368861

Alternative text for images

Is it possible to set Alternative text for images in a gallery? I have looked at the manage images area and do not see a place to set alt text.
Tks
Tom

Sign in to reply to this post

1/06/2012 8:29 am  |  #2 Jason ByrnesWebAssist

no, power gallery does not set the images alt text.

you can edit the /galleries/<selected gallery>/index.php file (where <selected gallery> is the active gallery type) and change the alt tag:

php:
alt=""



to:

php:
alt="'.str_replace('"', '\"', $row_images['title']).'"



which will use the title for the alt tag

Sign in to reply to this post

1/07/2012 7:44 am  |  #3 tjones368861

I have replaced the code with teh suggested code and am now getting a code error in Dreamweaver CS5.5 . here is the whol line including the revised alt code.:

<a href="<?php echo($fullsizeImgSrc); ?>" rel="lightbox-pg<?php echo($random ); ?>" name=""><img src="<?php echo($imagePath); ?>" alt="'.str_replace('"', '\"', $row_images['title']).'" title="<?php echo($i . '####'); ?>" width="<?php echo($thumbnailInfo['width']); ?>" height="<?php echo($thumbnailInfo['height']); ?>" /></a>


I can't see any problems, but dreamweaver reports code error with teh changes.

Sign in to reply to this post

1/09/2012 7:54 am  |  #4 Jason ByrnesWebAssist

the line looks fine to me, sometimes I have Dreamweaver report an error when one does not exist. Does the gallery work in the browser? That is the true test.

Sign in to reply to this post

1/10/2012 2:34 am  |  #5 tjones368861

alt tag changes

With the original code I see the following when I view source.

alt=""

when I insert the suggested code I see this when I view source:

alt="'.str_replace('"', '\"', $row_images['title']).'"

Sign in to reply to this post

1/10/2012 6:31 am  |  #6 Jason ByrnesWebAssist

send a copy of the page before and after editing it so i can see the code in context.

Sign in to reply to this post

1/10/2012 12:00 pm  |  #7 tjones368861

Code before and after

Code Before:

<?php
//gallery id, theme
if(empty($pg_id)) $pg_id = (isset($_GET['gallery']) && is_numeric($_GET['gallery'])) ? intval($_GET['gallery']) : false;
if(empty($pg_theme)) $pg_theme = 'dark';
if(isset($_GET['theme'])) $pg_theme = htmlentities(strtolower($_GET['theme']));

//set config
$abs_file = str_replace('\\', '/', dirname(realpath(__FILE__)));
$abs_prefix = substr($abs_file, 0, strrpos($abs_file, '/') + 1);
$included = strtolower(realpath(__FILE__)) != strtolower(realpath($_SERVER['SCRIPT_FILENAME']));
include($abs_prefix . 'global.php');
require_once($abs_prefix . "../webassist/caching/PG_CachedResize_Image.php" );

//get first gallery id if none specified
if(!$pg_id) {
$galleryParam = (isset($_GET['gallery'])) ? $_GET['gallery'] : "";
}
else{
$galleryParam = $pg_id;
}

$pg_id = getGalleryId($galleryParam);

$result_gallery = mysql_query('
SELECT *
FROM pg1_gallery
WHERE id = ' . $pg_id);

if(mysql_num_rows($result_gallery) == 1) {
$row_gallery = mysql_fetch_assoc($result_gallery);
}
else{
$row_gallery = array( 'id' => 0, 'folder_name' => '', 'title' => '' );
}

$pg_foldername = basename($abs_file);
$themeNames = getGalleryThemeNames($pg_foldername);

if(empty($pg_theme) || array_search($pg_theme, $themeNames) === false ){
$pg_theme = isset($_GET['theme']) ? $_GET['theme'] : $themeNames[0];
}

$inDesignMode = isset( $_GET['Editing'] ) ? $_GET['Editing'] : false;

if($inDesignMode){
$pg_galleryName = 'temp_editing';
}
else{
$pg_galleryName = $pg_foldername;
}

$galleries_dir = $abs_prefix;
$pg_galleryInfo = pg_getGalleryDesignThemeInfo($galleries_dir, $pg_galleryName, $pg_theme);
$themeInfo = $pg_galleryInfo['galleries'][$pg_galleryInfo['design']]['themes'][$pg_galleryInfo['theme']];
$result_images = getSyncedImagesForGallery($row_gallery);
?>
<?php if(!$included) { ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $row_gallery['title']; ?></title>
<style type="text/css" media="all">
#pgOuterWrapper .pg-rl { margin: 100px auto; }
</style>
<?php } ?>
<style type="text/css" media="all">
@import url("<?php echo $pg_config['path']; ?>css/slimbox/slimbox.css");
@import url("<?php echo $pg_config['html_prefix']; ?>css/themes/gallery.php?theme=<?php echo $pg_theme; ?><?php echo ( ($inDesignMode)? '&time='.time() : '' ); ?>");
</style>
<?php if(empty($js_mootools)) { ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/mootools-core-1.3.2-full-compat-yc.js"></script>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/mootools-more-1.3.2.1_min.js"></script>
<?php $js_mootools = true; } ?>
<?php if(empty($js_slimbox)) { ?>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/slimbox.js"></script>
<?php $js_slimbox = true; } ?>
<script type="text/javascript">var pg_thumbsPerPage = <?php echo $themeInfo['imagetypes']['thumbsPerPage']; ?></script>
<script type="text/javascript" src="<?php echo $pg_config['html_prefix']; ?>js/gallery.js"></script>
<?php if(!$included) { ?>
</head>
<body class="pg">
<div id="pgOuterWrapper">
<?php } ?>

<div class="pg-rl">

<!-- ribbon -->
<div class="ribbon">
<div class="prev"></div>
<div class="thumbs-wrapper">
<div class="thumbs">
<div class="thumbs-ribbon-scroller" >
<?php
if(mysql_num_rows($result_images) == 0) {
?>
<div class="no-images">no images</div>
<?php } ?>
<?php
$random = rand(0, 10000);
$fullsizeInfo = $themeInfo['imagetypes']['fullsize'];
$thumbnailInfo = $themeInfo['imagetypes']['thumbnail'];
if(mysql_num_rows($result_images) >= 1) {
$i = 0;
while($row_images = mysql_fetch_assoc($result_images)){
?>
<?php
if(TRUE){ // Begin Cached Resized Image: ImageCacheInstance_1301405982488
ob_start();
?>
<?php
$imagePath = abs2rel( realpath($galleries_dir .'../images/' . $row_gallery['folder_name'] . '/' . $row_images['file_prefix'] . '.' . $row_images['file_ext']), getcwd());
$rotateAngle = $row_images['rotate'];
$fullsizeImgTag = '<img alt="" src="' . $imagePath . '" width="'. $fullsizeInfo['width'] . '" height="' . $fullsizeInfo['height'] .'" />'.PHP_EOL;
$watermarkOpts = array("text" => $row_gallery['watermark_text'], "font_size" => $row_gallery['watermark_font'], "position" => $row_gallery['watermark_position']);
// Note: no echo here, as we want the image resized, but we don't have an IMG tag markup in the page for the fullsize image
$fullsizeImgTag = pg_getCachedResizedImageHTML($fullsizeImgTag, "" . realpath( $galleries_dir ."../images/" . $row_gallery['folder_name'] . "/cache"), "". $fullsizeInfo['resize'] ."", "",true, false, $rotateAngle, $watermarkOpts);
if(preg_match("/src\s*=\s*(['\"])([^'\"]*)\\1/i", $fullsizeImgTag, $fullsizeMatches)){
$fullsizeImgSrc = $fullsizeMatches[2];
}
else{
$fullsizeImgSrc = '';
}
// reset watermark options for thumbnails, as they to not have watermarks on them
$watermarkOpts = array();
?>
<div style="float:left">
<a href="<?php echo($fullsizeImgSrc); ?>" rel="lightbox-pg<?php echo($random ); ?>" name=""><img src="<?php echo($imagePath); ?>" alt="" title="<?php echo($i . '####'); ?>" width="<?php echo($thumbnailInfo['width']); ?>" height="<?php echo($thumbnailInfo['height']); ?>" /></a>
<div style="clear:left; width:<?php echo($thumbnailInfo['width']); ?>px; padding-left:10px"><strong><?php echo(str_replace('"', '\"', $row_images['title']) . (strlen($row_images['title']) > 0 ? ':' : '')); ?></strong> <?php echo( str_replace('"', '\"', $row_images['description'])); ?></div></div>


<?php
echo(pg_getCachedResizedImageHTML(ob_get_clean(), "" . realpath( $galleries_dir ."../images/" . $row_gallery['folder_name'] . "/cache"), "". $thumbnailInfo['resize'] ."", "",true, false, $rotateAngle, $watermarkOpts));
} // End Cached Resized Image: ImageCacheInstance_1301405982488
?>
<?php
$i++;
}
}
?>
</div>
</div>
</div>
<div class="next"></div>
</div>

</div>

<?php if(!$included) { ?>
</div>
</body>
</html>
<?php } ?>

Sign in to reply to this post

1/10/2012 12:01 pm  |  #8 tjones368861

alt text code Code After suggested change

Code After:

<?php
//gallery id, theme
if(empty($pg_id)) $pg_id = (isset($_GET['gallery']) && is_numeric($_GET['gallery'])) ? intval($_GET['gallery']) : false;
if(empty($pg_theme)) $pg_theme = 'dark';
if(isset($_GET['theme'])) $pg_theme = htmlentities(strtolower($_GET['theme']));

//set config
$abs_file = str_replace('\\', '/', dirname(realpath(__FILE__)));
$abs_prefix = substr($abs_file, 0, strrpos($abs_file, '/') + 1);
$included = strtolower(realpath(__FILE__)) != strtolower(realpath($_SERVER['SCRIPT_FILENAME']));
include($abs_prefix . 'global.php');
require_once($abs_prefix . "../webassist/caching/PG_CachedResize_Image.php" );

//get first gallery id if none specified
if(!$pg_id) {
$galleryParam = (isset($_GET['gallery'])) ? $_GET['gallery'] : "";
}
else{
$galleryParam = $pg_id;
}

$pg_id = getGalleryId($galleryParam);

$result_gallery = mysql_query('
SELECT *
FROM pg1_gallery
WHERE id = ' . $pg_id);

if(mysql_num_rows($result_gallery) == 1) {
$row_gallery = mysql_fetch_assoc($result_gallery);
}
else{
$row_gallery = array( 'id' => 0, 'folder_name' => '', 'title' => '' );
}

$pg_foldername = basename($abs_file);
$themeNames = getGalleryThemeNames($pg_foldername);

if(empty($pg_theme) || array_search($pg_theme, $themeNames) === false ){
$pg_theme = isset($_GET['theme']) ? $_GET['theme'] : $themeNames[0];
}

$inDesignMode = isset( $_GET['Editing'] ) ? $_GET['Editing'] : false;

if($inDesignMode){
$pg_galleryName = 'temp_editing';
}
else{
$pg_galleryName = $pg_foldername;
}

$galleries_dir = $abs_prefix;
$pg_galleryInfo = pg_getGalleryDesignThemeInfo($galleries_dir, $pg_galleryName, $pg_theme);
$themeInfo = $pg_galleryInfo['galleries'][$pg_galleryInfo['design']]['themes'][$pg_galleryInfo['theme']];
$result_images = getSyncedImagesForGallery($row_gallery);
?>
<?php if(!$included) { ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $row_gallery['title']; ?></title>
<style type="text/css" media="all">
#pgOuterWrapper .pg-rl { margin: 100px auto; }
</style>
<?php } ?>
<style type="text/css" media="all">
@import url("<?php echo $pg_config['path']; ?>css/slimbox/slimbox.css");
@import url("<?php echo $pg_config['html_prefix']; ?>css/themes/gallery.php?theme=<?php echo $pg_theme; ?><?php echo ( ($inDesignMode)? '&time='.time() : '' ); ?>");
</style>
<?php if(empty($js_mootools)) { ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/mootools-core-1.3.2-full-compat-yc.js"></script>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/mootools-more-1.3.2.1_min.js"></script>
<?php $js_mootools = true; } ?>
<?php if(empty($js_slimbox)) { ?>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/slimbox.js"></script>
<?php $js_slimbox = true; } ?>
<script type="text/javascript">var pg_thumbsPerPage = <?php echo $themeInfo['imagetypes']['thumbsPerPage']; ?></script>
<script type="text/javascript" src="<?php echo $pg_config['html_prefix']; ?>js/gallery.js"></script>
<?php if(!$included) { ?>
</head>
<body class="pg">
<div id="pgOuterWrapper">
<?php } ?>

<div class="pg-rl">

<!-- ribbon -->
<div class="ribbon">
<div class="prev"></div>
<div class="thumbs-wrapper">
<div class="thumbs">
<div class="thumbs-ribbon-scroller" >
<?php
if(mysql_num_rows($result_images) == 0) {
?>
<div class="no-images">no images</div>
<?php } ?>
<?php
$random = rand(0, 10000);
$fullsizeInfo = $themeInfo['imagetypes']['fullsize'];
$thumbnailInfo = $themeInfo['imagetypes']['thumbnail'];
if(mysql_num_rows($result_images) >= 1) {
$i = 0;
while($row_images = mysql_fetch_assoc($result_images)){
?>
<?php
if(TRUE){ // Begin Cached Resized Image: ImageCacheInstance_1301405982488
ob_start();
?>
<?php
$imagePath = abs2rel( realpath($galleries_dir .'../images/' . $row_gallery['folder_name'] . '/' . $row_images['file_prefix'] . '.' . $row_images['file_ext']), getcwd());
$rotateAngle = $row_images['rotate'];
$fullsizeImgTag = '<img alt="" src="' . $imagePath . '" width="'. $fullsizeInfo['width'] . '" height="' . $fullsizeInfo['height'] .'" />'.PHP_EOL;
$watermarkOpts = array("text" => $row_gallery['watermark_text'], "font_size" => $row_gallery['watermark_font'], "position" => $row_gallery['watermark_position']);
// Note: no echo here, as we want the image resized, but we don't have an IMG tag markup in the page for the fullsize image
$fullsizeImgTag = pg_getCachedResizedImageHTML($fullsizeImgTag, "" . realpath( $galleries_dir ."../images/" . $row_gallery['folder_name'] . "/cache"), "". $fullsizeInfo['resize'] ."", "",true, false, $rotateAngle, $watermarkOpts);
if(preg_match("/src\s*=\s*(['\"])([^'\"]*)\\1/i", $fullsizeImgTag, $fullsizeMatches)){
$fullsizeImgSrc = $fullsizeMatches[2];
}
else{
$fullsizeImgSrc = '';
}
// reset watermark options for thumbnails, as they to not have watermarks on them
$watermarkOpts = array();
?>
<div style="float:left">
<a href="<?php echo($fullsizeImgSrc); ?>" rel="lightbox-pg<?php echo($random ); ?>" name=""><img src="<?php echo($imagePath); ?>" alt="'.str_replace('"', '\"', $row_images['title']).'" title="<?php echo($i . '####'); ?>" width="<?php echo($thumbnailInfo['width']); ?>" height="<?php echo($thumbnailInfo['height']); ?>" /></a>
<div style="clear:left; width:<?php echo($thumbnailInfo['width']); ?>px; padding-left:10px"><strong><?php echo(str_replace('"', '\"', $row_images['title']) . (strlen($row_images['title']) > 0 ? ':' : '')); ?></strong> <?php echo( str_replace('"', '\"', $row_images['description'])); ?></div></div>


<?php
echo(pg_getCachedResizedImageHTML(ob_get_clean(), "" . realpath( $galleries_dir ."../images/" . $row_gallery['folder_name'] . "/cache"), "". $thumbnailInfo['resize'] ."", "",true, false, $rotateAngle, $watermarkOpts));
} // End Cached Resized Image: ImageCacheInstance_1301405982488
?>
<?php
$i++;
}
}
?>
</div>
</div>
</div>
<div class="next"></div>
</div>

</div>

<?php if(!$included) { ?>
</div>
</body>
</html>
<?php } ?>

Sign in to reply to this post

1/10/2012 12:07 pm  |  #9 Jason ByrnesWebAssist

I see, we are working from different version of the power gallery files. try changing

php:
alt="'.str_replace('"', '\"', $row_images['title']).'"



to:

php:
alt="<?php echo(str_replace('"', '\"', $row_images['title'])); ?>"
Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top
Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...